Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Tables

These examples are used for automated tests and may not follow service manual best practice.

Tables default

Open this example in a new tab: Tables default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ]
}) }}

Tables compact default

Open this example in a new tab: Tables compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true
}) }}

Tables striped default

Open this example in a new tab: Tables striped default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact default

Open this example in a new tab: Tables striped compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive default

Open this example in a new tab: Tables responsive default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact default

Open this example in a new tab: Tables responsive compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped default

Open this example in a new tab: Tables responsive striped default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact default

Open this example in a new tab: Tables responsive striped compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse default

Open this example in a new tab: Tables reverse default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact default

Open this example in a new tab: Tables reverse compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped default

Open this example in a new tab: Tables reverse striped default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact default

Open this example in a new tab: Tables reverse striped compact default

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Impetigo can look similar to other skin conditions
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Skin symptoms
      </th>
      <th class="nhsuk-table__header" scope="col">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Blisters on lips or around the mouth
      </th>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy, dry, cracked, sore
      </th>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Itchy blisters
      </th>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables scrolling

Open this example in a new tab: Tables scrolling

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-caption">
    <table class="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ]
}) }}

Tables striped scrolling

Open this example in a new tab: Tables striped scrolling

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-caption">
    <table class="nhsuk-table nhsuk-table--striped">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  striped: true
}) }}

Tables reverse scrolling

Open this example in a new tab: Tables reverse scrolling

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll nhsuk-scroll--reverse" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-caption">
    <table class="nhsuk-table nhsuk-table--reverse">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables scrolling as a card

Open this example in a new tab: Tables scrolling as a card

Leeds

Edit (Leeds)
Vaccine types (12 months)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--no-last-row-border">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)
          </caption>
          <thead class="nhsuk-table__head">
            <tr class="nhsuk-table__row">
              <th class="nhsuk-table__header" scope="col">
                Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ]
}) }}

Tables striped scrolling as a card

Open this example in a new tab: Tables striped scrolling as a card

Leeds

Edit (Leeds)
Vaccine types (12 months)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)
          </caption>
          <thead class="nhsuk-table__head">
            <tr class="nhsuk-table__row">
              <th class="nhsuk-table__header" scope="col">
                Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col">
                Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ],
  striped: true
}) }}

Tables responsive scrolling as a card

Open this example in a new tab: Tables responsive scrolling as a card

Leeds

Edit (Leeds)
Vaccine types (12 months)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border" role="table">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)
          </caption>
          <thead class="nhsuk-table__head" role="rowgroup">
            <tr class="nhsuk-table__row" role="row">
              <th class="nhsuk-table__header" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ],
  responsive: true
}) }}

Tables scrolling (full width)

Open this example in a new tab: Tables scrolling (full width)

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-full-width-caption">
    <table class="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-full-width-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ]
}) }}

Tables striped scrolling (full width)

Open this example in a new tab: Tables striped scrolling (full width)

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-full-width-caption">
    <table class="nhsuk-table nhsuk-table--striped">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-full-width-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  striped: true
}) }}

Tables reverse scrolling (full width)

Open this example in a new tab: Tables reverse scrolling (full width)

Childhood vaccination coverage by nation
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll nhsuk-scroll--reverse" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-full-width-caption">
    <table class="nhsuk-table nhsuk-table--reverse">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-full-width-caption">
        Childhood vaccination coverage by nation
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation"
    },
    {
      text: "2013 to 2014",
      format: "numeric"
    },
    {
      text: "2014 to 2015",
      format: "numeric"
    },
    {
      text: "2015 to 2016",
      format: "numeric"
    },
    {
      text: "2016 to 2017",
      format: "numeric"
    },
    {
      text: "2017 to 2018",
      format: "numeric"
    },
    {
      text: "2018 to 2019",
      format: "numeric"
    },
    {
      text: "2019 to 2020",
      format: "numeric"
    },
    {
      text: "2020 to 2021",
      format: "numeric"
    },
    {
      text: "2021 to 2022",
      format: "numeric"
    },
    {
      text: "2022 to 2023",
      format: "numeric"
    },
    {
      text: "2023 to 2024",
      format: "numeric"
    },
    {
      text: "2024 to 2025",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables scrolling sortable

Open this example in a new tab: Tables scrolling sortable

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-caption">
    <table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ]
}) }}

Tables striped scrolling sortable

Open this example in a new tab: Tables striped scrolling sortable

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-caption">
    <table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  striped: true
}) }}

Tables reverse scrolling sortable

Open this example in a new tab: Tables reverse scrolling sortable

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll nhsuk-scroll--reverse" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-caption">
    <table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables scrolling sortable as a card

Open this example in a new tab: Tables scrolling sortable as a card

Leeds

Edit (Leeds)
Vaccine types (12 months) (Column headers are sortable)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--sortable" data-module="nhsuk-table">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
          </caption>
          <thead class="nhsuk-table__head">
            <tr class="nhsuk-table__row">
              <th class="nhsuk-table__header" scope="col">
                Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ]
}) }}

Tables striped scrolling sortable as a card

Open this example in a new tab: Tables striped scrolling sortable as a card

Leeds

Edit (Leeds)
Vaccine types (12 months) (Column headers are sortable)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
          </caption>
          <thead class="nhsuk-table__head">
            <tr class="nhsuk-table__row">
              <th class="nhsuk-table__header" scope="col">
                Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" data-sort data-sort-next="descending">
                Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row">
              <td class="nhsuk-table__cell">
                Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left">
                85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ],
  striped: true
}) }}

Tables responsive scrolling sortable as a card

Open this example in a new tab: Tables responsive scrolling sortable as a card

Leeds

