Last reviewed: 18 Aug 2021

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

This table compares our Classic and Select Plus pet insurance
Classic Select Plus
Vet fees cover £2000 £5000
Extra treatments Not included £750

A table with caption, row and column headings.

This table shows compares points earnings in 2018 and 2019
2018 2019
Co-op Food 709.09 654.45
Co-op Insurance 49.99 52.35
Points total

A table with caption, row headings, column headings and footer.

This table lists the 6 most recent times that you’ve earned Co‑op rewards
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

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.