Skip to main content
  1. X-GOVUK projects
  2. GOV.UK Components
  3. Table

Table

Use the table component to make information easier to compare and scan for users.

Building a table row by row

Tables can be declared similarly to how they’d be built in HTML, by declaring the caption, head, body, rows and cells.

Tables can have one caption which should be used to describe the contents of the table.

The head and body are created using the head and body slots and can each contain one or more row elements. Each row can contain multiple cell elements.

By default cell will create a <td> element. When header: true is passed in it will create a <th>. Cells values can be set using the text: argument or by passing in a block of HTML.

Input

= govuk_table do |table|
  - table.with_caption(size: 'm', text: 'List of Pokémon')

  - table.with_head do |head|
    - head.with_row do |row|
      - row.with_cell(text: 'Name')
      - row.with_cell(text: 'Types')
      - row.with_cell(text: 'Pokédex number', numeric: true)

  - table.with_body do |body|
    - body.with_row do |row|
      - row.with_cell(text: 'Bulbasaur')
      - row.with_cell(text: 'Grass, Poison')
      - row.with_cell(text: '1', numeric: true)

    - body.with_row do |row|
      - row.with_cell(text: 'Charmander')
      - row.with_cell(text: 'Fire')
      - row.with_cell(text: '4', numeric: true)

    - body.with_row do |row|
      - row.with_cell { 'Squirtle' }
      - row.with_cell { 'Water' }
      - row.with_cell(numeric: true) { '7' }
<%= govuk_table do |table|
table.with_caption(size: 'm', text: 'List of Pokémon')

table.with_head do |head|
head.with_row do |row|
row.with_cell(text: 'Name')
row.with_cell(text: 'Types')
row.with_cell(text: 'Pokédex number', numeric: true)

end; end; table.with_body do |body|
body.with_row do |row|
row.with_cell(text: 'Bulbasaur')
row.with_cell(text: 'Grass, Poison')
row.with_cell(text: '1', numeric: true)

end; body.with_row do |row|
row.with_cell(text: 'Charmander')
row.with_cell(text: 'Fire')
row.with_cell(text: '4', numeric: true)

end; body.with_row do |row|
row.with_cell { 'Squirtle' }
row.with_cell { 'Water' }
row.with_cell(numeric: true) { '7' }
end; end; end %>

Output

List of Pokémon
Name Types Pokédex number
Bulbasaur Grass, Poison 1
Charmander Fire 4
Squirtle Water 7 
<table class="govuk-table">
  <caption class="govuk-table__caption govuk-table__caption--m">
    List of Pokémon
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">
        Name
      </th>
      <th class="govuk-table__header" scope="col">
        Types
      </th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Pokédex number
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Bulbasaur
      </td>
      <td class="govuk-table__cell">
        Grass, Poison
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        1
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Charmander
      </td>
      <td class="govuk-table__cell">
        Fire
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        4
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Squirtle
      </td>
      <td class="govuk-table__cell">
        Water
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        7
      </td>
    </tr>
  </tbody>
</table>

Tables with header columns

To make a column of headers, pass header: true to the first cell on each row in the body.

Input

= govuk_table do |table|
  - table.with_caption(size: 'm', text: 'List of Pokémon generations')

  - table.with_head do |head|
    - head.with_row do |row|
      - row.with_cell(text: 'Generation')
      - row.with_cell(text: 'Years')

  - table.with_body do |body|
    - body.with_row do |row|
      - row.with_cell(header: true, text: 'Generation 1')
      - row.with_cell(text: '1996-1999')

    - body.with_row do |row|
      - row.with_cell(header: true, text: 'Generation 2')
      - row.with_cell(text: '1999-2002')

    - body.with_row do |row|
      - row.with_cell(header: true, text: 'Generation 3')
      - row.with_cell(text: '2002-2006')

    - body.with_row do |row|
      - row.with_cell(header: true, text: 'Generation 4')
      - row.with_cell(text: '2006-2010')
<%= govuk_table do |table|
table.with_caption(size: 'm', text: 'List of Pokémon generations')

table.with_head do |head|
head.with_row do |row|
row.with_cell(text: 'Generation')
row.with_cell(text: 'Years')

