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>