Skip to main content

Table

Use a table to make it easier for users to compare and scan information.

Open in new window
Copy
<div class="nhsuk-table-responsive">
  <table class="nhsuk-table">
    <caption class="nhsuk-table__caption">Skin symptoms and possible causes</caption>
    <thead class="nhsuk-table__head">
      <tr class="nhsuk-table__row">
        <th class="nhsuk-table__header" scope="col">Skin symptoms</th>
        <th class="nhsuk-table__header" scope="col">Possible cause</th>
      </tr>
    </thead>
    <tbody class="nhsuk-table__body">
      <tr class="nhsuk-table__row">
        <td class="nhsuk-table__cell">Blisters on lips or around the mouth</td>
        <td class="nhsuk-table__cell ">cold sores</td>
      </tr>
      <tr class="nhsuk-table__row">
        <td class="nhsuk-table__cell">Itchy, dry, cracked, sore</td>
        <td class="nhsuk-table__cell ">eczema</td>
      </tr>
      <tr class="nhsuk-table__row">
        <td class="nhsuk-table__cell">Itchy blisters</td>
        <td class="nhsuk-table__cell ">shingles, chickenpox</td>
      </tr>
    </tbody>
  </table>
</div>
Copy
{% from 'tables/macro.njk' import table %}

{{ table({
  panel: false,
  caption: "Skin symptoms and possible causes",
  firstCellIsHeader: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "shingles, chickenpox"
      }
    ]
  ]
}) }}

When to use a table

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

When not to use a table

Do not use a table to layout content on a page. Instead, use the grid system.

How tables work

Accessibility

Follow WebAIM's guidance for tables and

  • give tables captions
  • use the scope attribute to associate the data cells with the appropriate headers
  • let the browser window determine the width of the table whenever possible, to reduce horizontal scrolling

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.

Table headers

Use table headers to tell users what the rows and columns represent.

Research

The table component tested well with users on health information pages. The white panel helped users scan the page and find information when it was surrounded by text content.

For context, on the NHS website:

  • tables never exceeded 3 columns - we didn't design for or test any tables with more than 3 columns
  • most of the tables contain text - few contain (numerical) data
  • we didn't uncover any needs around re-ordering data in tables

Table with panel

We have also designed a table with a panel. You can see an example in the frontend library. We haven't included it in this list of components yet because it needs more testing.

If you’ve used tables, get in touch to share your user research findings.

Discuss

Discuss tables on GitHub

Get in touch

If you have a question:

Updated: April 2019