Edit (Leeds)
Vaccine types (12 months) (Column headers are sortable)
Location 6‑in‑1 MenB Pneumococcal Rotavirus
England 91.30% 91.00% 93.10% 88.80%
Yorkshire 91.90% 91.80% 94.20% 89.20%
Leeds 88.40% 88.50% 92.20% 85.60%
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__heading-container">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Leeds
    </h2>
    <div class="nhsuk-card__actions">
      <a class="nhsuk-link" href="#/view/leeds">Edit<span class="nhsuk-u-visually-hidden"> (Leeds)</span></a>
    </div>
  </div>
  <div class="nhsuk-card__content">
    <div class="nhsuk-scroll" data-module="nhsuk-scroll">
      <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-card-caption">
        <table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--sortable" data-module="nhsuk-table" role="table">
          <caption class="nhsuk-table__caption nhsuk-table__caption--s" id="scrolling-card-caption">
            Vaccine types (12 months)<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
          </caption>
          <thead class="nhsuk-table__head" role="rowgroup">
            <tr class="nhsuk-table__row" role="row">
              <th class="nhsuk-table__header" scope="col" role="columnheader">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Location
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader" data-sort data-sort-next="descending">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>6‑in‑1
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader" data-sort data-sort-next="descending">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>MenB
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader" data-sort data-sort-next="descending">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>Pneumococcal
              </th>
              <th class="nhsuk-table__header nhsuk-table__header--numeric nhsuk-u-text-align-left" scope="col" role="columnheader" data-sort data-sort-next="descending">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>Rotavirus
              </th>
            </tr>
          </thead>
          <tbody class="nhsuk-table__body">
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>England
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>91.30%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>91.00%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>93.10%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>88.80%
              </td>
            </tr>
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Yorkshire
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>91.90%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>91.80%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>94.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>89.20%
              </td>
            </tr>
            <tr class="nhsuk-table__row" role="row">
              <td class="nhsuk-table__cell" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Location </span>Leeds
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">6‑in‑1 </span>88.40%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">MenB </span>88.50%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Pneumococcal </span>92.20%
              </td>
              <td class="nhsuk-table__cell nhsuk-table__cell--numeric nhsuk-u-text-align-left" role="cell">
                <span class="nhsuk-table__heading" aria-hidden="true">Rotavirus </span>85.60%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Leeds",
      size: "m"
    },
    actions: {
      items: [
        {
          text: "Edit",
          href: "#/view/leeds"
        }
      ]
    }
  },
  caption: {
    id: "scrolling-card-caption",
    text: "Vaccine types (12 months)",
    size: "s"
  },
  lastRowBorder: false,
  scroll: true,
  head: [
    {
      text: "Location"
    },
    {
      text: "6‑in‑1",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "MenB",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Pneumococcal",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "Rotavirus",
      format: "numeric",
      align: "left",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "91.30%"
      },
      {
        text: "91.00%"
      },
      {
        text: "93.10%"
      },
      {
        text: "88.80%"
      }
    ],
    [
      {
        text: "Yorkshire"
      },
      {
        text: "91.90%"
      },
      {
        text: "91.80%"
      },
      {
        text: "94.20%"
      },
      {
        text: "89.20%"
      }
    ],
    [
      {
        text: "Leeds"
      },
      {
        text: "88.40%"
      },
      {
        text: "88.50%"
      },
      {
        text: "92.20%"
      },
      {
        text: "85.60%"
      }
    ]
  ],
  responsive: true
}) }}

Tables scrolling sortable (full width)

Open this example in a new tab: Tables scrolling sortable (full width)

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-full-width-caption">
    <table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-full-width-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ]
}) }}

Tables striped scrolling sortable (full width)

Open this example in a new tab: Tables striped scrolling sortable (full width)

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-full-width-caption">
    <table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-full-width-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  striped: true
}) }}

Tables reverse scrolling sortable (full width)

Open this example in a new tab: Tables reverse scrolling sortable (full width)

Childhood vaccination coverage by nation (Column headers are sortable)
Nation 2013 to 2014 2014 to 2015 2015 to 2016 2016 to 2017 2017 to 2018 2018 to 2019 2019 to 2020 2020 to 2021 2021 to 2022 2022 to 2023 2023 to 2024 2024 to 2025
England 94.34% 94.23% 93.56% 93.41% 93.12% 92.09% 92.57% 92.04% 91.84% 91.80% 91.22% 91.30%
Northern Ireland 97.48% 96.84% 97.22% 97.04% 96.20% 94.52% 94.45% 94.53% 93.52% 93.10% 91.80% 91.00%
Scotland 97.51% 97.39% 97.15% 96.77% 96.51% 95.80% 96.23% 96.54% 96.32% 95.55% 94.84% 94.50%
Wales 96.70% 96.57% 96.57% 96.34% 95.92% 95.42% 95.77% 95.56% 95.18% 94.47% 94.19% 94.10%
Code

Markup

<div class="nhsuk-scroll nhsuk-scroll--reverse" data-module="nhsuk-scroll">
  <div class="nhsuk-scroll__content" role="region" aria-labelledby="scrolling-sortable-full-width-caption">
    <table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable" data-module="nhsuk-table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m" id="scrolling-sortable-full-width-caption">
        Childhood vaccination coverage by nation<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
            Nation
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2013 to 2014
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2014 to 2015
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2015 to 2016
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2016 to 2017
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2017 to 2018
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2018 to 2019
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2019 to 2020
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2020 to 2021
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2021 to 2022
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2022 to 2023
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2023 to 2024
          </th>
          <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
            2024 to 2025
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            England
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.41%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.12%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.09%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            92.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.30%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Northern Ireland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.48%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.22%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.04%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.20%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.45%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.53%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.52%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            93.10%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            91.00%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Scotland
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.39%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            97.15%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.51%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.80%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.23%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.54%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.32%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.55%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.84%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.50%
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Wales
          </th>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.70%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.57%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            96.34%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.92%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.42%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.77%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.56%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            95.18%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.47%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.19%
          </td>
          <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
            94.10%
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    id: "scrolling-sortable-full-width-caption",
    text: "Childhood vaccination coverage by nation",
    size: "m"
  },
  firstCellIsHeader: true,
  scroll: true,
  head: [
    {
      text: "Nation",
      sort: "ascending"
    },
    {
      text: "2013 to 2014",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2014 to 2015",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2015 to 2016",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2016 to 2017",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2017 to 2018",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2018 to 2019",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2019 to 2020",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2020 to 2021",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2021 to 2022",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2022 to 2023",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2023 to 2024",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "2024 to 2025",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "England"
      },
      {
        text: "94.34%"
      },
      {
        text: "94.23%"
      },
      {
        text: "93.56%"
      },
      {
        text: "93.41%"
      },
      {
        text: "93.12%"
      },
      {
        text: "92.09%"
      },
      {
        text: "92.57%"
      },
      {
        text: "92.04%"
      },
      {
        text: "91.84%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.22%"
      },
      {
        text: "91.30%"
      }
    ],
    [
      {
        text: "Northern Ireland"
      },
      {
        text: "97.48%"
      },
      {
        text: "96.84%"
      },
      {
        text: "97.22%"
      },
      {
        text: "97.04%"
      },
      {
        text: "96.20%"
      },
      {
        text: "94.52%"
      },
      {
        text: "94.45%"
      },
      {
        text: "94.53%"
      },
      {
        text: "93.52%"
      },
      {
        text: "93.10%"
      },
      {
        text: "91.80%"
      },
      {
        text: "91.00%"
      }
    ],
    [
      {
        text: "Scotland"
      },
      {
        text: "97.51%"
      },
      {
        text: "97.39%"
      },
      {
        text: "97.15%"
      },
      {
        text: "96.77%"
      },
      {
        text: "96.51%"
      },
      {
        text: "95.80%"
      },
      {
        text: "96.23%"
      },
      {
        text: "96.54%"
      },
      {
        text: "96.32%"
      },
      {
        text: "95.55%"
      },
      {
        text: "94.84%"
      },
      {
        text: "94.50%"
      }
    ],
    [
      {
        text: "Wales"
      },
      {
        text: "96.70%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.57%"
      },
      {
        text: "96.34%"
      },
      {
        text: "95.92%"
      },
      {
        text: "95.42%"
      },
      {
        text: "95.77%"
      },
      {
        text: "95.56%"
      },
      {
        text: "95.18%"
      },
      {
        text: "94.47%"
      },
      {
        text: "94.19%"
      },
      {
        text: "94.10%"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables sortable

Open this example in a new tab: Tables sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ]
}) }}

