Technique H63:Using the scope
attribute to associate header cells with data cells in data tables
Applicability
HTML
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.
For simple tables that have the headers in the first row or column, it is sufficient
to simply use the th
elements without scope
.
For complex tables use id
s and headers
as in Using id
and headers
attributes to associate data cells with header cells in data tables.
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> <caption>Contact Information</caption> <tr> <td></td> <th scope="col">Name</th> <th scope="col">Phone Number</th> <th scope="col">City</th> </tr> <tr> <td>1.</td> <th scope="row">Charlotte Smith</th> <td>412-212-5421</td> <td>Pittsburgh</td> </tr> <tr> <td>2.</td> <th scope="row">Joetta Frere</th> <td>410-306-5400</td> <td>Baltimore</td> </tr> <tr> <td>3.</td> <th scope="row">David Walls</th> <td>281-511-6600</td> <td>New York</td> </tr> </table>
Other sources
No endorsement implied.
Tests
Procedure
For each data table where the relationship between table header cells and table data cells needs to be specified:
- Check that all
th
elements have ascope
attribute. - Check that all
scope
attributes have the valuerow
,col
,rowgroup
, orcolgroup
.
Expected Results
- All checks above are true.