HTML 及び XHTML
これは、次の達成基準に関連する実装方法である:
この実装方法の目的は、(データテーブル内の)各データセルを適切な見出しセルと関連付けることである。まず、各データセル(td
要素)にheaders
属性を付加する。次に、データセルの見出しとなるセルにはid
属性を指定する。データセルのheaders
属性で指定するのは、関連付けられる見出しセルのid
属性値であり、2つ以上のid
を含める場合はスペース区切りで列挙する。
この実装方法は、データセルを2つ以上の行見出し及び(又は)列見出しに関連付ける場合に利用する。こうすることで、th
要素のみ、またはth
要素にscope
属性を付けただけでは、データセルと見出しセルの関係が複雑すぎて定義できない場合でも、スクリーンリーダーは各データセルと関連付けられている見出しセルを読み上げることができる。また、表現形式が変わったとしても、これらの複雑な関係を知覚しやすくなる。
この実装方法を、レイアウトテーブルに利用することは推奨しない。なぜなら、レイアウトのためにテーブルを利用する際には、意味がないにも関らず何らかの関係性を示してしまうことになるからである。
コード例:
<table>
<tr>
<th rowspan="2" id="h">予習</th>
<th colspan="3" id="e">試験</th>
<th colspan="3" id="p">課題</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">最終</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">最終</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 header information with data cells
レイアウトテーブルかどうかを確認、テーブルのセルの内容が同じ行や列に含まれる他セルの内容と関係があるかどうか判断する。「いいえ」の場合、そのテーブルはレイアウトテーブルである。「はい」の場合、そのテーブルはデータテーブルである。
データテーブルである場合、2つ以上の行見出し及び(又は)列見出しと関連付けられているあらゆるデータセルのheaders
属性に、関連付けられている全ての見出しセルのid
を指定している。
データテーブルでは、id
属性またはheaders
属性を指定しているあらゆるセルについて:
データセルのheaders
属性で指定した各id
が、見出しセルのid
属性値と一致している。
データセルのheaders
属性で、そのデータセルと関連付けられた全ての見出しのid
属性値を指定している。
全てのid
が一意的であり、重複して使用していない(つまり、ページの中で2つ以上の要素が同じid
を持つことはできない)。
レイアウトテーブルの場合、どのセルにもheaders
属性又はid
属性がない。
データテーブルで、id
属性を指定した全てのセルについて、3.a、3.b、3.cを満たしている。
データテーブルで、2つ以上の行見出し及び(又は)列見出しと関連付けられた全てのデータセルについて、2.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。