GOVUK Table

An example of the govuk table component.

Open example in new window
HTML 

  <table class="govuk-table">

  <caption class="govuk-table__caption">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>
Jinja 
{% from "govuk_frontend_jinja/components/table/macro.html" 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"
        }
      ]
    ]
}) }}