HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<th>
テーブルヘッダーセル（Table Header Cell）要素。テーブルの列または行のヘッダーを定義します。
info
概要
<th> 要素は、HTMLテーブル内で**ヘッダーセル**を定義するために使用されます。通常のデータセル（<td>）とは異なり、この要素はテーブル内のデータセルに対して見出しの情報を提供し、**既定で太字・中央揃え**で表示されます。
特にスクリーンリーダーなどの支援技術に対し、テーブル構造を正確に伝えるために非常に重要な要素です。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<tr>
<th scope="col">名前</th>
<th scope="col">年齢</th>
</tr>
<tr>
<td>山田太郎</td>
<td>30</td>
</tr>
</table>
Preview (Result)
| 名前 | 年齢 |
|---|---|
| 山田太郎 | 30 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| scope | 見出しセルがどのセルに対して適用されるかを指定します。col: 列の全セルrow: 行の全セルcolgroup: 列グループの全セル (非推奨)rowgroup: 行グループの全セル (非推奨)（ col または row の指定が最も一般的で重要です）
|
| abbr | 見出しの短縮形を提供します。スクリーンリーダーがセルを読み上げる際に長い見出しの代わりに短い略称を読み上げるために使用されます。 |
| colspan | 見出しセルがまたがる列数（横結合）を指定します。デフォルトは 1 です。 |
| rowspan | 見出しセルがまたがる行数（縦結合）を指定します。デフォルトは 1 です。 |
| headers | 対応するデータセル（<td>）がこの見出しセルを関連付けるために使用するIDを指定します。複雑なテーブルで利用されます。 |
code
実用例
1. 行見出しと列見出し（scopeの使用）
<table>
<tr>
<th></span></th> <!-- 左上の空セル -->
<th scope="col">製品A</th>
<th scope="col">製品B</th>
</tr>
<tr>
<th scope="row">価格</th>
<td>1000円</td>
<td>1500円</td>
</tr>
</table>
2. セルの結合（colspanとrowspan）
<table>
<tr>
<th colspan="2">基本情報</th> <!-- 2列結合 -->
</tr>
<tr>
<th rowspan="2" scope="row">連絡先</th> <!-- 2行結合 -->
<td>電話</td>
</tr>
<tr>
<td>メール</td>
</tr>
</table>
lightbulb
知っておくべき重要事項
accessibility_new
アクセシビリティ (scopeの重要性)
テーブルのアクセシビリティを確保するため、**必ず
テーブルのアクセシビリティを確保するため、**必ず
scope 属性** を使用してください。これにより、スクリーンリーダーが各データセル（<td>）がどの見出し（<th>）と関連しているかを正確に判断し、視覚障害を持つユーザーに意味のある形で情報を伝達できます。単純なテーブルでは <thead> 内に配置された <th> は自動的に列見出しと見なされることがありますが、明示的な scope="col" や scope="row" の指定が最も堅牢です。
compare_arrows
<th> と <td> の使い分け
<th> はテーブルの行または列を説明する**見出し情報**にのみ使用し、実際のデータ（値）には <td>（テーブルデータセル）を使用します。意味的に間違った使用は、特にアクセシビリティの面で問題を引き起こします。