Table

Table

(open in a new window)

Code

Markup

<table class="govuk-table">
  <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>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "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"
      }
    ]
  ]
}) }}

Table table with head

(open in a new window)

Code

Markup

<table class="govuk-table">
  <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 govuk-table__header--numeric">Rate for bicycles</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</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>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "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"
      }
    ]
  ]
}) }}

Table table with head and caption

(open in a new window)

Code

Markup

<table class="govuk-table">
  <caption class="govuk-table__caption govuk-heading-m">Caption 1: 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 govuk-table__header--numeric">Rate for bicycles</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">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 govuk-table__cell--numeric">£85</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
        </tr>
        <tr class="govuk-table__row">
          <th scope="row" class="govuk-table__header">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 scope="row" class="govuk-table__header">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>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "caption": "Caption 1: Months and rates",
  "captionClasses": "govuk-heading-m",
  "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"
      }
    ]
  ]
}) }}