HTML / 要素

th要素の使い方

th要素は、表の中で見出しとして使うセルです。見出しを見た目だけでなくHTMLの意味として示すことで、その見出しがどのデータに関係するかを伝えやすくなります。

先に結論

列や行の見出しにはth、値や説明などのデータにはtdを使います。文字を太字にするだけでは、見出しの意味は伝わりません。

見出しが列を説明するならscope="col"、行を説明するならscope="row"を指定します。

最小の例

<table>
  <caption>今週の営業時間</caption>
  <thead>
    <tr>
      <th scope="col">曜日</th>
      <th scope="col">営業時間</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">月曜日</th>
      <td>9:00〜18:00</td>
    </tr>
    <tr>
      <th scope="row">火曜日</th>
      <td>9:00〜18:00</td>
    </tr>
  </tbody>
</table>

今週の営業時間
曜日	営業時間
月曜日	9:00〜18:00
火曜日	9:00〜18:00

「曜日」と「営業時間」は列の見出しです。「月曜日」と「火曜日」は、それぞれの行の見出しです。tdに入れた時間は、その行と列の両方に関係するデータです。

scopeで見出しの向きを伝える

よく使うscopeの値
値	その見出しが説明する範囲	使う例
`col`	同じ列のデータ	「営業時間」「価格」など
`row`	同じ行のデータ	「月曜日」「商品A」など

1つの見出しが複数の列や行をまとめる表では、scope="colgroup"またはscope="rowgroup"を使える場合があります。これらは列や行のグループがある表向けです。まずは表を分かりやすい形にできないか考えましょう。

複雑な表では、見出しとの関係も確認する

見出しが何段もある表や、1つのデータに複数の見出しが関係する表では、見出しセルにidを付け、データセルのheadersで関係を指定できます。headersの値には、関係する見出しのIDを空白で区切って書きます。

<th id="product" scope="row">商品A</th>
<th id="spring" scope="col">春の価格</th>
<td headers="product spring">1,200円</td>

この方法は、正しく対応するIDを管理する必要があります。表の構造を簡単にできる場合は、見出しを整理したり、表を分けたりする方が読みやすいことがあります。

よくある間違い

データの値まで全部thにする。見出しではない値や説明にはtdを使います。
tdをCSSで太字にしただけで見出しにする。見た目とHTMLの意味は別です。
どのデータを説明する見出しか確認せず、すべての見出しに同じscopeを付ける。
複雑な表を無理に1つにまとめる。内容を分けると理解しやすくなる場合があります。

もう少し詳しく

ブラウザーや読み上げソフトは、セルを読んでいるときに関連する見出しを伝えることがあります。HTMLの構造を正しく作ることが、その情報を届ける出発点です。ただし、読み上げ方や表示方法は、ブラウザーや支援技術によって異なることがあります。