GOV.UK elements Data

Consider putting content into tables to make it easier to scan.

Contents:

Numeric tabular data

Month you apply Rate for vehicles Rate for bicycles
January £165.00 £85.00
February £165.00 £85.00
March £151.25 £77.90
April £136.10 £70.10

  
    <table>
  <thead>
    <tr>
      <th scope="col">Month you apply</th>
      <th class="numeric" scope="col">Rate for vehicles</th>
      <th class="numeric" scope="col">Rate for bicycles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td class="numeric">£165.00</td>
      <td class="numeric">£85.00</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td class="numeric">£165.00</td>
      <td class="numeric">£85.00</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td class="numeric">£151.25</td>
      <td class="numeric">£77.90</td>
    </tr>
    <tr>
      <th scope="row">April</th>
      <td class="numeric">£136.10</td>
      <td class="numeric">£70.10</td>
    </tr>
  </tbody>
</table>

  

Data in a table

Not all content in tables should be right aligned.

Use a caption to describe the table in the same way you would use a heading. It can help users find, navigate and understand tables.

Dates and amounts
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
Tell the mother’s employer 28 days before they want to start maternity pay

  
    <table>
  <caption class="heading-small">Dates and amounts</caption>
  <tbody>
    <tr>
      <td>First 6 weeks</td>
      <td>£109.80 per week</td>
    </tr>
    <tr>
      <td>Next 33 weeks</td>
      <td>£109.80 per week</td>
    </tr>
    <tr>
      <td>Total estimated pay</td>
      <td>£4,282.20</td>
    </tr>
    <tr>
      <td>Tell the mother’s employer</td>
      <td>28 days before they want to start maternity pay</td>
    </tr>
  </tbody>
</table>

  

Discuss tables on the design patterns Hackpad

Data visualisation

24 Ministerial departments
80px 16px

  
    <div class="data">
  <span class="data-item bold-xxlarge">24</span>
  <span class="data-item bold-xsmall">Ministerial departments</span>
</div>

  

56/154 on GOV.UK
48px 16px

  
    <div class="data">
  <span class="data-item bold-xlarge">56/154</span>
  <span class="data-item bold-xsmall">on GOV.UK</span>
</div>

  

Examples