GOV.UK elements Data

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

Contents:

Numeric tabular data

Date Paper form Digital
25 November to 1 December 2013 2,763 1,792
2 to 8 December 2013 2,850 1,740
9 to 15 December 2013 2,388 1,683

  
    <table>
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th class="numeric" scope="col">Paper form</th>
      <th class="numeric" scope="col">Digital</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>25 November to 1 December 2013</td>
      <td class="numeric">2,763</td>
      <td class="numeric">1,792</td>
    </tr>
    <tr>
      <td>2 to 8 December 2013</td>
      <td class="numeric">2,850</td>
      <td class="numeric">1,740</td>
    </tr>
    <tr>
     <td>9 to 15 December 2013</td>
      <td class="numeric">2,388</td>
      <td class="numeric">1,683</td>
    </tr>
  </tbody>
</table>

  

Data in a table

Not all content in tables should be right aligned.

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>
  <thead>
    <tr>
      <th colspan="2">Dates and amounts</th>
    </tr>
  </thead>
  <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