【HTML Living Standard】thead要素の使い方
thead要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
theadオブジェクトは、HTMLの<table>要素内で、テーブルのヘッダー部分を定義するために使用されるオブジェクトです。このオブジェクトを用いることで、テーブルの構造をセマンティックに明確化し、データの意味合いをより正確に伝えることができます。具体的には、テーブルの列の見出しやタイトル行をまとめ、データの本体である<tbody>やフッター部分である<tfoot>とは区別します。これにより、テーブルのコンテンツを論理的に分割し、ウェブブラウザやスクリーンリーダーなどのユーザーエージェントが、テーブルの構造を理解しやすくなります。
<thead>は、<table>要素の直下に配置され、<caption>要素や<colgroup>要素の後に記述する必要があります。また、<tbody>要素や<tfoot>要素よりも前に記述することが一般的です。<thead>オブジェクトの内部には、一つ以上の<tr>（テーブル行）要素を含めることができ、その<tr>要素内には<th>（テーブルヘッダーセル）要素を配置して、各列のヘッダー情報を提供します。
このオブジェクトを使用する主な利点としては、まずスタイリングの容易さが挙げられます。CSSを使ってテーブルのヘッダー部分全体に統一的なスタイルを適用できるため、見た目の一貫性を保ちやすくなります。また、印刷時にテーブルが複数ページにわたる場合でも、<thead>に定義されたヘッダー行を各ページの上部に自動的に繰り返し表示させるといった機能がブラウザによって提供されることがあります。さらに、大量のデータを持つテーブルにおいて、スクロールしてもヘッダー部分を固定表示させるなど、ユーザーエクスペリエンスを向上させる動的な機能の実装にも利用されます。一つの<table>要素につき、<thead>オブジェクトは原則として一つだけ配置することができます。
構文(syntax)
1<table> 2 <thead> 3 <tr> 4 <th>ヘッダーカラム1</th> 5 <th>ヘッダーカラム2</th> 6 </tr> 7 </thead> 8</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML thead要素でテーブルヘッダーを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>thead要素のサンプル</title> 7 <style> 8 /* スタイルはtheadの動作には必須ではありませんが、表を見やすくするために追加 */ 9 table { 10 width: 100%; 11 border-collapse: collapse; 12 margin-top: 20px; 13 } 14 th, td { 15 border: 1px solid #ddd; 16 padding: 8px; 17 text-align: left; 18 } 19 th { 20 background-color: #f2f2f2; 21 } 22 </style> 23</head> 24<body> 25 <h1>商品リスト</h1> 26 <!-- thead要素は、HTMLのテーブル(表)のヘッダー部分をグループ化します。 --> 27 <!-- これにより、テーブルの構造が明確になり、アクセシビリティやスタイリングの際に役立ちます。 --> 28 <table> 29 <!-- thead: テーブルのヘッダー部分 --> 30 <thead> 31 <tr> 32 <th>商品名</th> 33 <th>価格</th> 34 <th>在庫数</th> 35 </tr> 36 </thead> 37 <!-- tbody: テーブルの本体部分 (theadと組み合わせて使用することが一般的) --> 38 <tbody> 39 <tr> 40 <td>りんご</td> 41 <td>150円</td> 42 <td>100</td> 43 </tr> 44 <tr> 45 <td>みかん</td> 46 <td>100円</td> 47 <td>50</td> 48 </tr> 49 <tr> 50 <td>バナナ</td> 51 <td>200円</td> 52 <td>75</td> 53 </tr> 54 </tbody> 55 </table> 56</body> 57</html>
HTMLのthead要素は、ウェブページで情報を整理するための「表（テーブル）」において、表のヘッダー（見出し）部分を定義し、グループ化するための要素です。この要素を使うことで、表のどの部分がデータ本体で、どの部分がそのデータを説明するヘッダーであるかを明確に区別できます。
例えば、商品リストの表を作る際に「商品名」「価格」「在庫数」といった項目名を、thead要素の中に配置します。これにより、表全体の構造がより論理的になり、見た目だけでなく、プログラムや支援技術（スクリーンリーダーなど）が表の内容を理解しやすくなります。表のヘッダー部分だけに特定のスタイル（背景色や文字の太さなど）を適用したり、ページをスクロールしてもヘッダーが固定表示されるようにする際にも、thead要素は非常に役立ちます。
サンプルコードでは、<table>要素の中に<thead>を配置し、その中に<tr>（テーブルの行）と<th>（テーブルのヘッダーセル）を使って「商品名」「価格」「在庫数」という見出しを作成しています。さらに、表の本体部分を<tbody>要素で囲むことで、ヘッダーとデータの構造がはっきりと分かれ、保守性やアクセシビリティが向上します。
thead要素は、特定の引数を受け取ったり、処理結果を返すための戻り値を持ったりする要素ではありません。あくまでHTMLの構造を定義するための一部分として機能します。
<thead>要素は、HTMLのテーブル（表）のヘッダー部分をグループ化するために使用します。この要素は必ず<table>要素の直接の子要素として記述し、<tbody>要素や<tfoot>要素より先に配置する必要があります。
<thead>の中には、ヘッダー行を表す<tr>要素を一つ以上配置し、その<tr>要素の中には、各列の見出しとなる<th>要素を含めるのが一般的です。<th>の代わりに<td>を使用することも可能ですが、意味的には<th>が適切です。
テーブル内に<thead>は一つだけ配置でき、これによってテーブルの構造が明確になり、スクリーンリーダーなどによるアクセシビリティの向上や、CSSでのスタイル適用が容易になります。<thead>がない場合でもブラウザはテーブルを表示しますが、意味的な構造を正しく伝えるために使用を推奨します。
HTML theadタグでテーブルの見出しを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>theadタグのサンプル</title> 7</head> 8<body> 9 10 <!-- theadタグは、テーブルのヘッダー（見出し）部分を定義します。 --> 11 <!-- ここにテーブルの各列の項目名（例: 商品ID、商品名）を<th>タグで記述します。 --> 12 <table> 13 <thead> 14 <tr> 15 <th>商品ID</th> 16 <th>商品名</th> 17 <th>価格</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>001</td> 23 <td>りんご</td> 24 <td>150円</td> 25 </tr> 26 <tr> 27 <td>002</td> 28 <td>みかん</td> 29 <td>100円</td> 30 </tr> 31 <tr> 32 <td>003</td> 33 <td>バナナ</td> 34 <td>200円</td> 35 </tr> 36 </tbody> 37 </table> 38 39</body> 40</html>
<thead>タグは、HTMLのテーブル（表）において、そのヘッダー（見出し）部分を定義し、グループ化するために使用される要素です。このタグは、テーブルのデータ本体である<tbody>（テーブルボディ）と区別し、表の構造を明確にする役割を担います。
サンプルコードでは、<table>タグの中に配置され、各列の項目名（例：「商品ID」「商品名」「価格」）が格納されています。<thead>の内部には、通常、テーブルの行を示す<tr>（テーブルロー）タグが一つ以上含まれ、その<tr>タグの中に、各見出しセルを示す<th>（テーブルヘッダー）タグが配置されます。<th>タグで囲まれた内容は、その列や行の表題であることを示します。
<thead>タグ自体には、特定の引数を指定する機能はありません。また、何らかの値を計算して返すといった戻り値もありません。これは、HTMLがプログラミング言語のように処理を実行するのではなく、ウェブページの構造や内容を定義するためのマークアップ言語であるためです。<thead>の役割は、テーブルの見出し部分を意味的にグループ化し、ブラウザや検索エンジン、スクリーンリーダーなどの支援技術がテーブルの内容をより正確に理解し、ユーザーに適切に伝える手助けをすることにあります。これにより、テーブルの可読性やアクセシビリティが向上します。
<thead>タグは、テーブルのヘッダー（見出し）部分を定義するために、必ず<table>タグの直下に記述します。このタグの中には、テーブルの行を示す<tr>要素を含め、その中に各列の見出しを表す<th>タグを使用してください。データ本体のセルを示す<td>タグは、<thead>内では使用しません。テーブルの本体を表す<tbody>要素やフッターを表す<tfoot>要素と組み合わせて使うことで、テーブルの構造がより明確になり、ウェブアクセシビリティや検索エンジン最適化（SEO）に貢献します。一般的には<tbody>より先に配置することが推奨されており、意味的なHTML構造を保つことが大切です。