end; end; table.with_body do |body|
body.with_row do |row|
row.with_cell(header: true, text: 'Generation 1')
row.with_cell(text: '1996-1999')

end; body.with_row do |row|
row.with_cell(header: true, text: 'Generation 2')
row.with_cell(text: '1999-2002')

end; body.with_row do |row|
row.with_cell(header: true, text: 'Generation 3')
row.with_cell(text: '2002-2006')

end; body.with_row do |row|
row.with_cell(header: true, text: 'Generation 4')
row.with_cell(text: '2006-2010')
end; end; end %>

Output

List of Pokémon generations
Generation Years
Generation 1 1996-1999
Generation 2 1999-2002
Generation 3 2002-2006
Generation 4 2006-2010 
<table class="govuk-table">
  <caption class="govuk-table__caption govuk-table__caption--m">
    List of Pokémon generations
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">
        Generation
      </th>
      <th class="govuk-table__header" scope="col">
        Years
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Generation 1
      </th>
      <td class="govuk-table__cell">
        1996-1999
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Generation 2
      </th>
      <td class="govuk-table__cell">
        1999-2002
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Generation 3
      </th>
      <td class="govuk-table__cell">
        2002-2006
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Generation 4
      </th>
      <td class="govuk-table__cell">
        2006-2010
      </td>
    </tr>
  </tbody>
</table>

Building a table from arrays

If you want to build a table without advanced options, you can pass in an array of arrays via the rows argument. Each element in the outer array represents a row and each element in the inner array represents a cell.

You can set the header columns explicitly by passing an array of headers using the head argument. If nothing is set, the first row will be used for headers.

The first_cell_is_header parameter can be used to change the first column in the table body to header cells with scope='row'.

An optional foot parameter can be used to render a table footer. Footers are usually used provide a summary of the table’s contents. They are not part of the GOV.UK Design System so custom styles will be required.

Input

= govuk_table(caption: "Helioptile statistics", head:, rows:, foot:, first_cell_is_header: true)
<%= govuk_table(caption: "Helioptile statistics", head:, rows:, foot:, first_cell_is_header: true) %>
{
  head: [  "Name",          { text: "Rating", numeric: true }],
  rows: [
          ["Health Points", { text: 44, numeric: true }],
          ["Attack",        { text: 38, numeric: true }],
          ["Defence",       { text: 33, numeric: true }],
          ["Speed",         { text: 70, numeric: true }],
        ],
  foot: [  "Total",         { text: 44 + 38 + 33 + 70, numeric: true }]
}

Output

Helioptile statistics
Name Rating
Health Points 44
Attack 38
Defence 33
Speed 70
Total 185 
<table class="govuk-table">
  <caption class="govuk-table__caption govuk-table__caption--m">
    Helioptile statistics
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">
        Name
      </th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">
        Rating
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Health Points
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        44
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Attack
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        38
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Defence
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        33
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Speed
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        70
      </td>
    </tr>
  </tbody>
  <tfoot class="govuk-table__foot">
    <tr class="govuk-table__row">
      <th class="govuk-table__footer" scope="row">
        Total
      </th>
      <td class="govuk-table__footer govuk-table__footer--numeric">
        185
      </td>
    </tr>
  </tfoot>
</table>

Table with resized columns

By default the table will automatically size the columns to avoid wrapping. This can make tables with lots of data feel cramped.

We can avoid this by setting the width of cells. We only need to set it once per column and usually this is set in the head section.

The options available are one-quarter, one-third, one-half, two-thirds, three-quarters and full.

Input