Tables compact sortable

Open this example in a new tab: Tables compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true
}) }}

Tables striped sortable

Open this example in a new tab: Tables striped sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact sortable

Open this example in a new tab: Tables striped compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive sortable

Open this example in a new tab: Tables responsive sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--sortable" data-module="nhsuk-table" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort aria-sort="ascending">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>Time
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:00
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Laura Stone
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:30
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:10
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>David Chen
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:40
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Michael Thompson
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>14:20
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Juan Martinez
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact sortable

Open this example in a new tab: Tables responsive compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable" data-module="nhsuk-table" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort aria-sort="ascending">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>Time
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:00
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Laura Stone
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:30
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:10
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>David Chen
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:40
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Michael Thompson
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>14:20
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Juan Martinez
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped sortable

Open this example in a new tab: Tables responsive striped sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort aria-sort="ascending">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>Time
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:00
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Laura Stone
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:30
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:10
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>David Chen
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:40
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Michael Thompson
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>14:20
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Juan Martinez
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact sortable

Open this example in a new tab: Tables responsive striped compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort aria-sort="ascending">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>Time
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:00
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Laura Stone
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>11:30
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:10
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>David Chen
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>13:40
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Michael Thompson
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Time </span>14:20
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Juan Martinez
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Date of birth </span>18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse sortable

Open this example in a new tab: Tables reverse sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact sortable

Open this example in a new tab: Tables reverse compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped sortable

Open this example in a new tab: Tables reverse striped sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact sortable

Open this example in a new tab: Tables reverse striped compact sortable

Appointments (Column headers are sortable)
Time Name Date of birth
11:00 Laura Stone 4 January 1986
11:30 Emma Katie-Brown 7 February 1976
13:10 David Chen 19 March 1981
13:40 Michael Thompson 6 December 1964
14:20 Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="col">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:00
      </th>
      <td class="nhsuk-table__cell">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        11:30
      </th>
      <td class="nhsuk-table__cell">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:10
      </th>
      <td class="nhsuk-table__cell">
        David Chen
      </td>
      <td class="nhsuk-table__cell">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        13:40
      </th>
      <td class="nhsuk-table__cell">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        14:20
      </th>
      <td class="nhsuk-table__cell">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      classes: "nhsuk-u-nowrap"
    }
  ],
  rows: [
    [
      {
        text: "11:00"
      },
      {
        text: "Laura Stone"
      },
      {
        text: "4 January 1986"
      }
    ],
    [
      {
        text: "11:30"
      },
      {
        text: "Emma Katie-Brown"
      },
      {
        text: "7 February 1976"
      }
    ],
    [
      {
        text: "13:10"
      },
      {
        text: "David Chen"
      },
      {
        text: "19 March 1981"
      }
    ],
    [
      {
        text: "13:40"
      },
      {
        text: "Michael Thompson"
      },
      {
        text: "6 December 1964"
      }
    ],
    [
      {
        text: "14:20"
      },
      {
        text: "Juan Martinez"
      },
      {
        text: "18 April 1975"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables sortable server-side

Open this example in a new tab: Tables sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ]
}) }}

Tables compact sortable server-side

Open this example in a new tab: Tables compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--sortable">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true
}) }}

Tables striped sortable server-side

Open this example in a new tab: Tables striped sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact sortable server-side

Open this example in a new tab: Tables striped compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive sortable server-side

Open this example in a new tab: Tables responsive sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--sortable" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" role="columnheader" data-sort aria-sort="descending">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span><a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span><a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>13 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>19 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>25 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>14 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>20 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>28 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact sortable server-side

Open this example in a new tab: Tables responsive compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" role="columnheader" data-sort aria-sort="descending">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span><a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span><a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>13 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>19 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>25 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>14 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>20 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>28 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped sortable server-side

Open this example in a new tab: Tables responsive striped sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" role="columnheader" data-sort aria-sort="descending">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span><a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span><a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>13 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>19 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>25 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>14 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>20 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>28 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact sortable server-side

Open this example in a new tab: Tables responsive striped compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--sortable nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" role="columnheader" data-sort aria-sort="descending">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span><a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" role="columnheader" data-sort>
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span><a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>13 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>19 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>25 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>7 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>14 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>20 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>28 June 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Name </span>Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Last log in </span>1 May 2026
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true"><span class="nhsuk-u-visually-hidden">Action</span> </span><a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse sortable server-side

Open this example in a new tab: Tables reverse sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact sortable server-side

Open this example in a new tab: Tables reverse compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped sortable server-side

Open this example in a new tab: Tables reverse striped sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--sortable nhsuk-table--striped">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact sortable server-side

Open this example in a new tab: Tables reverse striped compact sortable server-side

