Table markup

What to do

Tabular information should be presented in columns and rows so the relationships are recognizable. Column and row headers should be marked with the appropriate table elements, as opposed to just formatting them as bold or italic.

Why it matters

The use of table elements and column and row headings allows assistive technologies to present the two-dimensional relationships between data, even if it cannot be seen.

Examples

Better table markup

Column Header 1Column Header 2Column Header 3
Value A1Value A2Value A3
Value B1Value B2Value B3

This table is used for tabular information showing the relationships between the data, not just to layout elements. The column headers are formatted as headings.

Poor table markup

Column Header 1Column Header 2
Column Header 2
Value A1Value A2Value A3
Value B1Value B2Value B3

The column headers in this table do not use heading markup but are just formatted with a bold font.

Table captions

What to do

Tables should have descriptive captions.

Why it matters

A descriptive caption is a table identifier, like a title or heading, and allows assistive technologies to navigate directly to the table.

Examples

Better table captions

Accessible table

Column Header 1Column Header 2Column Header 3
Value A1Value A2Value A3
Value B1Value B2Value B3

Table caption: "Accessible table"

Poor table captions

Column Header 1Column Header 2
Column Header 2
Value A1Value A2Value A3
Value B1Value B2Value B3

No table caption is used.


Search Knowledge Base

Submit a Service Request