th 要素

4.9.10 th 要素

カテゴリー:
なし
この要素を使うことができるコンテキスト:
tr 要素の子として。
コンテントモデル:
フロー・コンテント。ただし、header, footer, セクショニング・コンテント, ヘッディング・コンテントを子孫に入れることはできません。
コンテント属性:
グローバル属性
colspan - セルの範囲が及ぶ列の数
rowspan - セルの範囲が及ぶ行の数
headers - このセルに対するヘッダー
scope - 見出しセルが対象とするセルを指定する
abbr - 他のコンテキストにあるセルを参照するときに見出しセルに使う代替ラベル
sorted - 列ソートの方向と順序性
text/html におけるタグの省略:
th 要素の終了タグは、th 要素の直後に td または th 要素が来る、または、親要素に他にコンテンツがないなら、省略することができます。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLTableHeaderCellElement : HTMLTableCellElement {
           attribute DOMString scope;
           attribute DOMString abbr;
};

th 要素は、テーブルの中の見出しセル表します。

th 要素には、scope コンテント属性を指定することができます。scope 属性は、5 つの状態をもち、うち 4 つは明示的なキーワードを持った列挙属性です:

row キーワード:row 状態に相当します
row 状態とは、その見出しセルが同じ行の後続のいくつかのセルを対象とすることを表します。
col キーワード: column 状態に相当します
column 状態とは、その見出しセルが同じ列の後続のいくつかのセルを対象とすることを表します。
rowgroup キーワード:row group 状態に相当します
row group state 状態とは、その見出しセルが、その行グループの残りのセルすべてを対象とすることを表します。th 要素の scope 属性は、その要素が行グループに固定されていないなら、row group 状態となってはいけません。
colgroup キーワード:column group 状態に相当します
column group 状態とは、その見出しセルが、その行グループの残りのセルすべてを対象とすることを表します。th 要素の scope 属性は、その要素が列グループに固定されていないなら、column group 状態となってはいけません。
auto 状態
auto 状態は、その見出しセルが文脈に基づいて選ばれたセルのセットを対象とするようにします。

scope 属性が指定されなかった場合のデフォルトは、auto 状態となります。

th 要素には abbr コンテント属性を指定することができます。その値は、見出しセルに対する代替のラベルでなければならず、他のコンテキストでセルを参照する際に使われます(たとえば、データセルに適用する見出しセルを説明する際)。これは、通常、見出しセルの短縮形となりますが、正式名称だったり、単に異なる表現に過ぎないこともあります。

th 要素と、その colspan, rowspan, headers, scope 属性は、テーブルモデルに属します。

scope IDL 属性は、同じ名前のコンテント属性を反映しなければいけません。ただし、既知の値のみに限定されます。

次の例は、scope 属性の rowgroup の値が、見出しセルがどのデータセルを対象にするのかについて、どう影響を与えるのかを示したものです。

これは、テーブルを表示するマークアップです:

この例の tbody 要素は、行グループの範囲を特定しています。

<table>
   <caption>Measurement of legs and tails in Cats and English speakers</caption>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
 </tbody>
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
 </tbody>
  </table>

これは、次のテーブルになるでしょう:

Measurement of legs and tails in Cats and English speakers
ID Measurement Average Maximum
Cats
93 Legs 3.5 4
10 Tails 1 1
English speakers
32 Legs 2.67 4
35 Tails 0.33 1

行 1 にある見出しセル ('ID', 'Measurement', 'Average' and 'Maximum') はそれぞれ、それらの列のセルだけを対象とします。

scope=rowgroup を持つ見出しセル ('Cats' と 'English speakers') は、列 1 にあるセル (左側) ではなくて、その行グループにあるすべてのセルを対象とします:

見出しセル 'Cats' (行 2, 列 2) は、見出し 'Legs' (行 3, 列 2) と 'Tails' (行 4, 列 2)、そして、'Average' と 'Maximum' の列の行 2, 3, 4 にあるデータセルを対象とします。

見出しセル 'English speakers' (行 5, 列 2) は、見出し 'Legs' (行 6, 列 2) と 'Tails' (行 7, 列 2)、そして、'Average' と 'Maximum' の列の行 5, 6, 7 にあるデータセルを対象とします。

'Legs' と 'Tails' の見出しセルそれぞれは scope=row を持つため、その行にあるデータセル (右側) を対象とします。つまり 'Average' と 'Maximum' 列に相当するデータセルです。

Representation of the example 
   table overlayed with arrows indicating which cells each header applies to.

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html#the-th-element