H. HTML Example 1

See below for the techniques to add headers and scopes to example one.

Work Schedule
  WinterSummer
  MorningAfternoonMorningAfternoon
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>&nbsp;</th>
    <th colspan="2" scope="col">Winter</th>
    <th colspan="2" scope="col">Summer</th>
  </tr>
  <tr>
    <th>&nbsp;</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>&nbsp;</th>
    <th colspan="2" id="winter">Winter</th>
    <th colspan="2" id="summer">Summer</th>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <th id="am1">Morning</th>
    <th id="pm1">Afternoon</th>
    <th id="am2">Morning</th>
    <th id="pm2">Afternoon</th>
  </tr>
  <tr>
    <tdid="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>
    <tdheaders="fred pm2 summer">12-5</td>
  </tr>
</table>

This page adopted from the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.