Appointments (Column headers are sortable)
Name Last log in Action
Zadie Munroe 7 May 2026 Change details for Zadie Munroe
Yolanda Pierce 13 May 2026 Change details for Yolanda Pierce
Xanthe Beaumont 19 May 2026 Change details for Xanthe Beaumont
Wendell Shaw 25 May 2026 Change details for Wendell Shaw
Val Cruz 1 June 2026 Change details for Val Cruz
Uta Brennan 7 June 2026 Change details for Uta Brennan
Tamsin Foley-Whitworth 14 June 2026 Change details for Tamsin Foley-Whitworth
Stellan Park 20 June 2026 Change details for Stellan Park
Ro Nkosi 28 June 2026 Change details for Ro Nkosi
Reuben Tate 1 May 2026 Change details for Reuben Tate
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--sortable nhsuk-table--striped">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-half" scope="col" data-sort aria-sort="descending">
        <a class="nhsuk-link" href="#">Name</a>
      </th>
      <th class="nhsuk-table__header nhsuk-u-text-align-right nhsuk-u-width-one-third nhsuk-u-nowrap" scope="col" data-sort>
        <a class="nhsuk-link" href="#">Last log in</a>
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Action</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Zadie Munroe
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Zadie Munroe</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Yolanda Pierce
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        13 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Yolanda Pierce</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Xanthe Beaumont
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        19 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Xanthe Beaumont</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wendell Shaw
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        25 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Wendell Shaw</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Val Cruz
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Val Cruz</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Uta Brennan
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        7 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Uta Brennan</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tamsin Foley-Whitworth
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        14 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Tamsin Foley-Whitworth</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Stellan Park
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        20 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Stellan Park</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Ro Nkosi
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        28 June 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Ro Nkosi</span></a>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Reuben Tate
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right">
        1 May 2026
      </td>
      <td class="nhsuk-table__cell">
        <a class="nhsuk-link" href="#">Change<span class="nhsuk-u-visually-hidden"> details for Reuben Tate</span></a>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name",
      href: "#",
      sort: "descending",
      width: "one-half"
    },
    {
      text: "Last log in",
      href: "#",
      sort: true,
      align: "right",
      width: "one-third",
      classes: "nhsuk-u-nowrap"
    },
    {
      visuallyHiddenText: "Action"
    }
  ],
  rows: [
    [
      {
        text: "Zadie Munroe"
      },
      {
        text: "7 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Zadie Munroe"
      }
    ],
    [
      {
        text: "Yolanda Pierce"
      },
      {
        text: "13 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Yolanda Pierce"
      }
    ],
    [
      {
        text: "Xanthe Beaumont"
      },
      {
        text: "19 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Xanthe Beaumont"
      }
    ],
    [
      {
        text: "Wendell Shaw"
      },
      {
        text: "25 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Wendell Shaw"
      }
    ],
    [
      {
        text: "Val Cruz"
      },
      {
        text: "1 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Val Cruz"
      }
    ],
    [
      {
        text: "Uta Brennan"
      },
      {
        text: "7 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Uta Brennan"
      }
    ],
    [
      {
        text: "Tamsin Foley-Whitworth"
      },
      {
        text: "14 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Tamsin Foley-Whitworth"
      }
    ],
    [
      {
        text: "Stellan Park"
      },
      {
        text: "20 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Stellan Park"
      }
    ],
    [
      {
        text: "Ro Nkosi"
      },
      {
        text: "28 June 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Ro Nkosi"
      }
    ],
    [
      {
        text: "Reuben Tate"
      },
      {
        text: "1 May 2026"
      },
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "details for Reuben Tate"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables sortable with numeric format

Open this example in a new tab: Tables sortable with numeric format

Prescription prepayment certificate (PPC) charges (Column headers are sortable)
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "New charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ]
}) }}

Tables striped sortable with numeric format

Open this example in a new tab: Tables striped sortable with numeric format

Prescription prepayment certificate (PPC) charges (Column headers are sortable)
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "New charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true
}) }}

Tables sortable with numeric format and missing data

Open this example in a new tab: Tables sortable with numeric format and missing data

Prescription prepayment certificate (PPC) charges (Column headers are sortable)
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "New charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ]
}) }}

Tables striped sortable with numeric format and missing data

Open this example in a new tab: Tables striped sortable with numeric format and missing data

Prescription prepayment certificate (PPC) charges (Column headers are sortable)
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable nhsuk-table--striped" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "New charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true
}) }}

Tables sortable with numeric format and sort values

Open this example in a new tab: Tables sortable with numeric format and sort values

Prescription prepayment certificate (PPC) charges (Column headers are sortable)
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" data-sort data-sort-next="descending">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" data-sort-value="3">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="31.25">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="32.05">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" data-sort-value="12">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="111.60">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="114.50">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="100">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="19.30">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" data-sort-value="19.80">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item",
      sort: "ascending"
    },
    {
      text: "Current charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    },
    {
      text: "New charge",
      format: "numeric",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        sortValue: "3",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25",
        sortValue: "31.25"
      },
      {
        text: "£32.05",
        sortValue: "32.05"
      }
    ],
    [
      {
        text: "12-month",
        sortValue: "12",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60",
        sortValue: "111.60"
      },
      {
        text: "£114.50",
        sortValue: "114.50"
      }
    ],
    [
      {
        text: "HRT",
        sortValue: "100"
      },
      {
        text: "£19.30",
        sortValue: "19.30"
      },
      {
        text: "£19.80",
        sortValue: "19.80"
      }
    ]
  ]
}) }}

Tables sortable with sort values

Open this example in a new tab: Tables sortable with sort values

Appointments (Column headers are sortable)
Time Name Date of birth
11:00am Laura Stone 4 January 1986
11:30am Emma Katie-Brown 7 February 1976
1:10pm David Chen 19 March 1981
1:40pm Michael Thompson 6 December 1964
2:20pm Juan Martinez 18 April 1975
Code

Markup

<table class="nhsuk-table nhsuk-table--sortable" data-module="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Appointments<span class="nhsuk-u-visually-hidden"> (Column headers are sortable)</span>
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col" data-sort aria-sort="ascending">
        Time
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort>
        Name
      </th>
      <th class="nhsuk-table__header" scope="col" data-sort data-sort-next="descending">
        Date of birth
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="11:00">
        11:00am
      </th>
      <td class="nhsuk-table__cell" data-sort-value="Stone, Laura">
        Laura Stone
      </td>
      <td class="nhsuk-table__cell" data-sort-value="1986-01-04">
        4 January 1986
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="11:30">
        11:30am
      </th>
      <td class="nhsuk-table__cell" data-sort-value="Katie-Brown, Emma">
        Emma Katie-Brown
      </td>
      <td class="nhsuk-table__cell" data-sort-value="1976-02-07">
        7 February 1976
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="13:10">
        1:10pm
      </th>
      <td class="nhsuk-table__cell" data-sort-value="Chen, David">
        David Chen
      </td>
      <td class="nhsuk-table__cell" data-sort-value="1981-03-19">
        19 March 1981
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="13:40">
        1:40pm
      </th>
      <td class="nhsuk-table__cell" data-sort-value="Thompson, Michael">
        Michael Thompson
      </td>
      <td class="nhsuk-table__cell" data-sort-value="1964-12-06">
        6 December 1964
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row" data-sort-value="14:20">
        2:20pm
      </th>
      <td class="nhsuk-table__cell" data-sort-value="Martinez, Juan">
        Juan Martinez
      </td>
      <td class="nhsuk-table__cell" data-sort-value="1975-04-18">
        18 April 1975
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Appointments",
  firstCellIsHeader: true,
  head: [
    {
      text: "Time",
      sort: "ascending"
    },
    {
      text: "Name",
      sort: true
    },
    {
      text: "Date of birth",
      sort: true,
      sortNext: "descending"
    }
  ],
  rows: [
    [
      {
        text: "11:00am",
        sortValue: "11:00"
      },
      {
        text: "Laura Stone",
        sortValue: "Stone, Laura"
      },
      {
        text: "4 January 1986",
        sortValue: "1986-01-04"
      }
    ],
    [
      {
        text: "11:30am",
        sortValue: "11:30"
      },
      {
        text: "Emma Katie-Brown",
        sortValue: "Katie-Brown, Emma"
      },
      {
        text: "7 February 1976",
        sortValue: "1976-02-07"
      }
    ],
    [
      {
        text: "1:10pm",
        sortValue: "13:10"
      },
      {
        text: "David Chen",
        sortValue: "Chen, David"
      },
      {
        text: "19 March 1981",
        sortValue: "1981-03-19"
      }
    ],
    [
      {
        text: "1:40pm",
        sortValue: "13:40"
      },
      {
        text: "Michael Thompson",
        sortValue: "Thompson, Michael"
      },
      {
        text: "6 December 1964",
        sortValue: "1964-12-06"
      }
    ],
    [
      {
        text: "2:20pm",
        sortValue: "14:20"
      },
      {
        text: "Juan Martinez",
        sortValue: "Martinez, Juan"
      },
      {
        text: "18 April 1975",
        sortValue: "1975-04-18"
      }
    ]
  ]
}) }}

