【HTML Living Standard】th要素の使い方
th要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
thオブジェクトは、HTMLのテーブル（表）内で、ヘッダーセル、つまり見出しの役割を持つセルを表すオブジェクトです。ウェブページに表形式のデータを表示する際に、そのデータが何についてのものなのかを明確にするために使用されます。例えば、商品リストの「商品名」や「価格」といった列のタイトル、あるいは年ごとの売上データをまとめた表の「2023年」「2024年」といった行のカテゴリ名などを定義する際にこのth要素を利用します。
このオブジェクトを使う主なメリットは、テーブルのセマンティクス（意味構造）を向上させる点にあります。th要素によって、ウェブブラウザや検索エンジン、そして特にスクリーンリーダーなどの支援技術が、テーブルの各データセル（<td>要素）がどの見出しに関連しているかを正確に理解できるようになります。これにより、視覚に障がいのある方を含むすべてのユーザーがテーブルの内容を理解しやすくなり、ウェブコンテンツのアクセシビリティ（使いやすさ）が大きく向上します。
thオブジェクトは通常、<tr>（テーブルの行）要素の子要素として配置され、一つ以上の<td>（データセル）要素とともにテーブルの行を構成します。重要な属性としてscope属性があり、これはth要素が見出しとして適用される範囲が、属する行全体（row）なのか、列全体（col）なのか、あるいは行グループ（rowgroup）や列グループ（colgroup）なのかを明示的に指定するために使用されます。scope属性を適切に利用することで、複雑なテーブルでもその構造とデータの関連性を明確に保ち、誰もが情報にアクセスしやすいウェブページを構築できます。正しいテーブルの構造化とアクセシビリティの確保において、thオブジェクトは不可欠な存在です。
構文(syntax)
1<th>Header Content</th>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
テーブルヘッダー（th）要素のサンプル
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>テーブルヘッダー（th）要素のサンプル</title> 7</head> 8<body> 9 <!-- <table>要素は表全体を定義します。 --> 10 <table> 11 <!-- <thead>要素はテーブルのヘッダー部分（列のタイトルなど）をグループ化します。 --> 12 <thead> 13 <!-- <tr>要素はテーブルの行（row）を定義します。 --> 14 <tr> 15 <!-- <th>要素はテーブルのヘッダーセル（table header）を定義します。 --> 16 <!-- 通常、ブラウザは<th>の内容を太字で表示し、表の列または行のタイトルとして扱います。 --> 17 <th>商品名</th> 18 <th>価格</th> 19 <th>在庫数</th> 20 </tr> 21 </thead> 22 <!-- <tbody>要素はテーブルの本体部分（実際のデータ）をグループ化します。 --> 23 <tbody> 24 <tr> 25 <!-- <td>要素はテーブルのデータセル（table data）を定義します。 --> 26 <td>りんご</td> 27 <td>150円</td> 28 <td>100個</td> 29 </tr> 30 <tr> 31 <td>みかん</td> 32 <td>80円</td> 33 <td>200個</td> 34 </tr> 35 </tbody> 36 </table> 37</body> 38</html>
HTMLの<th>要素は、テーブル（表）のヘッダーセル（table header）を定義するために使用されます。これは、表の列や行のタイトルを示す際に用いられ、ブラウザによって通常、内容が太字で表示されます。
サンプルコードでは、まず<table>要素で表全体を定義し、その中に<thead>要素でテーブルのヘッダー部分をグループ化しています。この<thead>内に<tr>（テーブルの行）要素を配置し、その中に<th>要素として「商品名」「価格」「在庫数」といった見出しが設定されています。これにより、これらの項目がテーブルの各列が何を意味するのかを示すタイトルとして機能します。
一方、<tbody>要素内には<td>（table data）要素が使用されており、こちらは表の実際のデータセルを定義します。<th>が「見出し」を、<td>が「具体的なデータ」を表すという点で役割が明確に分かれています。
HTMLの要素は、文書の構造を定義するマークアップ言語であるため、一般的なプログラミング言語のような「引数」や「戻り値」の概念は持ちません。要素は属性を持つことがありますが、<th>要素自体には必須の引数や特定の戻り値はありません。
この<th>要素を適切に利用することで、視覚的に分かりやすく、かつ意味論的にも正しいテーブルを作成することができます。
<th>要素はテーブルの項目名を定義する、非常に重要な役割を持つ要素です。主に<thead>要素内に<tr>要素と組み合わせて配置し、表のヘッダー部分を明確にグループ化することで、コードの可読性を高めます。一般的なデータを示す<td>要素とは異なり、<th>は列や行のタイトルであることをセマンティックに示します。この違いは、ブラウザでの表示（通常太字になります）だけでなく、スクリーンリーダーなどの支援技術にとっても表の構造を正確に理解するために不可欠です。誤って<td>の代わりに<th>を使用したり、その逆を行ったりすると、表の構造が正しく伝わらず、アクセシビリティの問題につながる可能性があります。表のデータ内容を適切に表現し、利用者に情報を正確に伝えるために、<th>と<td>の目的と役割を理解して適切に使い分けましょう。
HTMLテーブルでthとtdを使い分ける
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>HTML th と td のサンプル</title> 7 <style> 8 /* 見やすくするための簡単なスタイル */ 9 table, th, td { 10 border: 1px solid black; 11 border-collapse: collapse; 12 padding: 8px; 13 text-align: left; 14 } 15 th { 16 background-color: #f2f2f2; 17 } 18 </style> 19</head> 20<body> 21 22 <h1>商品リスト</h1> 23 24 <table> 25 <thead> 26 <tr> 27 <!-- th はテーブルのヘッダーセルを表します。通常、列のタイトルになります。 --> 28 <th>商品名</th> 29 <th>価格</th> 30 <th>在庫数</th> 31 </tr> 32 </thead> 33 <tbody> 34 <tr> 35 <!-- td はテーブルのデータセルを表します。 --> 36 <td>リンゴ</td> 37 <td>150円</td> 38 <td>100個</td> 39 </tr> 40 <tr> 41 <td>バナナ</td> 42 <td>120円</td> 43 <td>80個</td> 44 </tr> 45 <tr> 46 <td>みかん</td> 47 <td>100円</td> 48 <td>120個</td> 49 </tr> 50 </tbody> 51 </table> 52 53</body> 54</html>
HTMLの<th>要素は、ウェブページで表（テーブル）を作成する際に、そのテーブルの「ヘッダーセル」を定義するために使用されます。ヘッダーセルとは、列や行の内容を示す見出しやカテゴリ名を表す部分で、テーブルの情報を分かりやすく整理する役割があります。例えば、商品リストのテーブルであれば、「商品名」「価格」「在庫数」といった項目名が<th>要素で表現されます。
これに対し、<td>要素は「データセル」を定義し、テーブル内の具体的なデータや情報を表示します。<th>がテーブルの項目名を示すのに対し、<td>はその項目に属する実際の値、例えば「リンゴ」「150円」「100個」といった具体的なデータを格納します。<th>と<td>は、それぞれ見出しとデータという異なる役割を持つことで、テーブルの構造を明確にします。
サンプルコードでは、<table>タグの中に<thead>（テーブルのヘッダー部）が定義され、その中の<tr>（テーブルの行）に「商品名」「価格」「在庫数」という<th>要素が配置されています。これにより、各列がどのような種類の情報を持つかを示しています。続く<tbody>（テーブルの本体部）内の各<tr>には、それぞれの<th>に対応する具体的なデータが<td>として記述されています。
<th>要素は、特定の引数を受け取ったり、値を返したりするようなプログラミング言語の関数とは異なり、HTMLの要素としてコンテンツを囲み、ウェブブラウザによる表示の際に意味付けと標準的なスタイリング（例えば太字表示）が行われます。この要素を適切に使うことで、テーブルの構造が理解しやすくなり、アクセシビリティも向上します。
このサンプルコードでは、thがテーブルの列見出し、tdが具体的なデータセルとして使われています。初心者が間違いやすい点として、thとtdを単なる見た目の違いで使い分けてしまうことが挙げられます。最も重要なのは、thがデータのカテゴリや説明を示す「ヘッダー」であるのに対し、tdは個別の「データ」そのものを表すという、意味的な役割の違いです。thはthead内で列ヘッダーとして使われることが多いですが、tbody内で特定の行のヘッダーとしても利用可能です。これらを正しく使い分けることで、スクリーンリーダーなどの補助技術を利用する方々へのアクセシビリティが向上し、検索エンジンにもテーブルの内容が正確に伝わりやすくなります。HTMLでは意味構造を正確に記述し、見た目の装飾はCSSで制御することが、安全でメンテナンスしやすいコードを書く上での重要な補足点です。