Table patterns

Interacting with tables

Form inputs within tables

Avoid doing this — make a form instead.

Hiding and revealing tables (accordions)

We don’t yet have a recommendation about how to hide and reveal tables.

If you have any examples to share, or have researched this pattern, please get in touch.

Large tables (or lots of tables)

Don’t try to answer multiple questions by making one very large table. Instead break the information out into smaller, more focused tables. It’s easier to scroll through a long page with lots of tables than to hunt for information in one big table.

People don’t mind scrolling through a long page, so long as they are confident they will find what they are looking for. Use the content at the top of the page to set the user’s expectations so they are happy to scroll. Consider using in-page navigation to help the user find the information they need in a long page.

‘Users do scroll when the content is relevant, organised properly and formatted for ease of scanning. In fact, people prefer scrolling the page for content over pagination when the topics within that page answer the right questions.’

Nielsen Norman Group

Responsive tables

There are a few ways of making a table responsive.

Whichever approach you choose, it should reflect how users will look at the data in the table.

The patterns used for making a table responsive should be appropriate to the data in the table and how users are looking at that data.

Table width reduces

This approach works well when there is very little content in the columns — just figures.

In this scenario, the design of the table stays the same for all screen sizes — it just scales down.

Example Cell widths reduce with device size

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

Rows become mini-tables

This approach works for a table with different types of values — including text.

Remove horizontal lines, with the exception of the heavier line which is now be used to separate the mini-tables.

This pattern is experimental

Feel free to use this pattern in your service. Make sure you test it across a range of devices with users of all abilities. Please let us know about anything you find out.

Example Responsive table - rows become mini-tables

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

Another example of this responsive table is on the design manual updates page. The code example is on the tables code standards page.

Feedback

Did you find what you were looking for?