表形式（テーブル）

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 19:56
＊コメント＊

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

お疲れ様です。私もテーブルのカスタマイズでよく苦戦します。。お互いがんばりましょう！
お疲れ様です。
私もテーブルのカスタマイズでよく苦戦します。。
お互いがんばりましょう！
＊コメント＊
ZAW MIN OO
更新日：2024-08-08 10:13
＊コメント＊

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