HTML <th> タグ

JPKODA 編集部 May 6, 2026

<th> タグは HTML テーブルにおける基礎的な要素であり、ヘッダーセルに対して構造とセマンティック（Semantic）な意味を提供します。

<td> タグで定義される通常のデータセルとは異なり、<th> セルは列（カラム）または行（ロウ）の見出しを表すために特別に設計されています。これらは通常、太字で表示され、テーブル内のデータを説明するために使用されます。

<th> タグを正しく使用することで、テーブルのアクセシビリティ（Accessibility）と可読性が向上し、ユーザーと検索エンジンの両方にとって理解しやすいコンテンツになります。本章では、<th> タグの構文、属性、および効果的な使用のためのベストプラクティスについて深く掘り下げていきます。

1. `<th>` タグの理解

<th> タグは "Table Header"（テーブルヘッダー）の略称で、HTML テーブル内の見出しセルを定義するために使用されます。

これは <tr>（テーブル行）タグの内部で使用され、そのセルが普通のデータではなく見出し情報を含んでいることを示します。ブラウザは通常、<th> タグ内のテキストを太字かつ中央揃えでレンダリング（Rendering）しますが、これらのスタイルは CSS で上書きすることが可能です。

1.1 基本構文

<th> タグの基本構文は非常にシンプルです：

<table>
  <tr>
    <th>見出し 1</th>
    <th>見出し 2</th>
  </tr>
  <tr>
    <td>データ 1</td>
    <td>データ 2</td>
  </tr>
</table>

この例では、「見出し 1」と「見出し 2」がテーブルヘッダーとして定義され、「データ 1」と「データ 2」は通常のデータセルとなります。

1.2 暗黙的な関連付け

<th> 要素は、同一列内にあるすべてのデータセル（<td>）と暗黙的に関連付けられます。この関連付けは、スクリーンリーダーなどの補助技術（Assistive Technology）にとって極めて重要です。これらの技術は、この関係性を利用してテーブルを閲覧するユーザーにコンテキスト（Context）を提供します。

2. `<th>` タグの属性

<th> タグ自体は単純ですが、属性を追加することで、その挙動や外観をより詳細に制御できます。最も一般的に使用される属性には、scope、colspan、rowspan があります。

2.1 scope 属性（アクセシビリティの要）

scope 属性は、その見出しセルがどのセルのための情報であるかを指定します。これはアクセシビリティにおいて特に重要であり、スクリーンリーダーがテーブルの構造を理解するのを助けます。

scope 属性には以下の値を指定できます：

col: 見出しセルが、その列の残りの部分に対してヘッダー情報を提供します。
row: 見出しセルが、その行の残りの部分に対してヘッダー情報を提供します。
colgroup: 見出しセルが、列グループ全体に対して情報を提供します。
rowgroup: 見出しセルが、行グループ全体に対して情報を提供します。

scope="col" を使用した例：

<table>
  <tr>
    <th></th>
    <th scope="col">列 1</th>
    <th scope="col">列 2</th>
  </tr>
  <tr>
    <th scope="row">行 1</th>
    <td>データ 1</td>
    <td>データ 2</td>
  </tr>
  <tr>
    <th scope="row">行 2</th>
    <td>データ 3</td>
    <td>データ 4</td>
  </tr>
</table>

この例では、最初の行で scope="col" を使用し、「列 1」と「列 2」がそれぞれの列の見出しであることを示しています。続く行では scope="row" を使用し、「行 1」と「行 2」がそれぞれの行の見出しであることを示しています。

2.2 colspan 属性（列をまたぐ）

colspan 属性は、一つの見出しセルがまたがる列の数を指定します。複数の列にまたがる高度なヘッダーを作成する際に非常に便利です。

colspan の使用例：

<table>
  <tr>
    <th colspan="2">統合ヘッダー</th>
  </tr>
  <tr>
    <th>見出し 1</th>
    <th>見出し 2</th>
  </tr>
  <tr>
    <td>データ 1</td>
    <td>データ 2</td>
  </tr>
</table>

この例では、「統合ヘッダー」が 2 列分またがっており、「見出し 1」と「見出し 2」の上位ヘッダーとして機能しています。

2.3 rowspan 属性（行をまたぐ）

rowspan 属性は、一つの見出しセルがまたがる行の数を指定します。複数の行に適用される見出しを作成する際に役立ちます。

rowspan の使用例：

<table>
  <tr>
    <th rowspan="2">統合ヘッダー</th>
    <th>見出し 1</th>
  </tr>
  <tr>
    <th>見出し 2</th>
  </tr>
  <tr>
    <td>データ 1</td>
    <td>データ 2</td>
  </tr>
</table>

この例では、「統合ヘッダー」が 2 行分またがっており、「見出し 1」と「見出し 2」に共通する見出しとなっています。

3. `<th>` 使用のベストプラクティス

すべての見出しセルに <th> を使用する: 見出しを表す際は常に <th> タグを使用してください。通常の <td> セルをスタイルだけで見出しのように見せようとしないでください。これにより、正しいセマンティクスとアクセシビリティが保証されます。
scope 属性を活用する: 各見出しセルの範囲を明確に定義してください。これは、多段階のヘッダーを持つ複雑なテーブルにおいて特に重要です。
見出しは簡潔に: 見出しテキストは短く、かつ説明的にしてください。対応する列や行のデータに対する明確なラベルを提供することが目的です。
CSS でスタイリングする: ブラウザは <th> に対してデフォルトスタイル（太字、中央揃え）を提供しますが、テーブルの外観制御には CSS を使用するのがベストです。これにより、一貫性があり視覚的に魅力的なデザインを作成できます。
論理的なテーブル構造を構築する: 明確な見出しとデータを使用して、論理的かつ直感的な方法でテーブルを整理してください。これにより、ユーザーは提示された情報をより簡単に理解できるようになります。

4. 実戦的なサンプルとデモ

様々なシナリオでの <th> タグの使用例を見てみましょう。

4.1 例 1：列ヘッダーを持つシンプルなテーブル

製品情報を表示するシンプルなテーブルの例です。

<table>
  <tr>
    <th scope="col">製品</th>
    <th scope="col">価格</th>
    <th scope="col">数量</th>
  </tr>
  <tr>
    <td>ノートパソコン</td>
    <td>$1200</td>
    <td>10</td>
  </tr>
  <tr>
    <td>マウス</td>
    <td>$25</td>
    <td>50</td>
  </tr>
</table>

4.2 例 2：行ヘッダーを持つテーブル

学生の成績を表示する、行ヘッダーを含んだテーブルの例です。

<table>
  <tr>
    <th></th>
    <th scope="col">クイズ 1</th>
    <th scope="col">クイズ 2</th>
    <th scope="col">期末試験</th>
  </tr>
  <tr>
    <th scope="row">アリス</th>
    <td>90</td>
    <td>85</td>
    <td>95</td>
  </tr>
  <tr>
    <th scope="row">ボブ</th>
    <td>75</td>
    <td>80</td>
    <td>85</td>
  </tr>
</table>

4.3 例 3：結合ヘッダーを持つテーブル

colspan と rowspan 属性を使用した複雑なテーブルの例です。

<table>
  <tr>
    <th colspan="2">個人情報</th>
    <th colspan="2">連絡先</th>
  </tr>
  <tr>
    <th scope="col">名</th>
    <th scope="col">姓</th>
    <th scope="col">メール</th>
    <th scope="col">電話番号</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
    <td>555-1234</td>
  </tr>
</table>

1. <th> タグの理解