Tables

In this page:

1 General
2 Features
- 2.1 Proportional Sizing
- 2.2 Describing the table
  - 2.2.1 Captions
    - 2.2.1.1 Table with heading in <caption>
  - 2.2.2 Using aria-describedby
    - 2.2.2.1 Using aria-describedby to summarize a table
- 2.3 Row and Column Headers
  - 2.3.1 Column Headers
  - 2.3.2 Row Headers
- 2.4 Spanned Headers
- 2.5 The headers and id attributes
- 2.6 Empty Headers

A table is used to present data in tabular form. Do not use tables for layout.

General

This document provides information on appropriate ways to design tables. Code examples are provided where appropriate.

Name	Floors	Year Built

Name	Floors	Year Built
City Hall	27	1965
Metro Hall	27	1992

Table 1. Toronto Buildings

<table>
    <caption>Toronto Buildings</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Floors</th>
            <th scope="col">Year Built</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">City Hall</th>
            <td>27</td>
            <td>1965</td>
        </tr>
        <tr>
            <th scope="row">Metro Hall</th>
            <td>27</td>
            <td>1992</td>
        </tr>
    </tbody>
</table>

Features

Tables should have the following:

Proportional sizes or no sizing at all
Descriptions
- <caption> element is the first thing after the opening <table> tag.
- aria-describedby to provide a summary description of complex tables.
Row and Column Headers have scope attributes
rowspans and colspans headers have scope attributes
Table Notes, if any, are embedded in the table structure

Proportional Sizing

Users need to be able to change the size of their browser text.

For cell widths, using proportional sizes (e.g., percentages, rems) will allow the browser window to determine the table width and layout.

Avoid setting cell heights. The cells should be able to expand downward to support resized content.

Describing the table

Captions

A caption is a table title or heading that briefly tells the user what is in the table. A caption can be used to provide a descriptive text for the table. While not all tables need to have a visible caption, a caption is generally very helpful for users to understand the context of the table.

The styling and physical position of the <caption> element relative to the table may be changed using CSS properties.

The <caption> element can be formatted as a heading.

Table with heading in <caption>

<table>
<caption>
  <h2>Toronto Buildings</h2>
</caption>
⋯
</table>

The <caption> element can be formatted so only screen readers users will see it. In this case, it can be useful to provide information about the state of the table (e.g., if it is sorted somewhere).

Using aria-describedby

Any element in the webpage, including visible text, can be assigned a unique id attribute. This id attribute is associated with the table by using the aria-describedby attribute of the table.

This approach is best used to provide a summary description of complex tables. The element containing the summary should be located near the table it describes. For example, the following table description might be used to summarize the Poster Availability table.

Using aria-describedby to summarize a table

<p id="tableDesc">Column one has the type of available posters, other columns show the colour and sizes available.</p>
<table aria-describedby="tableDesc">
[...]
</table>

Row and Column Headers

In HTML, the <th> element is used for table header cells. Use the <td> element only for table data cells.

In the Toronto Buildings example table above, there are five <th> elements: three column headers and two row headers. The column headers are Name, Floors, and Year Built. The row headers are City Hall and Metro Hall.

All <th> elements should have a scope attribute. The scope attribute tells a screen reader if a table header cell is a column header or a row header. Using the table layout, a screen reader might correctly guess whether a header is a column header or a row header, but this is not reliable. Use the scope attribute to makes this information explicit.

Column Headers

scope="col" tells the browser and screen reader that everything within a column relates to this <th>.

Row Headers

scope="row" tells the browser and screen reader that this <th> is a header for all cells in the row.

Spanned Headers

Complex tables with multiple header levels also require the scope attribute.

Poster name	Color	Sizes available

Poster name	Color	Sizes available
Zodiac	Full color	A2	A3	A4
	Black and white	A1	A2	A3
	Sepia	A3	A4	A5
Angels	Black and white	A1	A3	A4
Angels	Sepia	A2	A3	A5

Table 2. Poster availability

For more examples of complex tables, like the example Poster Availability table above, see the W3C Web Accessibility Tutorial on Tables.

The headers and id attributes

While using the scope attribute should meet the requirements of most tables, there are cases where table navigation is so complex (e.g., when data cells are associated with more than one row and/or one column header) that the only way to associate data cells and headers is to use the id and headers attributes to create the association. For more information on this approach see:

We strongly recommend using the scope attribute as much as possible. Complex tables can be difficult to use generally, not just for screen reader users. If possible, redesign the table before using id and headers attributes as the result may not be fully accessible or usable.

Empty Headers

Table headers should never be empty. The top-left cell of the tables should never be empty.