Tables with column widths

Open this example in a new tab: Tables with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ]
}) }}

Tables compact with column widths

Open this example in a new tab: Tables compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true
}) }}

Tables striped with column widths

Open this example in a new tab: Tables striped with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact with column widths

Open this example in a new tab: Tables striped compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive with column widths

Open this example in a new tab: Tables responsive with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>How much?
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span><span>3 to 5 months (weighing more than 5kg)</span>
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>6 to 11 months
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>1 to 3 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>5ml (100mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>4 to 6 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>7 to 9 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>10ml (200mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>10 to 11 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>15ml (300mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact with column widths

Open this example in a new tab: Tables responsive compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>How much?
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span><span>3 to 5 months (weighing more than 5kg)</span>
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>6 to 11 months
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>1 to 3 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>5ml (100mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>4 to 6 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>7 to 9 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>10ml (200mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>10 to 11 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>15ml (300mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped with column widths

Open this example in a new tab: Tables responsive striped with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>How much?
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span><span>3 to 5 months (weighing more than 5kg)</span>
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>6 to 11 months
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>1 to 3 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>5ml (100mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>4 to 6 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>7 to 9 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>10ml (200mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>10 to 11 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>15ml (300mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact with column widths

Open this example in a new tab: Tables responsive striped compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>How much?
      </th>
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span><span>3 to 5 months (weighing more than 5kg)</span>
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>6 to 11 months
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>1 to 3 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>5ml (100mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>4 to 6 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>7 to 9 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>10ml (200mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Age </span>10 to 11 years
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How much? </span>15ml (300mg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse with column widths

Open this example in a new tab: Tables reverse with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact with column widths

Open this example in a new tab: Tables reverse compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped with column widths

Open this example in a new tab: Tables reverse striped with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact with column widths

Open this example in a new tab: Tables reverse striped compact with column widths

Ibuprofen 100mg/5ml liquid dosages for children by age
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml (50mg) Max 3 times in 24 hours
6 to 11 months 2.5ml (50mg) Max 3 to 4 times in 24 hours
1 to 3 years 5ml (100mg) Max 3 times in 24 hours
4 to 6 years 7.5ml (150mg) Max 3 times in 24 hours
7 to 9 years 10ml (200mg) Max 3 times in 24 hours
10 to 11 years 15ml (300mg) Max 3 times in 24 hours
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen 100mg/5ml liquid dosages for children by age
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-width-one-third" scope="col">
        Age
      </th>
      <th class="nhsuk-table__header nhsuk-u-width-one-quarter" scope="col">
        How much?
      </th>
      <th class="nhsuk-table__header" scope="col">
        How often?
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        3 to 5 months (weighing more than 5kg)
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 to 11 months
      </th>
      <td class="nhsuk-table__cell">
        2.5ml (50mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        1 to 3 years
      </th>
      <td class="nhsuk-table__cell">
        5ml (100mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        4 to 6 years
      </th>
      <td class="nhsuk-table__cell">
        7.5ml (150mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        7 to 9 years
      </th>
      <td class="nhsuk-table__cell">
        10ml (200mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 to 11 years
      </th>
      <td class="nhsuk-table__cell">
        15ml (300mg)
      </td>
      <td class="nhsuk-table__cell">
        Max 3 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Ibuprofen 100mg/5ml liquid dosages for children by age",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Age",
      width: "one-third"
    },
    {
      text: "How much?",
      width: "one-quarter"
    },
    {
      text: "How often?"
    }
  ],
  rows: [
    [
      {
        html: "3 to 5 months (weighing more than 5kg)"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "6 to 11 months"
      },
      {
        text: "2.5ml (50mg)"
      },
      {
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        text: "1 to 3 years"
      },
      {
        text: "5ml (100mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "4 to 6 years"
      },
      {
        text: "7.5ml (150mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "7 to 9 years"
      },
      {
        text: "10ml (200mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        text: "10 to 11 years"
      },
      {
        text: "15ml (300mg)"
      },
      {
        text: "Max 3 times in 24 hours"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables with custom HTML

Open this example in a new tab: Tables with custom HTML

Nunjucks macro options
Name Type Description
id string The ID of the table.
rows array Required. The rows within the table component. See macro options for rows.
head array Can be used to add a row of table header cells (<th>) at the top of the table component. See macro options for head.
caption string Caption text.
captionClasses string Classes for caption text size. Classes should correspond to the available typography heading classes.
firstCellIsHeader string If set to true, the first cell in each row will be a table header (<th>).
classes string Classes to add to the table container.
attributes object HTML attributes (for example data attributes) to add to the table container.
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Nunjucks macro options
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Name
      </th>
      <th class="nhsuk-table__header" scope="col">
        Type
      </th>
      <th class="nhsuk-table__header" scope="col">
        Description
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        id
      </th>
      <td class="nhsuk-table__cell">
        string
      </td>
      <td class="nhsuk-table__cell">
        The ID of the table.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        rows
      </th>
      <td class="nhsuk-table__cell">
        array
      </td>
      <td class="nhsuk-table__cell">
        <strong>Required.</strong> The rows within the table component.
        <a href="#/macro-options">See macro options for rows</a>.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        head
      </th>
      <td class="nhsuk-table__cell">
        array
      </td>
      <td class="nhsuk-table__cell">
        Can be used to add a row of table header cells (<code>&lt;th&gt;</code>) at the top of the table component.
        <a href="#/macro-options">See macro options for head</a>.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        caption
      </th>
      <td class="nhsuk-table__cell">
        string
      </td>
      <td class="nhsuk-table__cell">
        Caption text.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        captionClasses
      </th>
      <td class="nhsuk-table__cell">
        string
      </td>
      <td class="nhsuk-table__cell">
        Classes for caption text size. Classes should correspond to the available typography heading classes.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        firstCellIsHeader
      </th>
      <td class="nhsuk-table__cell">
        string
      </td>
      <td class="nhsuk-table__cell">
        If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>).
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        classes
      </th>
      <td class="nhsuk-table__cell">
        string
      </td>
      <td class="nhsuk-table__cell">
        Classes to add to the table container.
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        attributes
      </th>
      <td class="nhsuk-table__cell">
        object
      </td>
      <td class="nhsuk-table__cell">
        HTML attributes (for example data attributes) to add to the table container.
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Nunjucks macro options",
  firstCellIsHeader: true,
  head: [
    {
      text: "Name"
    },
    {
      text: "Type"
    },
    {
      text: "Description"
    }
  ],
  rows: [
    [
      {
        text: "id"
      },
      {
        text: "string"
      },
      {
        text: "The ID of the table."
      }
    ],
    [
      {
        text: "rows"
      },
      {
        text: "array"
      },
      {
        html: '<strong>Required.</strong> The rows within the table component.\n<a href="#/macro-options">See macro options for rows</a>.'
      }
    ],
    [
      {
        text: "head"
      },
      {
        text: "array"
      },
      {
        html: 'Can be used to add a row of table header cells (<code>&lt;th&gt;</code>) at the top of the table component.\n<a href="#/macro-options">See macro options for head</a>.'
      }
    ],
    [
      {
        text: "caption"
      },
      {
        text: "string"
      },
      {
        text: "Caption text."
      }
    ],
    [
      {
        text: "captionClasses"
      },
      {
        text: "string"
      },
      {
        text: "Classes for caption text size. Classes should correspond to the available typography heading classes."
      }
    ],
    [
      {
        text: "firstCellIsHeader"
      },
      {
        text: "string"
      },
      {
        html: "If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>)."
      }
    ],
    [
      {
        text: "classes"
      },
      {
        text: "string"
      },
      {
        text: "Classes to add to the table container."
      }
    ],
    [
      {
        text: "attributes"
      },
      {
        text: "object"
      },
      {
        text: "\tHTML attributes (for example data attributes) to add to the table container."
      }
    ]
  ]
}) }}

Tables with empty items

Open this example in a new tab: Tables with empty items

Vaccinations given
Date Vaccine
10 July 2024 RSV
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Vaccinations given
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Date
      </th>
      <th class="nhsuk-table__header" scope="col">
        Vaccine
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 July 2024
      </th>
      <td class="nhsuk-table__cell">
        RSV
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Vaccinations given",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Date"
    },
    {
      text: "Vaccine"
    },
    false
  ],
  rows: [
    [
      {
        text: "10 July 2024"
      },
      {
        text: "RSV"
      },
      false
    ],
    false
  ]
}) }}

Tables with first cell as header

Open this example in a new tab: Tables with first cell as header

Day of the week Opening hours
Monday 9am to 6pm
Tuesday 9am to 6pm
Wednesday 9am to 6pm
Thursday 9am to 6pm
Friday 9am to 6pm
Saturday 9am to 1pm
Sunday Closed
Code

Markup

<table class="nhsuk-table nhsuk-table--no-last-row-border">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Day of the week
      </th>
      <th class="nhsuk-table__header" scope="col">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Day of the week"
    },
    {
      text: "Opening hours"
    }
  ],
  rows: [
    [
      {
        text: "Monday"
      },
      {
        text: "9am to 6pm"
      }
    ],
    [
      {
        text: "Tuesday"
      },
      {
        text: "9am to 6pm"
      }
    ],
    [
      {
        text: "Wednesday"
      },
      {
        text: "9am to 6pm"
      }
    ],
    [
      {
        text: "Thursday"
      },
      {
        text: "9am to 6pm"
      }
    ],
    [
      {
        text: "Friday"
      },
      {
        text: "9am to 6pm"
      }
    ],
    [
      {
        text: "Saturday"
      },
      {
        text: "9am to 1pm"
      }
    ],
    [
      {
        text: "Sunday"
      },
      {
        text: "Closed"
      }
    ]
  ]
}) }}

