Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Table

Component guide

Example

Dates and amounts
Date Amount
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
HTML 
<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>
Nunjucks 

{{ govukTable({
  "caption": "Dates and amounts",
  "captionClasses": "govuk-table__caption--m",
  "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"
      }
    ]
  ]
}) }}