Guideline 5. Create tables that transform gracefully.

Ensure that tables have necessary markup to be transformed by accessible browsers and other user agents.

Tables should be used to mark up truly tabular information (“data tables”). Content developers should avoid using them to lay out pages (“layout tables”). Tables for any use also present special problems to users of screen readers (refer to checkpoint 10.3).

Some user agents allow users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide user agents with the appropriate information. (Refer also to guideline 3.)

The following checkpoints will directly benefit people who access a table through auditory means (e.g., a screen reader or an automobile-based personal computer) or who view only a portion of the page at a time (e.g., users with blindness or low vision using speech output or a braille display, or other users of devices with small displays, etc.).

Checkpoints:

5.1 For data tables, identify row and column headers. [Priority 1]

For example, in HTML, use TD to identify data cells and TH to identify headers.

5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]

For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the “axis”, “scope”, and “headers” attributes, to describe more complex relationships among data.

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]

Note. Once user agents support style sheet positioning, tables should not be used for layout. Refer also to checkpoint 3.3.

5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]

For example, in HTML do not use the TH element to cause the content of a (non-table header) cell to be displayed centered and in bold.

5.5 Provide summaries for tables. [Priority 3]

For example, in HTML, use the “summary” attribute of the TABLE element.

5.6 Provide abbreviations for header labels. [Priority 3]

For example, in HTML, use the “abbr” attribute on the TH element.