Tables with missing data

Open this example in a new tab: Tables with missing data

Vaccinations given
Date Vaccine Product
10 July 2024 RSV Abrysvo
6 September 2023 Flu No data
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Vaccinations given
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Date
      </th>
      <th class="nhsuk-table__header" scope="col">
        Vaccine
      </th>
      <th class="nhsuk-table__header" scope="col">
        Product
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        10 July 2024
      </th>
      <td class="nhsuk-table__cell">
        RSV
      </td>
      <td class="nhsuk-table__cell">
        Abrysvo
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        6 September 2023
      </th>
      <td class="nhsuk-table__cell">
        Flu
      </td>
      <td class="nhsuk-table__cell nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Vaccinations given",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Date"
    },
    {
      text: "Vaccine"
    },
    {
      text: "Product"
    }
  ],
  rows: [
    [
      {
        text: "10 July 2024"
      },
      {
        text: "RSV"
      },
      {
        text: "Abrysvo"
      }
    ],
    [
      {
        text: "6 September 2023"
      },
      {
        text: "Flu"
      },
      {
        text: "No data",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ]
  ]
}) }}

Tables with numeric format

Open this example in a new tab: Tables with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ]
}) }}

Tables compact with numeric format

Open this example in a new tab: Tables compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true
}) }}

Tables striped with numeric format

Open this example in a new tab: Tables striped with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact with numeric format

Open this example in a new tab: Tables striped compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive with numeric format

Open this example in a new tab: Tables responsive with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact with numeric format

Open this example in a new tab: Tables responsive compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped with numeric format

Open this example in a new tab: Tables responsive striped with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact with numeric format

Open this example in a new tab: Tables responsive striped compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse with numeric format

Open this example in a new tab: Tables reverse with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact with numeric format

Open this example in a new tab: Tables reverse compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped with numeric format

Open this example in a new tab: Tables reverse striped with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact with numeric format

Open this example in a new tab: Tables reverse striped compact with numeric format

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 £114.50
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £114.50
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "£114.50"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables with numeric format and missing data

Open this example in a new tab: Tables with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ]
}) }}

Tables compact with numeric format and missing data

Open this example in a new tab: Tables compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true
}) }}

Tables striped with numeric format and missing data

Open this example in a new tab: Tables striped with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact with numeric format and missing data

Open this example in a new tab: Tables striped compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive with numeric format and missing data

Open this example in a new tab: Tables responsive with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>No data
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact with numeric format and missing data

Open this example in a new tab: Tables responsive compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>No data
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped with numeric format and missing data

Open this example in a new tab: Tables responsive striped with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>No data
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact with numeric format and missing data

Open this example in a new tab: Tables responsive striped compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>No data
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="row" role="rowheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Item </span>HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Current charge </span>£19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">New charge </span>£19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse with numeric format and missing data

