Table

Use the table component to make information easier to compare and scan for users.

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

When to use this component

Use the table component to let users compare information in rows and columns.

When not to use this component

Never use the table component to layout content on a page.

How it works

Table captions

Use the <caption> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.

There are other styling options for table captions. You can use govuk-table__caption--s, govuk-table__caption--m, govuk-table__caption--l and govuk-table__caption--xl to make them larger or smaller from the default.

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

Get the Nunjucks macro for this example from the Camden Frontend library

Table headers

Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers.

There are 2 ways to use the table component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.

Open this example in Storybook

Source unavailable from Storybook for this example.

Source unavailable from Storybook for this example.

Get the Nunjucks macro for this example from the Camden Frontend library

Research on this component

This component is based on the table component from the GOV.UK Design System.

You can take part in the ‘Table’ discussion on GOV.UK’s Design System’s GitHub and share your research.