Techniques for WCAG 2.0

On this page:

-

# H51: Using table markup to present tabular information

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## Description

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

- H39: Using caption elements to associate data table captions with data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables

## Tests

### Procedure

1. Check for the presence of tabular information.

2. 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.

- Top
- Contents
- Intro
- Previous: Technique H50
- Next: Technique H53