H51: Using table markup to present tabular information

The objective of this technique is to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Using the table element with the child elements tr, th, and td makes these relationships perceivable. Techniques such as inserting tabs to create columns or using the pre element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.

Examples

Example 1: A schedule marked up as a simple data table with column and row headers

This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.

Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.

Example Code:

 <table>
  <tr>
    <td> </td>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Meet with Sam</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table>

Resources

Resources are for information purposes only, no endorsement implied.

HTML 4.01 Table Element
HTML 4.01 Table rows: The TR element
HTML 4.01 Table cells: The TH and TD elements

Related Techniques

Tests

Procedure

Check for the presence of tabular information.
For each occurrence of tabular information:
1. Check that table markup with at least the elements table, tr, th, and td is used.

Expected Results

All checks above are true.