Use tables if they make content easier to read

Use a table only if there isn’t a simpler way to present your content, such as a list, paragraph of text or diagram.

Use tables for exact values and information that is too detailed for the text.

Don’t create a table for only one or 2 items. Report them in the body of the text instead.

Design tables to allow users to:

• scan the information
• find an exact value
• compare values in different categories
• understand how you have categorised the information.

Don’t make tables with other tables inside them (known as ‘nested’ tables).

Some people will look at tables before they read the text. For this reason, design tables so they are self-explanatory. You must still refer to the table in the body of the text. Place the table immediately after the reference to it in the text.

Refer to the table in the text

Tables support the discussion in the text, not the other way around. It is essential to refer to a table in the text.

A single table on a webpage does not need a table number. If you use tables repeatedly, number tables and include the table number when you refer to the table in the text.

When using a table:

• Place the table close to where you mention it in the text and after the paragraph that refers to it. In print, the table should be on the same or facing page.
• Ensure that the table number referenced in the text matches the table number in the title.
• Don’t repeat the whole title of the table in the text.
• Don’t refer to ‘the table below’ or ‘the table above’.
• Ensure that the information in the text is consistent with the information in the table.

Your text comments on or interprets the table. Where possible, avoid repeating the text or data in the table word for word.

Limit tables to only the information the user needs

Be informative, but don’t include too much information. Use only as much text or data as you need to make sure the table is easy to understand. Make sure information is:

• precise
• relevant to the title or caption
• from a credible source and backed by evidence
• consistent with how it’s presented in the text.

Check text and data in the table against the same information in the body of your content. It is easy to make a last-minute change to one and forget to correct the other.

Place data in a consistent and sequential order

Ensure that information in the table is correctly grouped and sits under the correct headings. The text or data in a table should use the same grammatical form (for example, noun, noun phrase or sentence).

Organise data in a sequential order. For example, order a list of names alphabetically by family name.

Merged cells can reduce usability for many people, including screen reader users. They can be made accessible in HTML and PDF. Avoid using them in word processing applications.

To design usable tables:

• Don’t make tables too long or too wide.
• Consider splitting a large, complex table into smaller tables.
• If the content includes a large number of tables, consider putting them in an appendix.
• Check the structure and content of all the tables in your content. If you repeat or duplicate information, combine or delete tables.

Set column and row headings that are clear and accurate

Use simple language in row and column headings for tables. This makes it easier for people to understand the information. It also helps screen reader users navigate tables.

Structure tables so:

• the first row contains the column headings
• the first column (also known as the ‘stub’) contains the row headings.

The column and row headings must relate to each other so users can make sense of the information.

Mark up tables to show header cells and data cells. PDF software and web authoring programs have tools to help you with this.

Use the same grammatical form for each entry in a column.

Complex tables

Complex tables have header cells that span more than one column or row. If you use a complex table, you must define the column and row groups and mark up the table accordingly. This is so screen reader users can access the information in the table.

For detailed instructions and tutorials, visit:

• W3C’s web accessibility tutorial ‘Tables with irregular headers’
• Adobe’s PDF accessibility repair: examine and repair tables.

Add notes to provide sources or help interpret the data

The notes below a table can apply to the whole table or a specific entry in the table.

Use notes to tell users:

• how to interpret information in the table
• what the source of the information in the table is.

Don’t include this information in the table title or caption or in ordinary footnotes or endnotes.

To connect the note under the table to the information it refers to in the table use:

• a symbol such as an asterisk (*) or hash (#) for only one note
• superscript numbers or letters for more than one note.

Use only one type of note in a table. Either use all symbols, all superscript numbers or all superscript letters.

When writing table notes, list them in the following order:

1. abbreviations
2. notes to superscript locators
3. general note to the table
4. source of data (use the appropriate form for author–date or documentary–note).

Align notes to the left. They should not extend beyond the edges of the table. Don’t use superscript for the note identifiers (the symbol, number or letter) in the note. They should be the same font size as the text of the notes so that they are easily found.

Scan-read table data and text for alignment

The text and data in a table are as important as the structure. Align data and text so the table is easy to scan.

In general:

• Align text to the left.
• Align numbers to the right.

In addition, decimal points in the column should line up.

Text should be set horizontally so it is easy to read. Don’t rotate text to display vertically.

If you can, use a fixed-width font for numbers in columns to help users scan the column and compare the values.

For column and row headings:

• Align column headings with the content in the column.
• Include the unit in the heading if it is not in the title or caption.
• Left-align row headings.

Use lines and contrast to help readability

Design tables for readability.

• Don’t use colour as the only way to convey meaning. 
• Don’t use cell or text formatting to convey meaning. It can make the table difficult to read. Screen reader users cannot ‘see’ the formatting.
• Use lines where they help people read the table. Short tables need only a line above and below the header row and at the bottom of the table. Longer tables need lines, or shading of alternate rows (zebra shading), to help people follow the alignment across the table.
• Ensure there is not too much white space between columns. This makes the content harder to read.
• A table will take up the full width of the screen when viewed on a mobile phone. This may change the white space between columns and make it more or less readable.

A key benefit of tables is that they help people compare information. This is possible only if tables look the same as one another. Use the same font, and font sizes, rule (line) thicknesses and colour schemes for tables throughout the document.

Provide a summary for complex tables

For complex tables, provide a summary to give people who use screen readers an overview of the information in the table.

The summary does not provide the same information as the title or caption.

Examples of summaries and captions and how to include them in HTML are in W3C’s caption and summary tutorial.

A summary can include a brief description of what:

• is in the rows and columns
• is being measured and the units of measurements
• the relationship between rows and columns is.