[Skip navigation]

DEMOS Project

Online Materials for Staff Disability Awareness
[Home] Home • [Modules] Modules • [Resources] Resources • [Project] Project • [Contact Details] Contact • [Sitemap] Sitemap • [Help] Help
: Techniques

Tables

Avoid the use of tables for layout

Tables are for tabular data [?] and should not be used for laying out page content. Layout can be achieved using CSS. Unfortunately it is not as straight-forward as that; only the latest browsers implement CSS positioning correctly, which means that tables are still widely used for this purpose.

Screenreaders and voice browsers are improving and most recent releases are able to recognize table cells and deliver their contents accordingly. Older screenreaders, however, read across table cells, making text incomprehensible. Screenreader software is extremely expensive and it should not be assumed that only because improved versions are available they are in widespread use.

If you use tables for layout, don't use structural mark-up for visual formatting. For example, the table header tag <th></th> is normally displayed in bold and centered above the table cell. Don't misuse this tag for content headings.

Linearized table

If tables are used for layout, make sure their content still makes sense when linearized, i.e. when the content of table cells is displayed as a series of paragraphs, one after another. Pages that 'degrade gracefully' should cause no problems for screenreaders, braille displays, and even small displays on handheld devices.

Example:

Tip: Test your table layout in the Opera browser [External link: Open in new browser window] (free version available). It facilitates great user control. Tables can be turned off in File -> Preferences -> Page style.

Nesting tables

Avoid the nesting of tables (putting tables within tables) because some browsers have problems with the combination of tables and CSS and do not display tables and content as intended.

Data tables

When tables are used for tabular data [?], the information contained needs to be grouped logically. Provide a summary in the table tag, give the table a title by using the CAPTION tag, identify rows and columns correctly and assign table headers to rows and columns.

Details about this extensive topic including code examples and examples of how a screen reader will read correctly marked up tables can be found in the WAI Accessibility Guidelines: 5. Tables [External link: Open in new browser window]

[Previous] | Previous || Table of Contents || Next | [Next]