Open this example in a new tab: Tables reverse with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact with numeric format and missing data

Open this example in a new tab: Tables reverse compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped with numeric format and missing data

Open this example in a new tab: Tables reverse striped with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact with numeric format and missing data

Open this example in a new tab: Tables reverse striped compact with numeric format and missing data

Prescription prepayment certificate (PPC) charges
Item Current charge New charge
3-month £31.25 £32.05
12-month £111.60 No data
HRT £19.30 £19.80
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Prescription prepayment certificate (PPC) charges
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Item
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Current charge
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        3-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £31.25
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £32.05
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-nowrap" scope="row">
        12-month
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £111.60
      </td>
      <td class="nhsuk-table__cell nhsuk-u-text-align-right nhsuk-u-secondary-text-colour">
        No data
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="row">
        HRT
      </th>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.30
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        £19.80
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Prescription prepayment certificate (PPC) charges",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£31.25"
      },
      {
        text: "£32.05"
      }
    ],
    [
      {
        text: "12-month",
        classes: "nhsuk-u-nowrap"
      },
      {
        text: "£111.60"
      },
      {
        text: "No data",
        format: "string",
        classes: "nhsuk-u-secondary-text-colour"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30"
      },
      {
        text: "£19.80"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables with numeric format (full width, past day)

Open this example in a new tab: Tables with numeric format (full width, past day)

Past day
Case manager Cases opened Cases closed
David Francis 3 0
Paul Farmer 1 0
Rita Patel 2 0
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Past day
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Case manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases opened
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases closed
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        3
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        0
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        0
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        2
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        0
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Past day",
  head: [
    {
      text: "Case manager"
    },
    {
      text: "Cases opened",
      format: "numeric"
    },
    {
      text: "Cases closed",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "3"
      },
      {
        text: "0"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1"
      },
      {
        text: "0"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "2"
      },
      {
        text: "0"
      }
    ]
  ]
}) }}

Tables with numeric format (full width, past month)

Open this example in a new tab: Tables with numeric format (full width, past month)

Past month
Case manager Cases opened Cases closed
David Francis 98 95
Paul Farmer 122 131
Rita Patel 126 142
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Past month
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Case manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases opened
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases closed
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        98
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        95
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        122
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        131
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        126
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        142
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Past month",
  head: [
    {
      text: "Case manager"
    },
    {
      text: "Cases opened",
      format: "numeric"
    },
    {
      text: "Cases closed",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "98"
      },
      {
        text: "95"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "122"
      },
      {
        text: "131"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "126"
      },
      {
        text: "142"
      }
    ]
  ]
}) }}

Tables with numeric format (full width, past week)

Open this example in a new tab: Tables with numeric format (full width, past week)

Past week
Case manager Cases opened Cases closed
David Francis 24 18
Paul Farmer 16 20
Rita Patel 24 27
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Past week
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Case manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases opened
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases closed
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        18
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        16
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        20
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        27
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Past week",
  head: [
    {
      text: "Case manager"
    },
    {
      text: "Cases opened",
      format: "numeric"
    },
    {
      text: "Cases closed",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "24"
      },
      {
        text: "18"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "16"
      },
      {
        text: "20"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      },
      {
        text: "27"
      }
    ]
  ]
}) }}

Tables with numeric format (full width, past year)

Open this example in a new tab: Tables with numeric format (full width, past year)

Past year
Case manager Cases opened Cases closed
David Francis 1380 1472
Paul Farmer 1129 1083
Rita Patel 1539 1265
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption">
    Past year
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Case manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases opened
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases closed
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1472
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1083
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1539
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1265
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: "Past year",
  head: [
    {
      text: "Case manager"
    },
    {
      text: "Cases opened",
      format: "numeric"
    },
    {
      text: "Cases closed",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      },
      {
        text: "1472"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      },
      {
        text: "1083"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "1539"
      },
      {
        text: "1265"
      }
    ]
  ]
}) }}

Tables without border

Open this example in a new tab: Tables without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--no-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ]
}) }}

Tables compact without border

Open this example in a new tab: Tables compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--no-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true
}) }}

Tables striped without border

Open this example in a new tab: Tables striped without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--no-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact without border

Open this example in a new tab: Tables striped compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--no-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive without border

Open this example in a new tab: Tables responsive without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-border" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact without border

Open this example in a new tab: Tables responsive compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-border" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped without border

Open this example in a new tab: Tables responsive striped without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-border nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact without border

Open this example in a new tab: Tables responsive striped compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-border nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse without border

Open this example in a new tab: Tables reverse without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--no-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact without border

Open this example in a new tab: Tables reverse compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped without border

Open this example in a new tab: Tables reverse striped without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--no-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact without border

Open this example in a new tab: Tables reverse striped compact without border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  border: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables without last row border

Open this example in a new tab: Tables without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--no-last-row-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ]
}) }}

Tables compact without last row border

Open this example in a new tab: Tables compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--no-last-row-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true
}) }}

Tables striped without last row border

Open this example in a new tab: Tables striped without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  striped: true
}) }}

Tables striped compact without last row border

Open this example in a new tab: Tables striped compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--no-last-row-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  striped: true
}) }}

Tables responsive without last row border

Open this example in a new tab: Tables responsive without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  responsive: true
}) }}

Tables responsive compact without last row border

Open this example in a new tab: Tables responsive compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-last-row-border" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  responsive: true
}) }}

Tables responsive striped without last row border

Open this example in a new tab: Tables responsive striped without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  responsive: true,
  striped: true
}) }}

Tables responsive striped compact without last row border

Open this example in a new tab: Tables responsive striped compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--compact nhsuk-table--responsive nhsuk-table--no-last-row-border nhsuk-table--striped" role="table">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th class="nhsuk-table__header" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col" role="columnheader">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1380
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>1129
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Manager </span>Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric" role="cell">
        <span class="nhsuk-table__heading" aria-hidden="true">Cases </span>24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  responsive: true,
  striped: true
}) }}

Tables reverse without last row border

Open this example in a new tab: Tables reverse without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--no-last-row-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables reverse compact without last row border

Open this example in a new tab: Tables reverse compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-last-row-border">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  variant: "reverse"
}) }}

Tables reverse striped without last row border

Open this example in a new tab: Tables reverse striped without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--no-last-row-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  striped: true,
  variant: "reverse"
}) }}

Tables reverse striped compact without last row border

Open this example in a new tab: Tables reverse striped compact without last row border

Cases per manager
Manager Cases
David Francis 1380
Paul Farmer 1129
Rita Patel 24
Code

Markup

