Tables

Why it Matters |   How To... |   Testing |   Guidelines

Why it Matters

Tables containing data can be difficult to understand if a person is navigating the website using non-visual means. In particular screen readers users can easily become confused when inside a table because of the difficultly of associating a particular cell with the corresponding column or row.

[return to top]

How To...

All tables that are used to display data should contain information about that data.

Where possible column and row header elements (TH) should be used to identify the nature of the content of table columns and rows. It is recommended that you also use the CAPTION element and the summary attribute when creating tables. Tables can also have titles.

There are a number of tutorials available on creating accessible data tables:

All tables that are used for layout purposes should either be replaced with pure style sheet layouts or made accessible http://webaim.org/techniques/tables/.

There are a number of tutorials available on creating CSS layouts:

[return to top]

Testing

Examine the code to ensure that tables are properly coded.

[return to top]

Guidelines

Checkpoint 2.1 Create tables that transform gracefully.

[return to top]