Components

Table

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

<table class="govuk-table">
  <caption class="govuk-table__caption">Dates and amounts</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Date</th>
      <th class="govuk-table__header" scope="col">Amount</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">First 6 weeks</th>
      <td class="govuk-table__cell ">£109.80 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">Next 33 weeks</th>
      <td class="govuk-table__cell ">£109.80 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">Total estimated pay</th>
      <td class="govuk-table__cell ">£4,282.20</td>
    </tr>
  </tbody>
</table>
{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  caption: "Dates and amounts",
  firstCellIsHeader: true,
  head: [
    {
      text: "Date"
    },
    {
      text: "Amount"
    }
  ],
  rows: [
    [
      {
        text: "First 6 weeks"
      },
      {
        text: "£109.80 per week"
      }
    ],
    [
      {
        text: "Next 33 weeks"
      },
      {
        text: "£109.80 per week"
      }
    ],
    [
      {
        text: "Total estimated pay"
      },
      {
        text: "£4,282.20"
      }
    ]
  ]
}) }}

You can configure this component using the Nunjucks macro arguments.

When to use this component

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

When not to use this component

Don’t use the table component to layout content on a page. Instead, use the grid system.

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.

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 or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<table class="govuk-table">
  <caption class="govuk-table__caption">Dates and amounts</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Date</th>
      <th class="govuk-table__header" scope="col">Amount</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">First 6 weeks</th>
      <td class="govuk-table__cell ">£109.80 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">Next 33 weeks</th>
      <td class="govuk-table__cell ">£109.80 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">Total estimated pay</th>
      <td class="govuk-table__cell ">£4,282.20</td>
    </tr>
  </tbody>
</table>
{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  caption: "Dates and amounts",
  firstCellIsHeader: true,
  head: [
    {
      text: "Date"
    },
    {
      text: "Amount"
    }
  ],
  rows: [
    [
      {
        text: "First 6 weeks"
      },
      {
        text: "£109.80 per week"
      }
    ],
    [
      {
        text: "Next 33 weeks"
      },
      {
        text: "£109.80 per week"
      }
    ],
    [
      {
        text: "Total estimated pay"
      },
      {
        text: "£4,282.20"
      }
    ]
  ]
}) }}

You can configure this component using the Nunjucks macro arguments.

Numbers in a table

When comparing columns of numbers, align the numbers to the right in table cells.

<table class="govuk-table">
  <caption class="govuk-table__caption">Months and rates</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Month you apply</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for bicycles</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for vehicles</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">January</th>
      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">February</th>
      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">March</th>
      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
    </tr>
  </tbody>
</table>
{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  caption: "Months and rates",
  firstCellIsHeader: true,
  head: [
    {
      text: "Month you apply"
    },
    {
      text: "Rate for bicycles",
      format: "numeric"
    },
    {
      text: "Rate for vehicles",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "January"
      },
      {
        text: "£85",
        format: "numeric"
      },
      {
        text: "£95",
        format: "numeric"
      }
    ],
    [
      {
        text: "February"
      },
      {
        text: "£75",
        format: "numeric"
      },
      {
        text: "£55",
        format: "numeric"
      }
    ],
    [
      {
        text: "March"
      },
      {
        text: "£165",
        format: "numeric"
      },
      {
        text: "£125",
        format: "numeric"
      }
    ]
  ]
}) }}

You can configure this component using the Nunjucks macro arguments.

Research on this component

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

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Table’ on GitHub