Making Accessible Websites for the United Nations

Page Design: Coding

Layout Tables

Layout and Data Tables

  • Layout table: Table used to control the display of elements in a page.
  • Data table: Table used to display tabular data, which is logically organised into rows and columns, as in an Excel spreadsheet.

WAI Definition (Checkpoints 5.3 and 5.4)

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).

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

Explanation

Avoid using tables for layout purposes.

Instead, use CSS to position elements on your page. If there is a need to use tables for layout, do not use the "summary" attribute, the <caption> tag or the <th> tags in the table.

Rationale

Tables may be helpful to place and separate elements to the right or left of a page, but they should be used sparingly and not relied on fully, since tables are not well-supported by some screen readers. The screen reader linearizes the content, which means that it reads it row by row. Sometimes, content loses its coherence when read in this manner, especially when there are a lot of nested tables on a page.

The "summary" attribute, the <th> tag and the <caption> tag are meant to assist screen-reader users to make sense of data tables. Letting these users know that a table is for layout purposes is just cumbersome information. Adding <th> tags would be misleading as there are no column or row headers in a layout table.

Technique

Use CSS to position elements on your pages.

If tables must be used to layout the page, do not use nested tables.

The following tags and attributes should NOT appear in a layout table:

Validation

First Test

Check if there are layout tables on the page.

Using the Firefox Web Developer's Toolbar (plugin):
Go to Miscellaneous > Linearize page.

Success Criteria

The content of the page should still make sense once it is linearized, appearing in the proper order.

Second Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Information > Table information.

Success Criteria

There should not be any summary, column or row headings and captions.