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

テーブルの基本的なマークアップ

関連記事