Tables

Guidelines

Consider whether a table is really needed. A table can often be replaced by a:

• list of bullet points with appropriate subheadings
• row of cards
• downloadable csv spreadsheet for large amounts of data

Only use tables to present data. For example, prices or dates.

Do not use images in tables.

Size

Large tables can be overwhelming for some people and can be confusing for users of assistive technology.

Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smartphone.

Have more rows than columns wherever possible to make your table longer, rather than wider. This makes it easier for people to read and understand.

If your table needs to be wider than it is long:

• allow the user the scroll the table left and right
• provide cues that there is more content that people can scroll to, for example the table could be formatted so the table looks cut off on the screen
• research the implementation with real people to make sure it’s as accessible as possible

Captions

A caption is the heading for a table. It appears above the table as a heading.

Most screen readers announce the captions.

Headers and footers

Columns and rows of a table should have headings. These indicate the groups of data within the table.

If there are a lot of rows in your table, you can use table footers which appear at the bottom of the table to help people remember the data that the table contains if they have scrolled down the page a long way.