Table

Tables organise and display information from a data set.

How to use tables

Use tables to make information easier to compare and scan for users.

When using tables:

  • Make your tables as easy to understand as possible
  • List your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order
  • Provide a caption to describe what the table is about
  • Header cells must be marked up with <th> and data cells with <td> to make tables accessible
  • Complex tables may require more explicit cell and header associations using scope, id, and headers attributes
  • Provide a summary for complex tables describing how the data is organised to help users understand and navigate the table

Types of tables

Standard

  • Interactive demo - Sainsbury's

Sortable

Use a sortable table when you want to give users the option to order content.

  • Interactive demo - Sainsbury's

Flexible

A flexible table adjusts on smaller screen sizes to display the content as stacked.

  • Interactive demo - Sainsbury's
  • Interactive demo - Sainsbury's

Copy guidelines

  • Headers should be informative and descriptive
  • Include unit of measurement symbols in the header so they aren’t repeated throughout the columns
  • Use decimals consistently
  • Start your headers with a capital letter
  • Don’t use commas or any punctuation at the end of each header
  • Don’t use more than three words per header

Was this page helpful?


Get in touch

Our team can answer any questions about using tables or give you a helping hand with your next project.
Select a theme to demo: