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 a header row that explains the content of the columns.
| 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
Keep text in cells concise and clear and follow the style guide. You must:
- right-align headings and data in columns so that numbers are comparable
- insert a comma for clarity in numerals over 999, for example 9,000
You can depart from GOV.WALES 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)
Avoid splitting single cells or merging multiple cells.
Size
The size of a table affects how easy it is for people to read 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.
Try to use a maximum of 4 columns. Depending on the text these can usually be comfortably displayed on a smartphone screen. If it looks like too much, think about splitting your data between tables.
Using the table tool in Drupal
To insert a table in a content paragraph:
- select the table icon in the toolbar
- select the number of rows and columns you need for your table
- select the correct header option so that header text is labelled (First row, First column or both)
- add caption text to give the table a title
- select OK to create table and complete as required
You should copy and paste data tables into Drupal to ensure data is correct.
When you copy and paste a table into Drupal, to ensure column and row headers are properly formatted you need to turn them off and back on:
- right select table and select Table Properties
- amend header option to None
- select OK
- amend header option to First row, First column or both
- select OK
First row is used for a table where only the first row contains headings (example table with 1 header).
First column is used for tables where only the first column contains headings.
Both is used for tables where the top row and first column contains headings (example table with 2 headers). If you have an empty cell in your header row or column, it will cause an accessibility error. You must right-select the cell, select Cell Properties and amend Cell Type to Data.
Use the style drop-down in the toolbar to align cell data to Table cell align right.