HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<thead>
テーブルヘッダー（Table Head）要素。表（テーブル）のヘッダー行グループを定義します。
info
概要
<thead> 要素は、HTMLの <table> 要素内で、列見出し（ヘッダー）を含む行のグループを定義します。これにより、テーブルの構造が論理的に分割され、アクセシビリティ（特にスクリーンリーダー）や印刷時のヘッダー繰り返しに役立ちます。
<table> 内では <caption> の後、<tbody> や <tfoot> の前に配置するのが一般的です。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田</td>
<td>30</td>
</tr>
</tbody>
</table>
Preview (Result)
| 名前 | 年齢 |
|---|---|
| 山田 | 30 |
list
属性 (Attributes)
<thead> 要素固有の属性はありません。すべてのグローバル属性（id, class, styleなど）をサポートします。
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素に共通する属性（class, id, lang, styleなど）。 |
code
実用例
1. 基本的なテーブル構造
<table>
<caption>社員リスト</caption>
<thead>
<tr>
<th>氏名</th>
<th>部署</th>
<th>入社年</th>
</tr>
</thead>
<tbody>
<tr>
<td>田中</td>
<td>営業</td>
<td>2020</td>
</tr>
<tr>
<td>佐藤</td>
<td>開発</td>
<td>2023</td>
</tr>
</tbody>
</table>
2. <tfoot> と組み合わせた例
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tfoot>
<!-- tfootはtheadの直後、tbodyの前にも記述可能だが、レンダリング順は最後になる -->
<tr>
<th>合計</th>
<td>5,000円</td>
</tr>
</tfoot>
<tbody>
<tr>...</tr>
</tbody>
</table>
lightbulb
知っておくべき重要事項
table
テーブル構造の順序
<table> 要素内では、一般的に <caption>, <colgroup> の後に <thead>, <tfoot>, <tbody> の順序で配置されます。この構造は、特に大きなデータテーブルにおいて、ブラウザがヘッダーとフッターを先にレンダリングすることを可能にします。
accessibility_new
アクセシビリティ
<thead> 内には、必ず <th> （テーブルヘッダーセル）を含めるべきです。これにより、スクリーンリーダーや他の支援技術がテーブルの構造を正しく解釈し、各データセル（<td>）がどの列の見出しに対応しているかをユーザーに伝えることができます。