Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Table

Updated in October 2026

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

Open this example in a new tab
Skin symptoms and possible causes
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox

When to use a table

Use a table to organise structured data in rows and columns. This can help users scan, compare and find information easily, for example appointment details or vaccination reports.

When to not use a table

Never use the table component to layout content on a page. Instead, use the grid system.

How to use a table

Basic tables

Table captions

Open this example in a new tab
Months and rates
Month you apply Rate for vehicles
January 95
February 55
March 125

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.

Numbers in a table

Open this example in a new tab
Flu vaccination uptake
Group Eligible people Vaccinated
Aged 65 and over 25,430 20,782
At-risk adults 14,215 10,663
Healthcare staff 8,942 7,481

If you have numeric data, right align the column header and cells to make it easier to compare numbers.

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, this supports WCAG 2.2 Success Criterion 1.4.10 Reflow, level AA

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. This supports WCAG 2.2 Success Criterion 1.3.1 Info and Relationships, level A and WCAG 2.2 Success Criterion 2.4.6 Headings and Labels, level AA.

Style table captions to match the visual hierarchy of your page's content. If using Nunjucks, use the captionSize macro option. In HTML add the nhsw-table__caption--l class. You can use sizes s, m, l, or xl.

Table headers

Use table headers (<th>) to tell users what sort of data the rows and columns contain. The combination of row and column headers helps screen reader users identify the data in each cell. This supports WCAG 2.2 Success Criterion 1.3.1 Info and Relationships, level A.

If users need to refer to the first column to understand the context of a cell, for example a name or day of the week, make sure this column's cells are table headers with the scope="row" attribute.

Tables with a lot of data

If possible, you should aim to have less data in your tables. If you have a lot of data, try to organise it into multiple tables or multiple pages.

Responsive table

Open this example in a new tab
Vaccination schedule
Age Vaccine How it is given
8 weeks 6-in-1 vaccine Injection into the thigh

The responsive table stacks vertically on small screens, using inline headings to label each cell.

Source

Learn more about Tables in the GOV.UK Design System.

Back to top

Table variants

Displaying missing data

Open this example in a new tab
Vaccinations given
Date Vaccine Product
10 July 2026 RSV Abrysvo
6 September 2023 Flu No data

Do not leave empty cells in a table. The only exception can be the top left cell, where an empty cell may be needed to support the table structure.

If you have missing data, include some short text to explain why it's missing, such as:

  • "No data"
  • "Not applicable"
  • "Not known"

To distinguish the text from other table content, use the nhsw-u-secondary-text-colour modifier class to make it dark grey.

Session row

You can use the session row to list items that require multiple layers of structured context (such as primary identifiers, secondary clinical metadata and status tags).

Standard session row

Open this example in a new tab
Children routine imms morning
8am to 5pm Recurring session
Diphtheria, tetanus, pertussis, polio, Hib and hepatitis B, Pneumococcal, Rotavirus
To do
21 of 87 Free
11

Use the standard session row to show key information about a session.

It helps users compare sessions by displaying the session name, time, supporting information and status in a clear, scannable layout.

Session row with location

Open this example in a new tab
Children routine imms morning
8am to 5pm Recurring session
Diphtheria, tetanus, pertussis, polio, Hib and hepatitis B, Pneumococcal, Rotavirus
Four Elms Medical Centre
To do
21 of 87 Free
11

Use the session row with location when users need to know where a session takes place.

It includes a location alongside the session details, helping users find and compare sessions based on where they are delivered.

Back to top

Examples

Welsh Immunisation System (WIS)

This example shows the "Transfers in" view under Stock management within WIS. It uses a table component to display structured inventory data in rows and columns.

Transfers in table with vaccine transfer records

Choose Pharmacy

This example shows the "Outcome: Supply" screen within a consultation in Choose Pharmacy. It uses an interactive table component to present formulary options and record medication supplies.

Outcome: Supply table with formulary medicine rows

Back to top