達成基準 1.3.1 の失敗例 － headers 属性及び id 属性によってテーブルの見出しとコンテンツが不正確に関連付けられている

例 1: ネストされた見出しと正しく関連付けられていないテーブルコンテンツ

この例では、ネストされた見出しが使われているが、コンテンツのセルは id 属性及び headers 属性によって正しく関連付けられていない。全セルは「Exams」(id="e") のようなトップレベル見出しを参照する - これは「Projects」見出しを参照すべき最後の三つのセルにとって正しくない。また、第 2 レベルの列見出しの参照はコンテンツ (1, 2, Final) が繰り返されるようなこちらの例と違いはなくても、誤って取り違えられる。

コード例:

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
     <td headers="h">15%</td>       
     <td headers="e p1">15%</td>  // should be "e e1"
     <td headers="e p2">15%</td>  // should be "e e2"
     <td headers="e pf">20%</td>  // should be "e ef"
     <td headers="e e1">10%</td>  // should be "p p1"
     <td headers="e e2">10%</td>  // should be "p p2"
     <td headers="e ef">15%</td>  // should be "p pf"
   </tr>
</table>
							

動作例 : Table incorrectly associating headers attributes in table content (td) to table headers (th).