The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Using scope

While someone who can see has no problem associating a specific data cell with a header, someone who uses a screen reader, to experience the web may have more of a challenge. The scope attribute helps a screen reader associate a data cell with the correct headers.

<th scope="col">

lets the screen reader know that the header is associated with every data cell in that column.

<th scope="row">

lets the screen reader know that the header is associated with every data cell in that row.

Menu for Monday
Breakfast Lunch Dinner
eggs sandwich steak
migas burger grilled salmon

HTML source code:

<table>

<caption>menu for Monday</caption>

<tr>
<th scope="col">Breakfast</th>
<th scope="col">Lunch</th>
<th scope="col">Dinner</th>
</tr>

<tr>
<td>eggs</td>
<td>sandwich</td>
<td>steak</td>
</tr>

<tr>
<td>migas</td>
<td>burger</td>
<td>grilled salmon</td>
</tr>

</table>

This technique works with simple tables where a data cell is associated with at most one column header and one row header. For complex tables with multiple column or row headers associated with a data cell the headers and id attributes are used. For an example of this technique go to the a tutorial at jimthatcher.com.

* There's a good article for information about screen readers.

Proceed to adding a border.


  Updated 2008 January 14
  Copyright | Privacy | Accessibility
  Comments to TeamWeb