Accessible Table - Example 1 - Using "scope" attribute within Table Header cells <th> and Table Data cells <td>

Source: 508 Web Guidelines, Sec. 1194.22(g), http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

  Spring Summer Autumn Winter
Betty 9-5 10-6 8-47-3
Wilma 10-6 10-6 9-5 9-5
Fred 10-6 10-6 10-6 10-6

B. - Table Using "ID" and "Headers" attribute in tables.

The "id" attribute. This table first gives each header an identifier (ID). This defines a specific place in the document where this particular tag can be found:

<th> colspan="2" id="winter" >Winter</th>
<th id="am1" >Morning</th>

The "header" attribute. Then, individual datacells "call" the "header cells" by "calling" or "referring to" the header cells' "id." This is done using the "headers" attribute, for example:

<td id="wilma" >Wilma</td>
<td headers="wilma am1 winter" >9-11</td>

This takes a lot of time to code. Each data cell has to have a "header" attribute. It is simpler to code only the Header cells using the Scope attribute.

  Winter Summer
  Morning Afternoon Morning Afternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5

Same table as above using the "scope" attribute in the headers. Note how much less coding is required.

Try setting up a table using the DreamWeaver MX table dialog box. See if the "scope", "id," and "header" attributes are provided for you to fill in.

  Winter Summer
  Morning Afternoon Morning Afternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5