= govuk_table do |table|
  - table.with_caption(size: 'm', text: 'List of Pokémon with descriptions')

  - table.with_head do |head|
    - head.with_row do |row|
      - row.with_cell(text: 'Name', width: 'one-third')
      - row.with_cell(text: 'Description')

  - table.with_body do |body|
    - body.with_row do |row|
      - row.with_cell(text: 'Blastoise')
      - row.with_cell(text: 'Blastoise is a portmanteau of "blast" and "tortoise". It is the mascot of Pokémon Blue.')

    - body.with_row do |row|
      - row.with_cell(text: 'Spearow')
      - row.with_cell(text: 'Spearows eat bugs in grassy areas and have to flap their short wings at high-speed to stay airborne.')

    - body.with_row do |row|
      - row.with_cell(text: 'Tangela')
      - row.with_cell(text: %(Blue plant vines cloak the Pokémon's identity in a tangled mass.))
<%= govuk_table do |table|
table.with_caption(size: 'm', text: 'List of Pokémon with descriptions')

table.with_head do |head|
head.with_row do |row|
row.with_cell(text: 'Name', width: 'one-third')
row.with_cell(text: 'Description')

end; end; table.with_body do |body|
body.with_row do |row|
row.with_cell(text: 'Blastoise')
row.with_cell(text: 'Blastoise is a portmanteau of "blast" and "tortoise". It is the mascot of Pokémon Blue.')

end; body.with_row do |row|
row.with_cell(text: 'Spearow')
row.with_cell(text: 'Spearows eat bugs in grassy areas and have to flap their short wings at high-speed to stay airborne.')

end; body.with_row do |row|
row.with_cell(text: 'Tangela')
row.with_cell(text: %(Blue plant vines cloak the Pokémon's identity in a tangled mass.))
end; end; end %>

Output

List of Pokémon with descriptions
Name Description
Blastoise Blastoise is a portmanteau of “blast” and “tortoise”. It is the mascot of Pokémon Blue.
Spearow Spearows eat bugs in grassy areas and have to flap their short wings at high-speed to stay airborne.
Tangela Blue plant vines cloak the Pokémon’s identity in a tangled mass. 
<table class="govuk-table">
  <caption class="govuk-table__caption govuk-table__caption--m">
    List of Pokémon with descriptions
  </caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header one-third" scope="col">
        Name
      </th>
      <th class="govuk-table__header" scope="col">
        Description
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Blastoise
      </td>
      <td class="govuk-table__cell">
        Blastoise is a portmanteau of "blast" and "tortoise". It is the mascot of Pokémon Blue.
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Spearow
      </td>
      <td class="govuk-table__cell">
        Spearows eat bugs in grassy areas and have to flap their short wings at high-speed to stay airborne.
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        Tangela
      </td>
      <td class="govuk-table__cell">
        Blue plant vines cloak the Pokémon's identity in a tangled mass.
      </td>
    </tr>
  </tbody>
</table>

Complex tables

Sometimes we need to build tables that have more two dimensions. To make these tables accessible we can use <colgroup> and <col> elements to describe the groups of columns, and we can add extra table headers with scopes to describe each axis.

Columns can be made to stretch across multiple rows with the rowspan and columns with the colspan parameters.

Input

= govuk_table(html_attributes: { class: 'starter-pokemon-weights' }) do |table|
  - table.with_caption(text: 'Starter Pokémon weights in kilograms by level, type and generation')

  - table.with_colgroup do |colgroup|
    - colgroup.with_col(span: 1)

    - colgroup.with_col(span: 3, html_attributes: { class: 'generation-1' })
    - colgroup.with_col(span: 3, html_attributes: { class: 'generation-2' })

  - table.with_head do |head|
    - head.with_row do |row|
      - row.with_cell(scope: false, html_attributes: { class: 'no-border-bottom' })

      - row.with_cell(text: 'Generation 1', colspan: 3, scope: 'colgroup', html_attributes: { class: 'generation-heading border-left' })
      - row.with_cell(text: 'Generation 2', colspan: 3, scope: 'colgroup', html_attributes: { class: 'generation-heading border-left' })

    - head.with_row do |row|
      - row.with_cell(text: 'Levels', html_attributes: { class: 'thick-border-bottom' })

      - row.with_cell(text: govuk_tag(text: 'Grass', colour: 'green'), numeric: true, html_attributes: { class: 'border-left thick-border-bottom' })
      - row.with_cell(text: govuk_tag(text: 'Fire', colour: 'red'),    numeric: true, html_attributes: { class: 'thick-border-bottom' })
      - row.with_cell(text: govuk_tag(text: 'Water', colour: 'blue'),  numeric: true, html_attributes: { class: 'thick-border-bottom' })

      - row.with_cell(text: govuk_tag(text: 'Grass', colour: 'green'), numeric: true, html_attributes: { class: 'border-left thick-border-bottom' })
      - row.with_cell(text: govuk_tag(text: 'Fire', colour: 'yellow'), numeric: true, html_attributes: { class: 'thick-border-bottom' })
      - row.with_cell(text: govuk_tag(text: 'Water', colour: 'blue'),  numeric: true, html_attributes: { class: 'thick-border-bottom' })

  - table.with_body do |body|
    - body.with_row do |row|
      - row.with_cell(header: true, text: 'Level 1-15')

      - row.with_cell(text: '6.9',   numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '8.5',   numeric: true)
      - row.with_cell(text: '9',     numeric: true)

      - row.with_cell(text: '6.5',   numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '7.9',   numeric: true)
      - row.with_cell(text: '9.5',   numeric: true)

    - body.with_row do |row|
      - row.with_cell(header: true,  text: 'Level 16-31')

      - row.with_cell(text: '13',    numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '19',    numeric: true)
      - row.with_cell(text: '22.5',  numeric: true)

      - row.with_cell(text: '15.8',  numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '19',    numeric: true)
      - row.with_cell(text: '25',    numeric: true)

    - body.with_row do |row|
      - row.with_cell(header: true,  text: 'Level 32-100')

      - row.with_cell(text: '100',   numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '90.5',  numeric: true)
      - row.with_cell(text: '85.5',  numeric: true)

      - row.with_cell(text: '100.5', numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '79.5',  numeric: true)
      - row.with_cell(text: '88.8',  numeric: true)

  - table.with_foot do |foot|
    - foot.with_row do |row|
      - row.with_cell(header: true, text: 'All levels')

      - row.with_cell(text: '119.9', numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '118', numeric: true)
      - row.with_cell(text: '117', numeric: true)

      - row.with_cell(text: '122.8', numeric: true, html_attributes: { class: 'border-left' })
      - row.with_cell(text: '106.4', numeric: true)
      - row.with_cell(text: '123.3', numeric: true)
<%= govuk_table(html_attributes: { class: 'starter-pokemon-weights' }) do |table|
table.with_caption(text: 'Starter Pokémon weights in kilograms by level, type and generation')

table.with_colgroup do |colgroup|
colgroup.with_col(span: 1)

colgroup.with_col(span: 3, html_attributes: { class: 'generation-1' })
colgroup.with_col(span: 3, html_attributes: { class: 'generation-2' })

end; table.with_head do |head|
head.with_row do |row|
row.with_cell(scope: false, html_attributes: { class: 'no-border-bottom' })

row.with_cell(text: 'Generation 1', colspan: 3, scope: 'colgroup', html_attributes: { class: 'generation-heading border-left' })
row.with_cell(text: 'Generation 2', colspan: 3, scope: 'colgroup', html_attributes: { class: 'generation-heading border-left' })

end; head.with_row do |row|
row.with_cell(text: 'Levels', html_attributes: { class: 'thick-border-bottom' })

row.with_cell(text: govuk_tag(text: 'Grass', colour: 'green'), numeric: true, html_attributes: { class: 'border-left thick-border-bottom' })
row.with_cell(text: govuk_tag(text: 'Fire', colour: 'red'),    numeric: true, html_attributes: { class: 'thick-border-bottom' })
row.with_cell(text: govuk_tag(text: 'Water', colour: 'blue'),  numeric: true, html_attributes: { class: 'thick-border-bottom' })

row.with_cell(text: govuk_tag(text: 'Grass', colour: 'green'), numeric: true, html_attributes: { class: 'border-left thick-border-bottom' })
row.with_cell(text: govuk_tag(text: 'Fire', colour: 'yellow'), numeric: true, html_attributes: { class: 'thick-border-bottom' })
row.with_cell(text: govuk_tag(text: 'Water', colour: 'blue'),  numeric: true, html_attributes: { class: 'thick-border-bottom' })

end; end; table.with_body do |body|
body.with_row do |row|
row.with_cell(header: true, text: 'Level 1-15')

row.with_cell(text: '6.9',   numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '8.5',   numeric: true)
row.with_cell(text: '9',     numeric: true)

row.with_cell(text: '6.5',   numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '7.9',   numeric: true)
row.with_cell(text: '9.5',   numeric: true)

end; body.with_row do |row|
row.with_cell(header: true,  text: 'Level 16-31')

row.with_cell(text: '13',    numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '19',    numeric: true)
row.with_cell(text: '22.5',  numeric: true)

row.with_cell(text: '15.8',  numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '19',    numeric: true)
row.with_cell(text: '25',    numeric: true)

end; body.with_row do |row|
row.with_cell(header: true,  text: 'Level 32-100')

row.with_cell(text: '100',   numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '90.5',  numeric: true)
row.with_cell(text: '85.5',  numeric: true)

row.with_cell(text: '100.5', numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '79.5',  numeric: true)
row.with_cell(text: '88.8',  numeric: true)

end; end; table.with_foot do |foot|
foot.with_row do |row|
row.with_cell(header: true, text: 'All levels')

row.with_cell(text: '119.9', numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '118', numeric: true)
row.with_cell(text: '117', numeric: true)

row.with_cell(text: '122.8', numeric: true, html_attributes: { class: 'border-left' })
row.with_cell(text: '106.4', numeric: true)
row.with_cell(text: '123.3', numeric: true)
end; end; end %>

Output

Starter Pokémon weights in kilograms by level, type and generation
Generation 1 Generation 2
Levels Grass Fire Water Grass Fire Water
Level 1-15 6.9 8.5 9 6.5 7.9 9.5
Level 16-31 13 19 22.5 15.8 19 25
Level 32-100 100 90.5 85.5 100.5 79.5 88.8
All levels 119.9 118 117 122.8 106.4 123.3 
<table class="govuk-table starter-pokemon-weights">
  <caption class="govuk-table__caption govuk-table__caption--m">
    Starter Pokémon weights in kilograms by level, type and generation
  </caption>
  <colgroup>
    <col span="1">
    <col span="3" class="generation-1">
    <col span="3" class="generation-2">
  </colgroup>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header no-border-bottom">
      </th>
      <th class="govuk-table__header generation-heading border-left" scope="colgroup" colspan="3">
        Generation 1
      </th>
      <th class="govuk-table__header generation-heading border-left" scope="colgroup" colspan="3">
        Generation 2
      </th>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header thick-border-bottom" scope="col">
        Levels
      </th>
      <th class="govuk-table__header govuk-table__header--numeric border-left thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--green">
          Grass
        </strong>
      </th>
      <th class="govuk-table__header govuk-table__header--numeric thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--red">
          Fire
        </strong>
      </th>
      <th class="govuk-table__header govuk-table__header--numeric thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--blue">
          Water
        </strong>
      </th>
      <th class="govuk-table__header govuk-table__header--numeric border-left thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--green">
          Grass
        </strong>
      </th>
      <th class="govuk-table__header govuk-table__header--numeric thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--yellow">
          Fire
        </strong>
      </th>
      <th class="govuk-table__header govuk-table__header--numeric thick-border-bottom" scope="col">
        <strong class="govuk-tag govuk-tag--blue">
          Water
        </strong>
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Level 1-15
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        6.9
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        8.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        9
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        6.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        7.9
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        9.5
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Level 16-31
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        13
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        19
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        22.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        15.8
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        19
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        25
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="row">
        Level 32-100
      </th>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        100
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        90.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        85.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric border-left">
        100.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        79.5
      </td>
      <td class="govuk-table__cell govuk-table__cell--numeric">
        88.8
      </td>
    </tr>
  </tbody>
  <tfoot class="govuk-table__foot">
    <tr class="govuk-table__row">
      <th class="govuk-table__footer" scope="row">
        All levels
      </th>
      <td class="govuk-table__footer govuk-table__footer--numeric border-left">
        119.9
      </td>
      <td class="govuk-table__footer govuk-table__footer--numeric">
        118
      </td>
      <td class="govuk-table__footer govuk-table__footer--numeric">
        117
      </td>
      <td class="govuk-table__footer govuk-table__footer--numeric border-left">
        122.8
      </td>
      <td class="govuk-table__footer govuk-table__footer--numeric">
        106.4
      </td>
      <td class="govuk-table__footer govuk-table__footer--numeric">
        123.3
      </td>
    </tr>
  </tfoot>
</table>