11. Tables

11.1 Table row and column headers

For data tables, identify row and column headers.

Guide to this standard

Use the <TH> element in tables for cells that serve as headers in rows or columns, rather than <TD>, which should be used for cells containing data or cells that are empty.

User agents (including assistive technologies) can render header cells distinctly from data cells even when style sheets are not used. For example, a visual browser might bold the text in header cells, while a speech synthesiser might pronounce the header text with a different inflection and/or repeat the header information for each data cell in a row.

Style sheets can be used to style the visual appearance and alignment of text in cells marked as headers.

Where a cell’s contents serve as both data and header information for other cells, you can use the <TD> element and use the “id" and "header" attributes or "scope" attribute for <TD> to associate data cells and header cells.

This standard covers the W3C WAI checkpoint 5.1 (http://www.w3.org/TR/WCAG10-TECHS/#tech-table-headers) for NZ government agencies.

Rationale for this standard

Users who rely on assistive technologies, particularly those with visual impairments, can either not see, or have difficulty seeing the structure of a table. In such cases identifying row and column headers enables the assistive technology device to describe to the user the structure of a table.

11.2 Mark-up for data and header cells in tables

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

Guide to this standard

There are two techniques for providing the association between header and data cells:

• The "scope" attribute on a <TH> cell specifies the set of data cells for which that <TH> cell provides header information. The "scope" attribute can have values of "row", "col", "rowgroup" or "colgroup".
• The "id" and "header" attributes on <TH> and <TD> cells. The "header" attribute on a cell specifies a list (separated by spaces) of the names of header cells that provide header information for that cell; those names are set by adding "id" attributes to the header cells.

For very complex tables, inconsistencies in the way assistive technologies interpret the scope attribute mean that a ‘belt and braces’ approach to ensuring accessibility of the table is to use both the "scope" and the "id" and "headers" approaches in the table mark-up.

Complex tables, such as the HTML versions of the printed financial statements from an agency’s annual report, cannot readily be simplified for the web, because they still need to retain their structural integrity in order to be interpreted properly (as financial statements) by sighted users. Use of "id" and "header" attributes at least on <TH> and <TD> cells can ensure that such tables are reasonably accessible for users of assistive technologies as well.

This standard covers the W3C WAI checkpoint 5.2 (http://www.w3.org/TR/WCAG10-TECHS/#tech-table-structure) for NZ government agencies.

Rationale for this standard

Users who rely on assistive technologies, particularly those with visual impairments, can either not see, or have difficulty seeing the structure of a table. In such cases, using mark-up to associate data cells with header cells enable the assistive technology device to describe to the user the structure of a table.

11.3 Do not use tables for layout

Do not use tables for layout, use style sheets instead.

Guide to this standard

Do not use tables for layout unless the table makes sense when linearised. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearised version).

This standard covers the W3C WAI checkpoint 5.3 (http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-table-for-layout) for NZ government agencies.

Related Standard(s)

9.1 - Organise documents so they may be read and still function without style sheets

9.2 - Use style sheets to control layout and presentation of pages and elements on

Rationale for this standard

W3C recommendations are for Cascading Style Sheets (CSS1 and CSS2) for layout.

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 not all browsers for some devices support tables.

11.4 Provide summaries for tables

Guide to this standard

Use the "summary" attribute within the <TABLE> element.

For complex tables, the "summary" attribute should contain text that helps users of assistive technologies form a mental picture of the structure of the table e.g. by describing the number of rows and columns, significant groups of rows and the column headings.

This standard covers the W3C WAI checkpoint 5.5 (http://www.w3.org/TR/WCAG10-TECHS/#tech-table-summaries) for NZ government agencies.

Rationale for this standard

This is predominantly for assistive technologies such as screen and Braille readers, which will be able to inform users of such devices what information is presented in the table and name the table headings.