最終更新日 2021年4月7日

th要素

th要素は、見出し用のセルを作ります。個々のth要素内に含まれる内容が、各見出しセルのデータとなります。

colspan属性では、複数の列にまたがった結合セルを構成できます。1以上の整数で列数を指定します。またrowspan属性では、複数の行にまたがった結合セルを構成できます。0以上の整数での指定が可能です。

さらに、th要素では音声読み上げブラウザなどでの利用のために、scope属性を使って、見出し項目が適用されるセル範囲を指定できます。以下のキーワードが利用可能です。

row：見出し項目が、同じ行内の残りのセルにも適用される。
col：見出し項目が、同じ列内の残りのセルにも適用される。
rowgroup：見出し項目が、同じ行グループ内のすべてのセルに適用される。
colgroup：見出し項目が、同じ列グループ内のすべてのセルに適用される。
auto：見出し項目が、状況に応じ選択されたセル範囲に適用されるようにする。

scope属性の値が省略されている場合の既定値は「auto」です。

各セルに対応する見出し情報は、headers属性で含めることができます。対応するth要素に、あらかじめid属性を設定しておくことで、tr要素とth要素のheaders属性でそのID名を指定可能です。半角スペースで区切って、複数のID名を指定できます。

th要素の終了タグは、直後がtd要素またはth要素の場合、またはth要素が親要素内の最終コンテンツである場合に省略可能です。

HTML5での変更点

・align、background、bgcolor、char、charoff、height、nowrap、valign、width、abbr、axisの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
なし	終了タグのみ省略可能	tr	Phrasingコンテンツ

属性	値	説明
colspan	数値	列の数を整数で指定します。
rowspan	数値	行の数を整数で指定します。
headers	ID名	対応するth要素のid属性の値を指定します。
scope	row｜col｜rowgroup｜colgroup｜auto	見出しが適用されるセル範囲を、row、col、rowgroup、colgroup、autoのいずれかのキーワードで指定します。初期値は「auto」です。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <table>
    <caption>料金表</caption>
    <thead>
      <tr>
        <th id="product">商品名</th>
        <th id="charge">料金</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="product">ハンバーガー</td>
        <td headers="charge">100円</td>
      </tr>
      <tr>
        <td headers="product">チーズバーガー</td>
        <td headers="charge" rowspan="2">120円</td>
      </tr>
      <tr>
        <td headers="product">フィレオフィッシュ</td>
      </tr>
    </tbody>
  </table>
</body>

参考文献：W3C HTML5「4.9.10 The th element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。