GOV.UK elements Data

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

Contents:

Numeric tabular data

• when comparing rows of numbers, align numbers to the right in table cells
• use the GOV.UK frontend toolkit’s tabular numbers to allow numbers of the same width to be more easily compared

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 Dropbox Paper

Data visualisation

• data is recommended as an alternative to using images
• for screen readers, ensure the data value appears first so it makes sense when read aloud

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

• see an example of table usage on GOV.UK
• see an example of numeric table usage on GOV.UK