Simple and Complex Data Table

Overview

Tabular representations of data need to use proper HTML markup that communicates to screen reader users the purpose of the table and the structure of the data it contains. Good tables can be navigated and understood easily by screen reader users without confusion.

Benefits to People with Disabilities

  1. The summary attribute of table elements provides an overview of the body of data in the table to screen reader users.
  2. Screen reader users can effectively understand the structure of data and navigate the table when th elements are used for header cells.
  3. Screen reader users can easily find and identify data tables on web resources when data tables are preceded by heading elements that inform the title and purpose of the table.

Benefits to Everyone

  1. Users receive better search results when search engines can utilize the summary information contained in the summary attribute of table elements.

Benefits to Developers

  1. Differentiating styles of header cells and data cells within a table using CSS is easier when th elements are used for header cells.
  2. Search engines recognize more clearly data organized in tables on web resources.

More Information

  1. 19: HTML tables (Opera Web Standards Curriculum)
  2. W3C WCAG 1.0 data table techniques

Markup

td[headers] (HTML4)

td (HTML4)

th[scope] (HTML4)

th[id] (HTML4)

th (HTML4)

caption (HTML4)

table[summary] (HTML4)

table (HTML4)

Related Accessibility Requirements

Section 508

Illinois Information Technology Accessibility Standards

Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 1.0