<table class="nhsuk-table nhsuk-table--reverse nhsuk-table--compact nhsuk-table--no-last-row-border nhsuk-table--striped">
  <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">
    Cases per manager
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Manager
      </th>
      <th class="nhsuk-table__header nhsuk-table__header--numeric" scope="col">
        Cases
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        David Francis
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1380
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Paul Farmer
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        1129
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Rita Patel
      </td>
      <td class="nhsuk-table__cell nhsuk-table__cell--numeric">
        24
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Cases per manager",
    classes: "nhsuk-u-visually-hidden"
  },
  lastRowBorder: false,
  head: [
    {
      text: "Manager"
    },
    {
      text: "Cases",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "David Francis"
      },
      {
        text: "1380"
      }
    ],
    [
      {
        text: "Paul Farmer"
      },
      {
        text: "1129"
      }
    ],
    [
      {
        text: "Rita Patel"
      },
      {
        text: "24"
      }
    ]
  ],
  compact: true,
  striped: true,
  variant: "reverse"
}) }}

Tables with word breaks

Open this example in a new tab: Tables with word breaks

Users
Name Email address Status Actions
Stephanie Meyer stephanie.meyer9@test.com Active
Aleksandrina Featherstonehaugh-Whitehead aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com Inactive
Code

Markup

<table class="nhsuk-table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Users
  </caption>
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">
        Name
      </th>
      <th class="nhsuk-table__header" scope="col">
        Email address
      </th>
      <th class="nhsuk-table__header" scope="col">
        Status
      </th>
      <th class="nhsuk-table__header" scope="col">
        <span class="nhsuk-u-visually-hidden">Actions</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-text-break-word" scope="row">
        Stephanie Meyer
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-break-word">
        stephanie.meyer9@test.com
      </td>
      <td class="nhsuk-table__cell">
        <strong class="nhsuk-tag nhsuk-tag--green">
          Active
        </strong>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header nhsuk-u-text-break-word" scope="row">
        Aleksandrina Featherstonehaugh-Whitehead
      </th>
      <td class="nhsuk-table__cell nhsuk-u-text-break-word">
        aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com
      </td>
      <td class="nhsuk-table__cell">
        <strong class="nhsuk-tag nhsuk-tag--grey">
          Inactive
        </strong>
      </td>
    </tr>
  </tbody>
</table>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  caption: {
    text: "Users",
    size: "m"
  },
  firstCellIsHeader: true,
  head: [
    {
      text: "Name"
    },
    {
      text: "Email address"
    },
    {
      text: "Status"
    },
    {
      visuallyHiddenText: "Actions"
    }
  ],
  rows: [
    [
      {
        text: "Stephanie Meyer",
        classes: "nhsuk-u-text-break-word"
      },
      {
        text: "stephanie.meyer9@test.com",
        classes: "nhsuk-u-text-break-word"
      },
      {
        html: '<strong class="nhsuk-tag nhsuk-tag--green">\n  Active\n</strong>\n'
      }
    ],
    [
      {
        text: "Aleksandrina Featherstonehaugh-Whitehead",
        classes: "nhsuk-u-text-break-word"
      },
      {
        text: "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com",
        classes: "nhsuk-u-text-break-word"
      },
      {
        html: '<strong class="nhsuk-tag nhsuk-tag--grey">\n  Inactive\n</strong>\n'
      }
    ]
  ]
}) }}

Tables as a card

Open this example in a new tab: Tables as a card

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <table class="nhsuk-table nhsuk-table--no-last-row-border">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy blisters
          </th>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: true,
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ]
}) }}

Tables striped as a card

Open this example in a new tab: Tables striped as a card

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy blisters
          </th>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: true,
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  striped: true
}) }}

Tables responsive as a card

Open this example in a new tab: Tables responsive as a card

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card">
  <div class="nhsuk-card__content">
    <table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border" role="table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--m">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head" role="rowgroup">
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="col" role="columnheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col" role="columnheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: true,
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "m"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  responsive: true
}) }}

Tables as a card (feature)

Open this example in a new tab: Tables as a card (feature)

Other conditions like impetigo

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Other conditions like impetigo
    </h2>
    <table class="nhsuk-table nhsuk-table--no-last-row-border">
      <caption class="nhsuk-table__caption nhsuk-table__caption--s">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy blisters
          </th>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Other conditions like impetigo",
      size: "m"
    },
    variant: "feature"
  },
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "s"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ]
}) }}

Tables striped as a card (feature)

Open this example in a new tab: Tables striped as a card (feature)

Other conditions like impetigo

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Other conditions like impetigo
    </h2>
    <table class="nhsuk-table nhsuk-table--no-last-row-border nhsuk-table--striped">
      <caption class="nhsuk-table__caption nhsuk-table__caption--s">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="col">
            Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <th class="nhsuk-table__header" scope="row">
            Itchy blisters
          </th>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Other conditions like impetigo",
      size: "m"
    },
    variant: "feature"
  },
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "s"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  striped: true
}) }}

Tables responsive as a card (feature)

Open this example in a new tab: Tables responsive as a card (feature)

Other conditions like impetigo

Impetigo can look similar to other skin conditions
Skin symptoms Possible cause
Blisters on lips or around the mouth Cold sores
Itchy, dry, cracked, sore Eczema
Itchy blisters Shingles, chickenpox
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h2 class="nhsuk-card__heading nhsuk-heading-m">
      Other conditions like impetigo
    </h2>
    <table class="nhsuk-table nhsuk-table--responsive nhsuk-table--no-last-row-border" role="table">
      <caption class="nhsuk-table__caption nhsuk-table__caption--s">
        Impetigo can look similar to other skin conditions
      </caption>
      <thead class="nhsuk-table__head" role="rowgroup">
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="col" role="columnheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Skin symptoms
          </th>
          <th class="nhsuk-table__header" scope="col" role="columnheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Blisters on lips or around the mouth
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy, dry, cracked, sore
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <th class="nhsuk-table__header" scope="row" role="rowheader">
            <span class="nhsuk-table__heading" aria-hidden="true">Skin symptoms </span>Itchy blisters
          </th>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table__heading" aria-hidden="true">Possible cause </span>Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

{% from "tables/macro.njk" import table -%}

{{ table({
  card: {
    heading: {
      text: "Other conditions like impetigo",
      size: "m"
    },
    variant: "feature"
  },
  caption: {
    text: "Impetigo can look similar to other skin conditions",
    size: "s"
  },
  firstCellIsHeader: true,
  lastRowBorder: false,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        text: "Blisters on lips or around the mouth"
      },
      {
        text: "Cold sores"
      }
    ],
    [
      {
        text: "Itchy, dry, cracked, sore"
      },
      {
        text: "Eczema"
      }
    ],
    [
      {
        text: "Itchy blisters"
      },
      {
        text: "Shingles, chickenpox"
      }
    ]
  ],
  responsive: true
}) }}