When to use tables and how to make them accessible.
Contents
When to use
Tables should only be used to present data, this data should usually be numeric. Do not use tables to present information that could be displayed as a list. Examples of how to convert tables containing only text to more accessible and usable non-table alternatives.
Making tables accessible
Tables must have headers that explain the contents of columns, rows or both.
| Failure to make a tax return | Penalty |
|---|---|
| 1 day late | £100 |
| 6 months late | Extra £300 or 5% of any unpaid tax, whichever is greater |
| 12 months late | Another £300 or 5% of any unpaid tax, whichever is greater |
| 30 hours a week or more | Less than 30 hours a week | |
|---|---|---|
| 16 to 24 year olds | £4,000 | £2,000 |
| Aged 25 and over | £2,000 | £1,000 |
| Re-employment of redundant apprentices | £2,600 | £1,300 |
Style
You must:
- right-align data in columns so that numbers are comparable (in this case right-align the heading as well)
- insert a comma for clarity in numerals over 999, for example 9,000
- not have empty cells, for example use 0 for a nil value
Keep text in cells concise and clear and follow the style guide. Avoid using the following in table cells:
- line breaks
- lists
- headings
- abbreviations
- unexplained symbols
- links
Avoid splitting single cells or merging multiple cells.
You can depart from GOV.WALES style to:
- truncate the names of months only if short of space, for example Jan, Feb
- use a dash to show a span between numbers only if short of space, for example 500-900
- use numerals throughout (do not use ordinals, for example first, second, 10th)
Size
The size of a table affects how easy it is for people to read and understand it. Limit the size by meeting a single user need per table, for example a table that only shows the minimum wage for each group.
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.
Try to use a maximum of 4 columns. Depending on the text these can usually be comfortably displayed on a smartphone screen. If there are more than 4 columns check the whole table is visible and prints properly.
Using the table tool in Drupal
You should copy and paste tables into Drupal to ensure the content is correct. After pasting the table check it meets the accessibility and style standards.
To insert an empty table in a content paragraph:
- select the table icon in the toolbar
- select the number of rows and columns you need for your table
- turn on Header column or Header row according to making tables accessible
- add caption text to give the table a title
- populate the table cells
Use the style drop-down in the toolbar to align cell data to Table cell align right.