Elements
Tables
Tables can help people compare and understand data.
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.
Examples
Classic | Select Plus | |
---|---|---|
Vet fees cover | £2000 | £5000 |
Extra treatments | Not included | £750 |
A table with caption, row and column headings.
2018 | 2019 | |
---|---|---|
Co-op Food | 709.09 | 654.45 |
Co-op Insurance | 49.99 | 52.35 |
Points total | 759.08 | 706.80 |
A table with caption, row headings, column headings and footer.
Date and time | For you | Dividend points |
---|---|---|
8 February 2021, 9:00pm | 3.75 | |
7 February 2021, 7:28pm | 12.10 | |
7 February 2021, 7:28pm | £0.09 | |
1 February 2021, 1:40pm | £0.05 | 8.50 |
3 January 2021, 4:45pm | £0.04 | 12.65 |
1 January 2021, 4:38pm | £0.29 |
A table with caption and column headings.
Changelog for this page
Date | Notes |
---|---|
11 Aug 2021 | First version of page published |