Table

Adapted

Default

A default table lets users compare information in rows and columns.

Monthly energy costs
Month	Gas	Electricity
January	£85	£95
February	£75	£55
March	£165	£125

Show code

HTML
Astro
React
Svelte
Solid

<table class="govuk-table">
  <caption class="govuk-table__caption govuk-table__caption--m">
    Monthly energy costs
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Month</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Gas
      </th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Electricity
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">January</td>
      <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">
      <td class="govuk-table__cell">February</td>
      <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">
      <td class="govuk-table__cell">March</td>
      <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>

---
import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-astro";
---

<Table>
  <TableCaption size="medium">Monthly energy costs</TableCaption>
  <TableHead>
    <TableRow>
      <TableHeader>Month</TableHeader>
      <TableHeader numeric>Gas</TableHeader>
      <TableHeader numeric>Electricity</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>January</TableCell>
      <TableCell numeric>£85</TableCell>
      <TableCell numeric>£95</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>February</TableCell>
      <TableCell numeric>£75</TableCell>
      <TableCell numeric>£55</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>March</TableCell>
      <TableCell numeric>£165</TableCell>
      <TableCell numeric>£125</TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Table>
      <TableCaption size="medium">Monthly energy costs</TableCaption>
      <TableHead>
        <TableRow>
          <TableHeader>Month</TableHeader>
          <TableHeader numeric>Gas</TableHeader>
          <TableHeader numeric>Electricity</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>January</TableCell>
          <TableCell numeric>£85</TableCell>
          <TableCell numeric>£95</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>February</TableCell>
          <TableCell numeric>£75</TableCell>
          <TableCell numeric>£55</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>March</TableCell>
          <TableCell numeric>£165</TableCell>
          <TableCell numeric>£125</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

<script>
  import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Table>
  <TableCaption size="medium">Monthly energy costs</TableCaption>
  <TableHead>
    <TableRow>
      <TableHeader>Month</TableHeader>
      <TableHeader numeric>Gas</TableHeader>
      <TableHeader numeric>Electricity</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>January</TableCell>
      <TableCell numeric>£85</TableCell>
      <TableCell numeric>£95</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>February</TableCell>
      <TableCell numeric>£75</TableCell>
      <TableCell numeric>£55</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>March</TableCell>
      <TableCell numeric>£165</TableCell>
      <TableCell numeric>£125</TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Table>
      <TableCaption size="medium">Monthly energy costs</TableCaption>
      <TableHead>
        <TableRow>
          <TableHeader>Month</TableHeader>
          <TableHeader numeric>Gas</TableHeader>
          <TableHeader numeric>Electricity</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>January</TableCell>
          <TableCell numeric>£85</TableCell>
          <TableCell numeric>£95</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>February</TableCell>
          <TableCell numeric>£75</TableCell>
          <TableCell numeric>£55</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>March</TableCell>
          <TableCell numeric>£165</TableCell>
          <TableCell numeric>£125</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Subtle

Use a subtle table to reduce its prominence when it is not the main focus of the page.

Monthly energy costs
Month	Gas	Electricity
January	£85	£95
February	£75	£55
March	£165	£125

Show code

HTML
Astro
React
Svelte
Solid

<table class="govuk-table govuk-table--subtle">
  <caption class="govuk-table__caption govuk-table__caption--m">
    Monthly energy costs
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Month</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Gas
      </th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Electricity
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">January</td>
      <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">
      <td class="govuk-table__cell">February</td>
      <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">
      <td class="govuk-table__cell">March</td>
      <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>

---
import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-astro";
---

<Table subtle>
  <TableCaption size="medium">Monthly energy costs</TableCaption>
  <TableHead>
    <TableRow>
      <TableHeader>Month</TableHeader>
      <TableHeader numeric>Gas</TableHeader>
      <TableHeader numeric>Electricity</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>January</TableCell>
      <TableCell numeric>£85</TableCell>
      <TableCell numeric>£95</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>February</TableCell>
      <TableCell numeric>£75</TableCell>
      <TableCell numeric>£55</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>March</TableCell>
      <TableCell numeric>£165</TableCell>
      <TableCell numeric>£125</TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Table subtle>
      <TableCaption size="medium">Monthly energy costs</TableCaption>
      <TableHead>
        <TableRow>
          <TableHeader>Month</TableHeader>
          <TableHeader numeric>Gas</TableHeader>
          <TableHeader numeric>Electricity</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>January</TableCell>
          <TableCell numeric>£85</TableCell>
          <TableCell numeric>£95</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>February</TableCell>
          <TableCell numeric>£75</TableCell>
          <TableCell numeric>£55</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>March</TableCell>
          <TableCell numeric>£165</TableCell>
          <TableCell numeric>£125</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

<script>
  import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Table subtle>
  <TableCaption size="medium">Monthly energy costs</TableCaption>
  <TableHead>
    <TableRow>
      <TableHeader>Month</TableHeader>
      <TableHeader numeric>Gas</TableHeader>
      <TableHeader numeric>Electricity</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>January</TableCell>
      <TableCell numeric>£85</TableCell>
      <TableCell numeric>£95</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>February</TableCell>
      <TableCell numeric>£75</TableCell>
      <TableCell numeric>£55</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>March</TableCell>
      <TableCell numeric>£165</TableCell>
      <TableCell numeric>£125</TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Table, TableCaption, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Table subtle>
      <TableCaption size="medium">Monthly energy costs</TableCaption>
      <TableHead>
        <TableRow>
          <TableHeader>Month</TableHeader>
          <TableHeader numeric>Gas</TableHeader>
          <TableHeader numeric>Electricity</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>January</TableCell>
          <TableCell numeric>£85</TableCell>
          <TableCell numeric>£95</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>February</TableCell>
          <TableCell numeric>£75</TableCell>
          <TableCell numeric>£55</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>March</TableCell>
          <TableCell numeric>£165</TableCell>
          <TableCell numeric>£125</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

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.