Skip to main contentComponents
Table
Use the table component to make information easier to compare and scan for users.
Dates and amounts|
| £109.80 per week |
| £109.80 per week |
| £4,282.20 |
Props
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. 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.
To use a custom caption, supply your element to the prop. (Supplying a string will receive standard styling with the govuk-table__caption--m class.)
Months and rates|
| £95 |
| £55 |
| £125 |
Stories
Standard
A standard Table.
|
| £109.80 per week |
| £109.80 per week |
| £4,282.20 |
Numbers in a table
IMPLEMENT ME.
Custom column widths
IMPLEMENT ME.
<table class="govuk-table">
<caption
class="govuk-table__caption govuk-table__caption--m"
>
Dates and amounts
</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">
Date
</th>
<th scope="col" class="govuk-table__header">
Amount
</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
First 6 weeks
</th>
<td class="govuk-table__cell">
£109.80 per week
</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
Next 33 weeks
</th>
<td class="govuk-table__cell">
£109.80 per week
</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
Total estimated pay
</th>
<td class="govuk-table__cell">£4,282.20</td>
</tr>
</tbody>
</table>
<Table
caption="Dates and amounts"
data={[
{
amount: "£109.80 per week",
date: "First 6 weeks",
},
{
amount: "£109.80 per week",
date: "Next 33 weeks",
},
{
amount: "£4,282.20",
date: "Total estimated pay",
},
]}
headings={{
amount: "Amount",
date: "Date",
}}
keys={["date", "amount"]}
/>
<table class="govuk-table">
<caption
class="govuk-table__caption govuk-table__caption--l"
>
Months and rates
</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">
Month you apply
</th>
<th scope="col" class="govuk-table__header">
Rate for vehicles
</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
January
</th>
<td class="govuk-table__cell">£95</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
February
</th>
<td class="govuk-table__cell">£55</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
March
</th>
<td class="govuk-table__cell">£125</td>
</tr>
</tbody>
</table>
<Table
caption={
<caption className="govuk-table__caption govuk-table__caption--l">
Months and rates
</caption>
}
data={[
{
month: "January",
rate: "£95",
},
{
month: "February",
rate: "£55",
},
{
month: "March",
rate: "£125",
},
]}
headings={{
month: "Month you apply",
rate: "Rate for vehicles",
}}
keys={["month", "rate"]}
/>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">
Date
</th>
<th scope="col" class="govuk-table__header">
Amount
</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
First 6 weeks
</th>
<td class="govuk-table__cell">
£109.80 per week
</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
Next 33 weeks
</th>
<td class="govuk-table__cell">
£109.80 per week
</td>
</tr>
<tr class="govuk-table__row">
<th scope="row" class="govuk-table__header">
Total estimated pay
</th>
<td class="govuk-table__cell">£4,282.20</td>
</tr>
</tbody>
</table>
<Table
data={[
{
amount: "£109.80 per week",
date: "First 6 weeks",
},
{
amount: "£109.80 per week",
date: "Next 33 weeks",
},
{
amount: "£4,282.20",
date: "Total estimated pay",
},
]}
headings={{
amount: "Amount",
date: "Date",
}}
keys={["date", "amount"]}
/>