HTML / 要素

thead要素の使い方

thead要素は、表の列見出しなどを含む行をひとまとまりにします。表のどこが見出しの部分かを、HTMLの構造として表せます。

先に結論

表の列見出しをまとめるときは、行をtheadに入れます。見出しの文字が入るセルにはthを使います。

theadは行のまとまり、thは見出しセルです。別の役割なので、theadに入れただけで中のセルがすべて見出しになるわけではありません。

小さな例

<table>
  <caption>曜日ごとの営業時間</caption>
  <thead>
    <tr>
      <th scope="col">曜日</th>
      <th scope="col">営業時間</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">月曜日</th><td>9時〜17時</td></tr>
    <tr><th scope="row">火曜日</th><td>9時〜17時</td></tr>
  </tbody>
</table>

曜日ごとの営業時間
曜日	営業時間
月曜日	9時〜17時
火曜日	9時〜17時

この例では、theadが列見出しの行をまとめています。見出しセルのthにscope="col"を付け、各行の最初のセルにもth scope="row"を使っています。見出しとデータの関係は、セルごとに表します。

theadとthは何が違う？

theadは、表の見出し部分にある行をまとめます。
thは、行や列の見出しとして使うセルです。
tbodyは、表の本体にある行をまとめます。

thはtheadの中だけでなく、tbodyの中にも置けます。たとえば、表の各行の名前を見出しとして伝えるときは、tbody内のth scope="row"が使えます。

見出し行を省くとどうなる？

表に見出し行がなければ、theadを置かなくてもかまいません。また、tableのすぐ下にtrを書くこともできます。ただし、その行にthがあっても、ブラウザーは自動でtheadを作りません。HTMLを読み込むとき、通常はその行を含むtbodyを補います。

<table>
  <tr><th scope="col">曜日</th></tr>
</table>

// ブラウザーが作るDOMの親子関係
table → tbody → tr → th

あとからJavaScriptで行を探したり、表の構造を調べたりするときは、HTMLソースだけでなく、ブラウザーが作ったDOMも確認しましょう。

よくある間違い

theadを書けば見出しセルになると思う。セルの見出しにはthを使います。
見た目を太字にしただけで見出しの意味も伝わると思う。文字の見た目はCSS、セルの意味はHTMLで表します。
見出しがない表にも必ずtheadが必要だと思う。見出し行がある表で使います。