Tables
When to use tables and how to make them accessible.
Tables should only be used to present data.
Do not use tables for cosmetic changes to layout, for example to present a list because you think it looks better that way.
Consider the alternatives
A table may not always be the best way to present your content.
A simple table can often be replaced with a:
- series of bulleted lists with headings and subheadings
- single bulleted list, using commas to separate the information
See instructions on how to publish tables.
Use headers
Tables must always have a header row, which explains the content of the columns.
Headers appear in bold and help people understand the table’s structure.
If column one contains headings, use the # header Markdown.
Example
| Alice | Ben | |
|---|---|---|
| Apples | 0 | 3 |
| Bananas | 2 | 3 |
| Pears | 0 | 0 |
If column one contains headings, only use the top left cell if you need to describe what’s in the column.
Example
| Total score | Grade | Description |
|---|---|---|
| 0-30 | Fail | Your performance is unsatisfactory |
| 31-42 | Grade B | You’ll stay on the approved driving instructors (ADI) register |
| 43-51 | Grade A | You have shown a high standard of instruction and you’ll stay on the ADI register |
You must capitalise headers.
Row headings must be in column one. If your table has heading information in a different column from column one, you need to rearrange your table.
Tables with 2 columns do not usually need headings in the first column. This is because there is less to scroll so the content will be clear enough without headings to explain the content.
You can use links in table headings.
Watch how screen readers use headings to make table content accessible. You can find the transcript in the video description on YouTube.
How screen readers use headings to make table content accessible
Help the user
Carry out any calculations, for example include totals or differences between amounts at the end of columns or rows.
Make your table easier to read
Try to use more rows than columns. A tall, narrow table is easier to read than a short, wide one.
Put important information first
Put the information that most people are looking for at the top or in the first few columns.
Convert tables to barcharts
In html publications you can convert tables into barcharts which are accessible to users with screen readers. Users can switch between the table and bar chart view.
Style
Keep text in cells concise and clear, and follow the style guide. You can depart from GOV.UK style to:
- truncate the names of months to save room, for example Jan, Feb
- use a dash to show a span between numbers, for example 500-900
- use numerals throughout (do not use ordinals, for example first, second, 10th)
If you do not need to use exact numbers, consider rounding large numbers with decimal places, for example £148,646,000 = £148.6 million.
Size
The size of a table affects how easy it is for people to read it and understand it.
The minimum size for a table should be 2 columns and 3 rows (including a column header), but if your table is this small it may be better as normal text.
Four column tables can be comfortably displayed on a smartphone screen, depending on how much text you have in the table cells. If it looks like too much, think about splitting your data between tables.
If you’re dealing with a huge amount of data that cannot be split, it might be better presented as a CSV (spreadsheet).
See instructions on how to publish tables.