H51: Using table markup to present tabular information | WAI | W3C Skip to content

Technique H51:Using table markup to present tabular information

About this Technique

This technique relates to 1.3.1: Info and Relationships (Sufficient when used for making information and relationships conveyed through presentation programmatically determinable).

This technique applies to HTML.

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.

Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.

Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e., they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.

Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.

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.

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th scope="row">8:00-9:00</th>
    <td>Meet with Sam</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th scope="row">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>

Related Resources

No endorsement implied.

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.
Back to Top