HTML & CSS - テーブルの基本的なマークアップ
テーブルの基本的なマークアップ
テーブルの基本的なマークアップは、table / caption
要素、thead / tbody / tfoot
要素、tr / th / td
要素など、複数の要素を使って組み立てます。
table
table
要素は、表の全体を表す要素です。表関連の各種要素はすべてこの要素の中に配置します。表内部のマークアップは、各セルをth
要素 (見出しセル)、td
要素 (データセル)で表し、それらを一行ごとにtr
要素でグループ化します。caption
caption
要素は、表のタイトルを表す要素です。タイトルのテキストには、表の内容 (セル同士の関係など) が理解しやすくなるような説明を含めるべきです。thead
thead
要素は、表のヘッダーとなっている横列をグループ化する要素です。要素内容として「th
要素で構成されるtr
要素」のみを含みますが、表によってはtd
要素を含む場合もあります。例えば、見出しセルの内容を補足する情報を格納するためにth
要素の下のtd
要素も使用している場合などです。tbody
tbody
要素は、表の本体 (ヘッダーやフッターでない部分) となっている横列をグループ化する要素です。tfoot
tfoot
要素は、表のフッター (合計などを表す部分) となっている横列をグループ化する要素です。tr
tr
要素は、表内の横一列分のセルを含む列を表す要素です。th
th
要素は、表内のひとつの見出しセルを表す要素です。セルの内容として「見出し」ではなく「データ」を入れる場合にはtd
要素を使用します。td
td
要素は、表内のひとつのデータセルを表す要素です。セルの内容として「データ」ではなく「見出し」を入れる場合にはth
要素を使用します。
<table>
<caption> 表のタイトル </caption>
<thead>
<tr>
<th> 見出しセル </th>
</tr>
</thead>
<tbody>
<tr>
<td> データセル </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> フッターセル </td>
</tr>
</tfoot>
</table>
テーブルの基本的なマークアップ - HTML