表形式（テーブル）

date_range 2024/08/07
日々の活動日記エンジニアインターン
松木　智哉
表


こんにちは！

京都開発研究所、Webプログラマコースの長期インターン生、松木智哉です！！


今日は、ウェブページでデータを整理して表示するために、HTMLとCSSを使ってテーブルを作成する方法を学びました！基本的なテーブルの作り方から、CSSでのスタイリング方法まで、実際に手を動かしながら学習しました。


まずは、HTMLでテーブルを作成する基本的な構造についてです！テーブルは<table>タグで作成し、その中に行（<tr>）とセル（<td>または<th>）を配置します！


<table>

<thead>

<tr>

<th>・・</th>

</tr>

</thead>

<tbody>

<tr>

<td>・・</td>

</tr>

</tbody>

</table>


<thead>タグを使ってテーブルヘッダーを定義し、<tbody>タグを使ってテーブルの本体部分を定義しています！ヘッダーには<th>タグを、データセルには<td>タグを使用します！！


これに対してCSSを用いてスタイリングをしていきます！！


このテーブルを用いた表作成は、簡単にできますが、可変対応やカスタマイズの部分が難しく、苦戦をしています！！


テーブルタグやそれ以外の表作成の手法を習得し、表作成をスムーズにできるようにしていきたいと思います！！

-----------------------------------------------

G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/

G!FIT公式Twitter：https://twitter.com/gfit_gdn

メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/



＊COMMENT＊

  • 水落 えり

    水落 えり

    更新日：2024-08-07 17:25

    ＊コメント＊

    智哉くん、ウェブページでのテーブル作成に取り組んだとのこと、お疲れ様です！HTMLとCSSを駆使してデータを整理し表示する方法を学ぶことは、きっと重要なスキルですね。なんでも整理整頓をすることは大切なことです！！しっかり学べているのが素晴らしいですね👏

    可変対応やカスタマイズはとても難しいように感じますね💦ですが、習得すれば非常に役立つスキルですね✨これからも表作成の手法をさらに深めて、スムーズに作成できるように頑張ってください！応援しています！

    ＊コメント＊

  • 永野　智成

    永野　智成

    更新日：2024-08-07 18:14

    ＊コメント＊

    HTMLは気をつけないといけないコーディングルールがあったりして少し大変ですが、よく考えられているなぁと感心しますよね笑
    次の出勤時もお互い頑張りましょう！

    ＊コメント＊

  • 下川　春樹

    下川　春樹

    更新日：2024-08-07 19:56

    ＊コメント＊

    お疲れ様です。
    テーブルタグ慣れるまではややこしいですよね。
    SEO的にもあまり良くなく、最近では使われなくなりつつあるみたいです。
    代わりに使えるのはFlexやGridですかね。
    後々、行を足したりするのが簡単なのでおすすめは、dl・dd・dtです！調べてみてくださいー٩( 'ω' )و

    ＊コメント＊

  • 星　翼

    星　翼

    更新日：2024-08-07 22:23

    ＊コメント＊

    テーブルは結構ややこしいですよね、、、
    「どこをどうしたら、繋げたいところが繋がるんだ？」と分からなくなってしまう事もあります💦
    練習あるのみですね！

    ＊コメント＊

  • 寺田　ゆり

    寺田　ゆり

    更新日：2024-08-08 07:08

    ＊コメント＊

    お疲れ様です。
    未経験で入社したのでテーブルは業務で初めて作成したのを覚えてます。コードの上達はどんどん記述を書いて慣れていくのが一番なのでお互い頑張りましょう…！

    ＊コメント＊

  • 池田　みはな

    池田　みはな

    更新日：2024-08-08 08:00

    ＊コメント＊

    おつかれさまです。テーブルタグはスタイリングやカスタマイズが難しいですよね。松木さんが頑張っている姿勢を見て、私もさらに頑張ろうと思いました！これからもお互いに頑張っていきましょう！

    ＊コメント＊

  • 田中　敦史

    田中　敦史

    更新日：2024-08-08 09:42

    ＊コメント＊

    訓練校では最近使わないと教わりましたが、tableタグ意外とよく使いますよね！
    今回、構造の復習が出来て良かったです！！
    お互いがんばりましょうね！！

    ＊コメント＊

  • 則岡　えり

    則岡　えり

    更新日：2024-08-08 09:43

    ＊コメント＊

    お疲れ様です。
    私もテーブルのカスタマイズでよく苦戦します。。
    お互いがんばりましょう！

    ＊コメント＊

  • 岡田　のりこ

    岡田　のりこ

    更新日：2024-08-08 09:47

    ＊コメント＊

    学んだ事をしっかりとアウトプットされていて素晴らしいです！
    テーブルは業務で時々使いますが、分からなくなることがあります。。
    たくさん実践してスムーズに表作成ができるようお互い頑張りましょう！

    ＊コメント＊

  • 阿部　はるか

    阿部　はるか

    更新日：2024-08-08 10:04

    ＊コメント＊

    お疲れ様です。
    私はデザイナーなので簡単なコードしかわかりませんが、ややこしくて難しいなと思います💦とにかく何度も繰り返し手を動かすことで身についてくると思うので、頑張ってください！

    ＊コメント＊

  • ZAW　MIN　OO

    ZAW　MIN　OO

    更新日：2024-08-08 10:13

    ＊コメント＊

    テーブルの作成はややこしいですね。僕も普通のパーツと表の作成時間は0.5倍の差があります。色々とやりたいことを試して作らないとうまくいきません。頑張ってください。

    ＊コメント＊

  • 大橋　秀一郎

    大橋　秀一郎

    更新日：2024-08-08 13:38

    ＊コメント＊

    表はレイアウトが複雑になると混乱しやすいので、tableタグを使って表を作るときは、まず手書きで表のレイアウトを描いてからコーディングするようにしています。お互い頑張りましょう！

    ＊コメント＊

  • 木下　さゆり

    木下　さゆり

    更新日：2024-08-08 16:48

    ＊コメント＊

    お疲れ様です。
    表をHTMLで作成するやり方を解説くださりありがとうございます！
    私もスクールで表を作る時にとても苦戦しました。。
    たくさん書いて、慣れていってくださいね！

    ＊コメント＊

  • 菅谷　将司

    菅谷　将司

    更新日：2024-08-12 13:06

    ＊コメント＊

    テーブル僕も苦戦しているので良い復習になりました！
    ありがとうございます！お互い頑張りましょう！

    ＊コメント＊

  • 渡邊　ひろみ

    渡邊　ひろみ

    更新日：2024-08-13 09:45

    ＊コメント＊

    学ばれた事をアウトプットするのは大切ですね。アウトプット時に、しっかりと頭に入っていく感じがします。
    テーブルのスタイリングも難しいですが、理想通りに出来た時は嬉しいですね。お互い鍛錬頑張りましょう。

    ＊コメント＊

＊コメント＊

＊ログイン＊

メールアドレス
パスワード
このメンバーの記事一覧へ 一覧へ戻る

NEW