Tables

Back to full list

What do I need to do?

Do not use tables for layout unless it makes sense when linearized. If a table is used for layout, do not use any structural markup for visual formatting.

How do I do this?

For a simple data table, keep column headers in the same column as the cell, and row headers in the same row as the cell. Use <th> to identify a header.

table example

Why is this important?

Information in a data table is lost when it is linearized, which is what happens with a screen reader. For example, a TV schedule organized in a table may leave users who cannot see the screen unsure about what time and what channel a certain show is on that appears in the middle of the table.

 

For more detailed information, consult the WebAIM tutorial.