Use of tables in web design

Tables are intended to display tabular data, their use to control layout should be discouraged but not ruled out. Instead the use of additional mark-up can ensure a page remains accessible to all.

Guideline 5 of WCAG 1.0 covers several recommendations under the banner "Create tables that transform gracefully":

• For data tables, identify row and column headers

  The TH tag should be used to clearly define and separate the header cells of a table.

• For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells

  Complex tables may require a hierarchy of headers, for example to separate rows into groups by location. The W3C describe several examples of how to achieve logical headings

• Do not use tables for layout unless the table makes sense when linearized

  In order for a screen reader of another accessibility tool to interpret a page the content is simplified, linearisation is the process of turning such a page into one long document. Tables add extra work to this process, inadvertently a screen reader may separate two page elements which should be together. This can be difficult for a developer to imagine and test.

  Sitemorse recommends the command line browser Lynx, for this and many other tests, to experience a site in it's most basic manner. Additionally Firefox users with the Web Developer Extension have the option under Miscellaneous to "Linearize Page" and witness the result

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

  The tags mentioned earlier for tabular data must not be misused. The TH tag must always refer to a column heading never just the first cell of a table, or to make the contents central and bold. CSS can achieve the same result and not interfere with accessibility aids.

• Provide summaries for tables

  Summary text can be read by screen readers as a general descriptor of the tables purpose or a synopsis of the data content.

  <table summary="This table charts the number cities in the UK and their respective populations">

  Additionally tabular data tables should contain a caption providing a more concise description of the tables purpose and whether the visitor need view the table.

  <table summary="This table charts the number cities in the UK and their respective populations"> <caption>Population by City</caption>

• Provide abbreviations for header labels

  A visitor using a screen reader may tire of the full column name, if appropriate provide a shorter alternative

  <th abbr="Population">Population, rounded to nearest thousand</th>