Associate Headers with Cells with headers Attribute
Description
The td and th elements define
the headers attribute, which can be used to make tables easier to process
with screen readers and other assistive technology.
The value of the headers attribute is the ID attribute value of one or more th cells.
Example
The following code shows how you can use this attribute.
<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {<!-- ww w. ja v a2 s. c om-->
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
thead [colspan], tfoot [colspan] {
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="rank">Rank</th>
<th id="name">Name</th>
<th id="color">Color</th>
<th id="sizeAndVotes" colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th id="first" headers="rank">Favorite:</th>
<td headers="name first">XML</td>
<td headers="color first">HTML</td>
<td headers="sizeAndVote first">CSS</td>
<td headers="sizeAndVote first">ABC</td>
</tr>
<tr>
<th id="second" headers="rank">2nd Favorite:</th>
<td headers="name second">Empty</td>
<td headers="color second">XYZ</td>
<td headers="sizeAndVote second">ABC</td>
<td headers="sizeAndVote second">A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 java2s.com Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
The global id attribute is
added to the th elements in the thead and
the th elements in the tbody.
For each td and th in the tbody,
the headers attribute is associates the cell with the column header.