table系タグは2種類にグループ分けすると覚えやすい
(1)エリア系タグ...表自体のエリアごとの意味を表す
-
<table>
...「このエリアは表」 -
<thead>
...「このエリアは表の見出し」 -
<tfoot>
...「このエリアは表のフッター」 -
<tbody>
...「このエリアは表のメイン」 -
<tr>
...「ここからここまでが1行」(<th>
や<td>
を囲います)
(2)コンテンツ系タグ...表の中身を表す
-
<th>
...「これが見出しの文字」 -
<td>
...「これが見出し以外(データ等)の文字」
example
<table> <!-- 開始:表エリア -->
<thead> <!-- 開始:見出しエリア -->
<tr>
<th>見出しA</th> <!-- コンテンツ系タグ:見出し -->
<th>見出しB</th>
</tr>
</thead> <!-- 終了:見出しエリア -->
<tbody> <!-- 開始:メインエリア -->
<tr>
<td>AA</td> <!-- コンテンツ系タグ:見出し以外(データ等) -->
<td>BB</td>
</tr>
<tr> <!-- 開始:1行 -->
<td>AAA</td>
<td>BBB</td>
</tr> <!-- 終了:1行 -->
<tr>
<td>AaAa</td>
<td>BbBb</td>
</tr>
</tbody> <!-- 終了:メインエリア -->
</table> <!-- 終了:表エリア -->
この記事を作った経緯:
テーブルを作るとき、よく基本構造やそれぞれのタグの意味を忘れてしまうので自分なりの覚え方を考えました。その備忘録がこの記事です。