H. HTML Example 1
| Winter | Summer | |||
|---|---|---|---|---|
| Morning | Afternoon | Morning | Afternoon | |
| Wilma | 9-11 | 12-6 | 7-11 | 12-3 |
| Fred | 10-11 | 12-6 | 9-11 | 12-5 |
Using scopes
Each header cell will be converted from a <TD> tag to a <TH> tag. Scopes are then applied to all of the headers.
<table>
<caption><b>Work Schedule</b></caption>
<tr>
<th> </th>
<th colspan="2" scope="col">Winter</th>
<th colspan="2" scope="col">Summer</th>
</tr>
<tr>
<th> </th>
<th scope="col">Morning</th>
<th scope="col">Afternoon</th>
<th scope="col">Morning</th>
<th scope="col">Afternoon</th>
</tr>
<tr>
<td scope="row">Wilma</td>
<td>9-11</td>
<td>12-6</td>
<td>7-11</td>
<td>12-3</td>
</tr>
<tr>
<td scope="row">Fred</td>
<td>10-11</td>
<td>12-6</td>
<td>9-11</td>
<td>12-5</td>
</tr>
</table>
Using the ID attribute
Each header cell will be converted from a <TD> tag to a <TH> tag. ID tags are then added to each of the headers. For each data cell that is to be associated with a header, a headers attribute is added that lists each header that cell is associated with.
<table>
<tr>
<th> </th>
<th colspan="2" id="winter">Winter</th>
<th colspan="2" id="summer">Summer</th>
</tr>
<tr>
<th> </th>
<th id="am1">Morning</th>
<th id="pm1">Afternoon</th>
<th id="am2">Morning</th>
<th id="pm2">Afternoon</th>
</tr>
<tr>
<td id="wilma">Wilma</td>
<td headers="wilma am1 winter">9-11</td>
<td headers="wilma pm1 winter">12-6</td>
<td headers="wilma am2 summer">7-11</td>
<td headers="wilma pm2 summer">12-3</td>
</tr>
<tr>
<td id="fred" >Fred</td>
<td headers="fred am1 winter">10-11</td>
<td headers="fred pm1 winter">12-6</td>
<td headers="fred am2 summer">9-11</td>
<td headers="fred pm2 summer">12-5</td>
</tr>
</table>
This page adopted from the the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.