Properly Designing Data Tables

Requirement: All data tables must have table headers and use attributes such as scope or id and headers to associate table data with the right headers.

HTML tables fall into two categories: data tables and layout tables.

Layout tables exist solely for design purposes. While they are still a major part of Web development, as browsers evolve, layout tables can be replaced by elements such as layers and positioning through style sheets.

Data tables are designed to present information in an organized way as though they are a chart or a matrix.

Data tables should feature three items:

1. A caption (use the <caption> tag) acting as a title for the table
2. A summary attribute (contained within the opening <table> tag
3. Table headers

Table headers

Table headers are indicated with the <th> elements of a table. They identify column and row headers and are important for making the table's data understandable to users. By using attributes such as "scope," developers can associate table headers with the right columns and rows.

Associating headers with data cells

While table headers greatly help explain a data table's nature, something still needs to be done to connect the headers and data.

There are currently two methods of accomplishing this. For the purpose of meeting the campus accessibility standard, either method will suffice.

Note this requirement applies to data tables only. When tables are used for page layout, the tables should have no headers, associations, captions or summaries.

Using scope

The scope attribute connects a header with a row or column. Here is the example HTML:

<th scope="col">Dept. Chair</th>
<th scope="col">Phone Number</th>
</tr>
<tr>
<th scope="row">Biology Dept.</th>
<td>Prof. Smith</td>
<td>April 7-5000</td>
</tr>
<tr>
<th scope="row">English Dept.</th>
<td>Prof. Jones</td>
<td>7-5000</td>
</tr>

Using id and headers attributes

You can accomplish the same thing as scope using the id attribute.

<th id="dept">Dept. Name</th>
<th id="chair">Dept. Chair</th>
</tr>
<tr>
<th id="bio">Biology Dept</th>
<td headers="dept biology">Prof. Smith</td>
<td headers="chair biology">7-5000</td>

Many developers will find scope easier to implement. However, across browsers it is not supported as well as the headers and id attributes. For very complicated data tables, id and headers may be more useful. Still the best advice is to avoid complicated tables. Instead consider breaking one table into multiple tables. Generally users, despite the tools they are using, will find it easier to handle data in pieces than in one conglomeration.