th makes header cells in a table—it gives clear names to rows or columns so that both people and screen readers know, for example, 'this column is Sales and that one is Quantity'.
th要素は、テーブルのヘッダー・セル（table header cell）を表します。テーブルの見出しに相当するセルに th要素を使います。
テーブル（表）の基本的な構造は、<table>～</table> の中に <tr>～</tr> で表の横一行を定義して、 さらにその中に <th>～</th> や <td>～</td> でセルを定義します。
データ・セル（table data cell）を作成する場合には、<td>～</td> を使用します。
th要素のコンテンツ・モデルはフロー・コンテンツ（※ただし、見出し要素（h1〜h6）やセクション関連（section／article／header／footer）は不可）ですので、a要素、abbr要素、b要素、mark要素、ruby要素、strong要素などを入れることが可能です。しかし、td要素のように、フロー・コンテンツ（p要素など）を入れることはできませんので、注意してください。
th要素には、td要素と同様に、colspan属性、rowspan属性、headers属性が規定されています。これらの詳細については、td 要素をご覧ください。
scope属性は、th要素と、それがカバーするセルを結び付けるために使います。
headers属性も目的は同じですが、結び付ける方向が逆になります。headers属性は、結び付けられるセルの方から、そのヘッダー・セルを個別に指定します。それに対して、scope属性は、ヘッダー・セルの方から、それが結び付くセルの範囲を指定するものです。
また、scope属性は、所定のキーワードが規定された列挙属性です。このコンテンツ属性に指定できるキーワードと、その意味は、下記の通りです。
rowcolrowgroupcolgroupscope属性の rowキーワードと colキーワードは、該当のヘッダー・セルが、右に並んでいるセルのヘッダーなのか、下に並んでいるセルのヘッダーなのかを明示的に指定します。次の例をご覧ください。
HTML
<table>
<caption>男女別会員数推移</caption>
<thead>
<tr>
<th scope="col">年度</th>
<th scope="col">平成20年</th>
<th scope="col">平成21年</th>
<th scope="col">平成22年</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">男性</th>
<td>34人</td>
<td>65人</td>
<td>103人</td>
</tr>
<tr>
<th scope="row">女性</th>
<td>6人</td>
<td>25人</td>
<td>49人</td>
</tr>
</tbody>
</table>| 年度 | 平成20年 | 平成21年 | 平成22年 |
|---|---|---|---|
| 男性 | 34人 | 65人 | 103人 |
| 女性 | 6人 | 25人 | 49人 |
この例では、すべての th要素に scope属性を指定して、それが、どの方向にあるセルのヘッダーなのかを明示的に指定しています。
特に、左上の「年度」が入れられたヘッダー・セルは、どのセルのヘッダーなのか、目で見れば分かりますが、セマンティクス上は明確ではありません。テーブルの構造だけでは、「年度」のヘッダー・セルは、その下にある「男性」「女性」のヘッダー・セルなのかもしれません。言葉を解釈して、初めて、そうではないことが分かります。
しかし、scope属性に rowキーワードを指定することで、「平成20年」「平成21年」「平成22年」のヘッダー・セルであることが明確になります。もし、scope属性が指定されていなければ、スクリーン・リーダーなどの支援テクノロジーは、期待通りのセマンティクスとして解釈しないかもしれません。
rowgroupキーワードを指定すると、該当の th要素は、その th要素から見て下および右横、そして、右下に位置するセルすべてのヘッダー・セルとなります。
ただし、その範囲は、行グループ内に限られます。つまり、該当の th要素が入れられている tbody要素の中の範囲に限られます。
次の例をご覧ください。
HTML
<table>
<caption>取り扱い商品</caption>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">コード</th>
<th scope="col">商品名</th>
<th scope="col">単価（税別）</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<th scope="rowgroup">Eシリーズ</th>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>E1001</td>
<td>Enterprise タイプ1</td>
<td>10,500円</td>
</tr>
<tr>
<td>2</td>
<td>E1002</td>
<td>Enterprise タイプ2</td>
<td>21,000円</td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
<th scope="rowgroup">Pシリーズ</th>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>P1001</td>
<td>Personal タイプ1</td>
<td>5,250円</td>
</tr>
<tr>
<td>4</td>
<td>P1002</td>
<td>Personal タイプ2</td>
<td>10,500円</td>
</tr>
</tbody>
</table>| No. | コード | 商品名 | 単価（税別） |
|---|---|---|---|
| Eシリーズ | |||
| 1 | E1001 | Enterprise タイプ1 | 10,500円 |
| 2 | E1002 | Enterprise タイプ2 | 21,000円 |
| Pシリーズ | |||
| 3 | P1001 | Personal タイプ1 | 5,250円 |
| 4 | P1002 | Personal タイプ2 | 10,500円 |
この例は、商品の一覧を表したテーブルです。そして、商品のカテゴリーによって、2つの行ブロックに分けられています。それぞれの行ブロックの最初の行には、その商品カテゴリーの名前が入れられています。
その商品カテゴリー名を表す「Eシリーズ」と「Pシリーズ」は th要素でマークアップされ、scope属性に rowgroupキーワードがセットされています。
これによって、「Eシリーズ」というヘッダー・セルは、その右にある 2つの空白のセル、下にある「E1001」「E1002」セル、そして、右下にある 4つのセルと関連付けられることになります。
rowgroupキーワードによって対象となるセルは、同じ行グループに限定されますので、その範囲が「Pシリーズ」の領域までは及ばない点に注意してください。また、該当の th要素より左側にあるセルも対象外となります。つまり、ここでは、「 1 」と「 2 」というセルは対象外となります。
同様に、「Pシリーズ」というヘッダー・セルは、その右にある 2つの空白のセル、下にある「P1001」「P1002」セル、そして、右下にある 4つのセルと関連付けられます。
この例のように、イレギュラーな構造を持つテーブルでは、ヘッダー・セルが、どのデータ・セルと関連付けられるのかが分かりにくくなりますので、scope属性を使って、明確にするのが良いでしょう。
colgroupキーワードを指定すると、該当の th要素は、その th要素から見て下および右横、そして、右下に位置するセルすべてのヘッダー・セルとなります。ここまでは rowgroupキーワードと同じです。
ただし、その範囲は、列グループ内に限られます。つまり、colgroup要素で定義された列の範囲に限られます。
次の例をご覧ください。
HTML
<table>
<caption>取り扱い商品</caption>
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<th scope="colgroup">Eシリーズ</th>
<td></td>
<th scope="colgroup">Pシリーズ</th>
<td></td>
</tr>
<tr>
<th scope="row">コード</th>
<td>E1001</td>
<td>E1002</td>
<td>P1001</td>
<td>P1002</td>
</tr>
<tr>
<th scope="row">商品名</th>
<td>Enterprise タイプ1</td>
<td>Enterprise タイプ2</td>
<td>Personal タイプ1</td>
<td>Personal タイプ2</td>
</tr>
<tr>
<th scope="row">単価（税込）</th>
<td>10,500円</td>
<td>21,000円</td>
<td>5,250円</td>
<td>10,500円</td>
</tr>
</tbody>
</table>| No. | 1 | 2 | 3 | 4 |
|---|---|---|---|---|
| Eシリーズ | Pシリーズ | |||
| コード | E1001 | E1002 | P1001 | P1002 |
| 商品名 | Enterprise タイプ1 | Enterprise タイプ2 | Personal タイプ1 | Personal タイプ2 |
| 単価（税込） | 10,500円 | 21,000円 | 5,250円 | 10,500円 |
この例では、colgroup要素を使って、列を 3つのグループに分割しています。
2つ目の列グループにある「Eシリーズ」の th要素の scope属性に colgroupキーワードがセットされています。そのため、この th要素は、該当の列グループ内にある右と下と右下にある 7個のセルのヘッダー・セルとなります。
「Pシリーズ」の th要素も同様です。