Technique H63:Using the scope attribute to associate header cells and data cells in data tables
Applicability
HTML and XHTML
This technique relates to 1.3.1: Info and Relationships (Sufficient when used with Making information and relationships conveyed through presentation programmatically determinable using the following techniques: ).
Description
The objective of this technique is to associate header cells with data cells in complex
tables using the
scope
attribute. The scope
attribute may be used to clarify
the scope of any cell used as a header. The scope identifies whether the cell is a
header for a row, column, or group of rows or columns. The values row,
col, rowgroup, and colgroup identify these
possible scopes respectively.
For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables:
- data cells marked up with
td
that also function as row header or column header - header cells marked up with
td
instead ofth
. Sometimes, authors use this to avoid the display characteristics associated withth
and also do not choose to use CSS to control the display forth
.
For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.
For complex tables use ids and headers as in H43.
Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.
Examples
Example 1: A simple schedule
In the following example, column #1 contains serial numbers for rows in the table
and the second column contains the key value for the row. The cells in the second
column may then use
scope
="row". The cells in the first row too are
marked up with td
and use
scope
="col".
<table border="1"> <caption>Contact Information</caption> <tr> <td></td> <th scope="col">Name</th> <th scope="col">Phone#</th> <th scope="col">Fax#</th> <th scope="col">City</th> </tr><tr> <td>1.</td> <th scope="row">Joel Garner</th> <td>412-212-5421</td> <td>412-212-5400</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <th scope="row">Clive Lloyd</th> <td>410-306-1420</td> <td>410-306-5400</td> <td>Baltimore</td> </tr><tr> <td>3.</td> <th scope="row">Gordon Greenidge</th> <td>281-564-6720</td> <td>281-511-6600</td> <td>Houston</td> </tr> </table>
Other sources
No endorsement implied.
Tests
Procedure
For each data table:
- Check that all
th
elements have ascope
attribute. - Check that all
td
elements that act as headers for other elements have ascope
attribute. - Check that all
scope
attributes have the value row, col, rowgroup, or colgroup.
Expected Results
- All checks above are true.