HyperText Markup Language th element.
th要素は、テーブルのヘッダー・セル（table header cell）を表します。テーブルの見出しに相当するセルに th要素を使います。
テーブル（表）の基本的な構造は、<table>～</table> の中に <tr>～</tr> で表の横一行を定義して、 さらにその中に <th>～</th> や <td>～</td> でセルを定義します。
データ・セル（table data cell）を作成する場合には、<td>～</td> を使用します。
th要素のコンテンツ・モデルはフレージング・コンテンツですので、a要素、abbr要素、b要素、mark要素、ruby要素、strong要素などを入れることが可能です。しかし、td要素のように、フロー・コンテンツ（p要素など）を入れることはできませんので、注意してください。
th要素には、td要素と同様に、colspan属性、rowspan属性、headers属性が規定されています。これらの詳細については、td 要素をご覧ください。
th要素は、HTML5では abbr属性・align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・valign属性・width属性が廃止されています。
セルの幅・高さを指定するには CSS の widthプロパティや heightプロパティを、セル内の揃え位置を指定するには CSS の text-alignプロパティや vertical-alignプロパティを、セル内での改行を禁止するには CSS の white-spaceプロパティを、それぞれ使用してください。
scope属性は、th要素と、それがカバーするセルを結び付けるために使います。
headers属性も目的は同じですが、結び付ける方向が逆になります。headers属性は、結び付けられるセルの方から、そのヘッダー・セルを個別に指定します。それに対して、scope属性は、ヘッダー・セルの方から、それが結び付くセルの範囲を指定するものです。
また、scope属性は、所定のキーワードが規定された列挙属性です。このコンテンツ属性に指定できるキーワードと、その意味は、下記の通りです。
scope属性の rowキーワードと colキーワードは、該当のヘッダー・セルが、右に並んでいるセルのヘッダーなのか、下に並んでいるセルのヘッダーなのかを明示的に指定します。次の例をご覧ください。
rowキーワードと colキーワードのマークアップ例
<table>
<caption>男女別会員数推移</caption>
<thead>
<tr>
<th scope="row">年度</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>
row キーワードと col キーワードのマークアップ例のサンプル
| 年度 | 平成20年 | 平成21年 | 平成22年 |
|---|---|---|---|
| 男性 | 34人 | 65人 | 103人 |
| 女性 | 6人 | 25人 | 49人 |
この例では、すべての th要素に scope属性を指定して、それが、どの方向にあるセルのヘッダーなのかを明示的に指定しています。
特に、左上の「年度」が入れられたヘッダー・セルは、どのセルのヘッダーなのか、目で見れば分かりますが、セマンティクス上は明確ではありません。テーブルの構造だけでは、「年度」のヘッダー・セルは、その下にある「男性」「女性」のヘッダー・セルなのかもしれません。言葉を解釈して、初めて、そうではないことが分かります。
しかし、scope属性に row キーワードを指定することで、「平成20年」「平成21年」「平成22年」のヘッダー・セルであることが明確になります。もし、scope コンテンツ属性が指定されていなければ、スクリーン・リーダーなどの支援テクノロジーは、期待通りのセマンティクスとして解釈しないかもしれません。
rowgroupキーワードを指定すると、該当の th要素は、その th要素から見て下および右横、そして、右下に位置するセルすべてのヘッダー・セルとなります。
ただし、その範囲は、行グループ内に限られます。つまり、該当の th要素が入れられている tbody要素の中の範囲に限られます。
次の例をご覧ください。
rowgroup キーワードのマークアップ例
<table>
<caption>取り扱い商品</caption>
<thead>
<tr>
<th>No.</th>
<th>コード</th>
<th>商品名</th>
<th>単価（税別）</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>
rowgroup キーワードのマークアップ例のサンプル
| 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要素で定義された列の範囲に限られます。
次の例をご覧ください。
colgroup キーワードのマークアップ例
<table>
<caption>取り扱い商品</caption>
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="row">No.</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>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>
colgroup キーワードのマークアップ例のサンプル
| 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要素も同様です。
th {
display: table-cell;
padding: 1px;
vertical-align: inherit;
text-align: center;
font-weight: bold;
border-color: gray;
}