All web standards are mandatory for web pages on the Surrey County Council website, Our Surrey and microsites.
Create accessible tables to make sure the contents can be understood by all
Table column headings
Only use column headings in tables as information must read from left to right.
Guidance
- You must include a description of each column's content in the first row. This will be displayed as a heading.
- When creating a table in Squiz Matrix, the default setting is to place the heading at the 'Top', please do not change this setting. If your table requires a different setting, contact Web and Digital Services for advice.
- You can set equal column widths using percentages to make tables look neater.
- Keep text short and meaningful to achieve equal row heights.
Example
| Item | 1998 | 1999 | 2000 |
|---|---|---|---|
| Widgets | 56 | 59 | 61 |
| Sprockets | 212 | 201 | 225 |
Reason for this web standard
Accessibility and usability - this standard is mandatory for accessibility and usability reasons.
Accessibility - by formatting table headings correctly, screen readers for the visually impaired are able to correctly read the information in a table.
Usability - tables should be used to display and compare data. Column headings allow people to quickly locate and understand information within a table.
Table content
- Do not use tables to create columns for body text (content) or to position images on a page.
- The information in a table must make sense when read from left to right.
Guidance
- Tables cannot be used to create non-standard layouts (such as columns of text or images). If you were thinking of doing this, you must contact the Web and Digital Services for advice on page layouts.
- Make sure that the text in the table is clear and easy to follow. The information must be presented from left to right so that a screen reader for the visually impaired can make sense of the data.
- Don't paste in tables from Microsoft Word or other programs as these can cause technical problems. Instead create a new table in Squiz Matrix and enter your information into that.
- Tables are most suitable for displaying information that needs to be compared from row to row or column to column. For simple information, a list may be a better option.
Examples
This table is acceptable. It has headings at the top of each row (see the standard for table headings above) and it makes sense if you read each row from left to right.
| Event | Date | Time | Venue |
|---|---|---|---|
| Parents conference | Monday 19 March | 9.30 - 11.30am | Bishop David Brown School, Albert Drive, Woking, GU21 5RF |
| Open evening | Monday 23 April | 7.30 - 9pm | Bishop David Brown School, Albert Drive, Woking, GU21 5RF |
| Induction session | Monday 21 May | 9.30 - 11.30am | Bishop David Brown School, Albert Drive, Woking, GU21 5RF |
However, it could be easier to present this information without using a table as follows:
Parents conference
Monday 19 March, 9.30 - 11.30am
Bishop David Brown School, Albert Drive, Woking, Surrey, GU21 5RF
Open evening
Monday 23 April, 7.30 - 9pm
Bishop David Brown School, Albert Drive, Woking, Surrey, GU21 5RF
Induction session
Monday 21 May, 9.30 - 11.30am
Bishop David Brown School, Albert Drive, Woking, Surrey, GU21 5RF
The table below is not acceptable. It has no headings and is being used just for layout.
| Avoid columns of text. A text reader will not be able to | Avoid nested tables | Keep tables simple |
| make sense of them, as they read from left to right across | Use clear and short headings | Plan out your table first |
| columns. If you try to create columns of text to add images next to text or to get more information on a page, it will not make sense to screen readers and it may not display as you would expect it to in all web browsers. Tables should only be | Avoid too many columns as the text will be narrow and unreadable | Avoid long tables as they can be difficult to read. |
| used to compare information or for columns of figures, data you would expect to find in a table. | Avoid too much text in a cell as lots of differently sized cells, rows and columns can look untidy. | Only use tables if it is the best option for your information. |
Reading it from left to right (as a screen reader would) it would read as:"Avoid columns of text. A text reader will not be able to avoid nested tables keep tables simple make sense of them...". This is why you must add content to your tables so that it can be read from left to right. Different sized cells, columns and rows, as shown above, look untidy and can become confusing, so try to plan your table carefully to make sure the data is clearly presented and easy to understand.
Reason for this web standard
Accessibility and usability - This standard is mandatory for accessibility and usability reasons.
Accessibility - People with text readers need tables to be properly laid out in order to be able to understand them.
Usability - Clearly labelled and well laid out tables make it easy for everybody to understand the information they are presenting.
