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 scope="col" class="nhsuk-table__header">
        Skin symptoms
      </th>
      <th scope="col" class="nhsuk-table__header">
        Possible cause
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Blisters on lips or around the mouth
      </td>
      <td class="nhsuk-table__cell">
        Cold sores
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Itchy, dry, cracked, sore
      </td>
      <td class="nhsuk-table__cell">
        Eczema
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        Itchy blisters
      </td>
      <td class="nhsuk-table__cell">
        Shingles, chickenpox
      </td>
    </tr>
  </tbody>
</table>

Macro

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

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

Macro

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

{{ table({
  caption: "Impetigo can look similar to other skin conditions",
  captionSize: "m",
  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 responsive

Open this example in a new tab: Tables responsive

Ibuprofen syrup dosages for children
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml Max 3 times in 24 hours
6 to 11 months 2.5ml Max 3 to 4 times in 24 hours
1 to 3 years 5ml Max 3 times in 24 hours
4 to 6 years 7.5ml Max 3 times in 24 hours
7 to 9 years 10ml Max 3 times in 24 hours
10 to 11 years 15ml Max 3 times in 24 hours
12 to 17 years 15ml to 20ml Max 3 to 4 times in 24 hours
Code

Markup

<table class="nhsuk-table-responsive" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen syrup dosages for children
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-half" role="columnheader">
        Age
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-quarter" role="columnheader">
        How much?
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-quarter" role="columnheader">
        How often?
      </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-responsive__heading" aria-hidden="true">Age </span>3 to 5 months (weighing more than 5kg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>6 to 11 months
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>1 to 3 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>4 to 6 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>7.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>7 to 9 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>10ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>10 to 11 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>15ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>12 to 17 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>15ml to 20ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

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

{{ table({
  caption: "Ibuprofen syrup dosages for children",
  captionSize: "m",
  responsive: true,
  head: [
    {
      text: "Age",
      classes: "nhsuk-u-width-one-half"
    },
    {
      text: "How much?",
      classes: "nhsuk-u-width-one-quarter"
    },
    {
      text: "How often?",
      classes: "nhsuk-u-width-one-quarter"
    }
  ],
  rows: [
    [
      {
        header: "Age",
        text: "3 to 5 months (weighing more than 5kg)"
      },
      {
        header: "How much?",
        text: "2.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "6 to 11 months"
      },
      {
        header: "How much?",
        text: "2.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "1 to 3 years"
      },
      {
        header: "How much?",
        text: "5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "4 to 6 years"
      },
      {
        header: "How much?",
        text: "7.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "7 to 9 years"
      },
      {
        header: "How much?",
        text: "10ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "10 to 11 years"
      },
      {
        header: "How much?",
        text: "15ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "12 to 17 years"
      },
      {
        header: "How much?",
        text: "15ml to 20ml"
      },
      {
        header: "How often?",
        text: "Max 3 to 4 times in 24 hours"
      }
    ]
  ]
}) }}

Tables reverse responsive

Open this example in a new tab: Tables reverse responsive

Ibuprofen syrup dosages for children
Age How much? How often?
3 to 5 months (weighing more than 5kg) 2.5ml Max 3 times in 24 hours
6 to 11 months 2.5ml Max 3 to 4 times in 24 hours
1 to 3 years 5ml Max 3 times in 24 hours
4 to 6 years 7.5ml Max 3 times in 24 hours
7 to 9 years 10ml Max 3 times in 24 hours
10 to 11 years 15ml Max 3 times in 24 hours
12 to 17 years 15ml to 20ml Max 3 to 4 times in 24 hours
Code

Markup

<table class="nhsuk-table-responsive nhsuk-table-responsive--reverse" role="table">
  <caption class="nhsuk-table__caption nhsuk-table__caption--m">
    Ibuprofen syrup dosages for children
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-half" role="columnheader">
        Age
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-quarter" role="columnheader">
        How much?
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-u-width-one-quarter" role="columnheader">
        How often?
      </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-responsive__heading" aria-hidden="true">Age </span>3 to 5 months (weighing more than 5kg)
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>6 to 11 months
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>1 to 3 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>4 to 6 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>7.5ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>7 to 9 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>10ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>10 to 11 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>15ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 times in 24 hours
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Age </span>12 to 17 years
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>15ml to 20ml
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">How often? </span>Max 3 to 4 times in 24 hours
      </td>
    </tr>
  </tbody>
</table>

Macro

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

{{ table({
  caption: "Ibuprofen syrup dosages for children",
  captionSize: "m",
  responsive: true,
  head: [
    {
      text: "Age",
      classes: "nhsuk-u-width-one-half"
    },
    {
      text: "How much?",
      classes: "nhsuk-u-width-one-quarter"
    },
    {
      text: "How often?",
      classes: "nhsuk-u-width-one-quarter"
    }
  ],
  rows: [
    [
      {
        header: "Age",
        text: "3 to 5 months (weighing more than 5kg)"
      },
      {
        header: "How much?",
        text: "2.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "6 to 11 months"
      },
      {
        header: "How much?",
        text: "2.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 to 4 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "1 to 3 years"
      },
      {
        header: "How much?",
        text: "5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "4 to 6 years"
      },
      {
        header: "How much?",
        text: "7.5ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "7 to 9 years"
      },
      {
        header: "How much?",
        text: "10ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "10 to 11 years"
      },
      {
        header: "How much?",
        text: "15ml"
      },
      {
        header: "How often?",
        text: "Max 3 times in 24 hours"
      }
    ],
    [
      {
        header: "Age",
        text: "12 to 17 years"
      },
      {
        header: "How much?",
        text: "15ml to 20ml"
      },
      {
        header: "How often?",
        text: "Max 3 to 4 times in 24 hours"
      }
    ]
  ],
  variant: "reverse"
}) }}

Tables responsive and custom HTML

Open this example in a new tab: Tables responsive and 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-responsive" role="table">
  <caption class="nhsuk-table__caption">
    Nunjucks macro options
  </caption>
  <thead class="nhsuk-table__head" role="rowgroup">
    <tr class="nhsuk-table__row" role="row">
      <th scope="col" class="nhsuk-table__header" role="columnheader">
        Name
      </th>
      <th scope="col" class="nhsuk-table__header" role="columnheader">
        Type
      </th>
      <th scope="col" class="nhsuk-table__header" role="columnheader">
        Description
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>id
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>string
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>The ID of the table.
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>rows
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>array
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span><span><strong>Required.</strong> The rows within the table component.
        <a href="#/macro-options">See macro options for rows</a>.</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>head
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>array
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span><span>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>.</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>caption
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>string
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>Caption text.
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>captionClasses
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>string
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>Classes for caption text size. Classes should correspond to the available typography heading classes.
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>firstCellIsHeader
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>string
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span><span>If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>).</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>classes
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>string
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>Classes to add to the table container.
      </td>
    </tr>
    <tr class="nhsuk-table__row" role="row">
      <th scope="row" class="nhsuk-table__header" role="rowheader">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Name </span>attributes
      </th>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Type </span>object
      </td>
      <td class="nhsuk-table__cell" role="cell">
        <span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>	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,
  responsive: true,
  head: [
    {
      text: "Name"
    },
    {
      text: "Type"
    },
    {
      text: "Description"
    }
  ],
  rows: [
    [
      {
        header: "Name",
        text: "id"
      },
      {
        header: "Type",
        text: "string"
      },
      {
        header: "Description",
        text: "The ID of the table."
      }
    ],
    [
      {
        header: "Name",
        text: "rows"
      },
      {
        header: "Type",
        text: "array"
      },
      {
        header: "Description",
        html: '<strong>Required.</strong> The rows within the table component.\n<a href="#/macro-options">See macro options for rows</a>.'
      }
    ],
    [
      {
        header: "Name",
        text: "head"
      },
      {
        header: "Type",
        text: "array"
      },
      {
        header: "Description",
        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>.'
      }
    ],
    [
      {
        header: "Name",
        text: "caption"
      },
      {
        header: "Type",
        text: "string"
      },
      {
        header: "Description",
        text: "Caption text."
      }
    ],
    [
      {
        header: "Name",
        text: "captionClasses"
      },
      {
        header: "Type",
        text: "string"
      },
      {
        header: "Description",
        text: "Classes for caption text size. Classes should correspond to the available typography heading classes."
      }
    ],
    [
      {
        header: "Name",
        text: "firstCellIsHeader"
      },
      {
        header: "Type",
        text: "string"
      },
      {
        header: "Description",
        html: "If set to <code>true</code>, the first cell in each row will be a table header (<code>&lt;th&gt;</code>)."
      }
    ],
    [
      {
        header: "Name",
        text: "classes"
      },
      {
        header: "Type",
        text: "string"
      },
      {
        header: "Description",
        text: "Classes to add to the table container."
      }
    ],
    [
      {
        header: "Name",
        text: "attributes"
      },
      {
        header: "Type",
        text: "object"
      },
      {
        header: "Description",
        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 scope="col" class="nhsuk-table__header">
        Date
      </th>
      <th scope="col" class="nhsuk-table__header">
        Vaccine
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        10 July 2024
      </td>
      <td class="nhsuk-table__cell">
        RSV
      </td>
    </tr>
  </tbody>
</table>

Macro

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

{{ table({
  caption: "Vaccinations given",
  captionSize: "m",
  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">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th scope="col" class="nhsuk-table__header">
        Day of the week
      </th>
      <th scope="col" class="nhsuk-table__header">
        Opening hours
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Monday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Tuesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Wednesday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Thursday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Friday
      </th>
      <td class="nhsuk-table__cell">
        9am to 6pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Saturday
      </th>
      <td class="nhsuk-table__cell">
        9am to 1pm
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <th scope="row" class="nhsuk-table__header">
        Sunday
      </th>
      <td class="nhsuk-table__cell">
        Closed
      </td>
    </tr>
  </tbody>
</table>

Macro

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

{{ table({
  firstCellIsHeader: true,
  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 scope="col" class="nhsuk-table__header">
        Date
      </th>
      <th scope="col" class="nhsuk-table__header">
        Vaccine
      </th>
      <th scope="col" class="nhsuk-table__header">
        Product
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        10 July 2024
      </td>
      <td class="nhsuk-table__cell">
        RSV
      </td>
      <td class="nhsuk-table__cell">
        Abrysvo
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        6 September 2023
      </td>
      <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: "Vaccinations given",
  captionSize: "m",
  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 data

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

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 scope="col" class="nhsuk-table__header">
        Item
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">
        Current charge
      </th>
      <th scope="col" class="nhsuk-table__header nhsuk-table__header--numeric">
        New charge
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        3-month
      </td>
      <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">
      <td class="nhsuk-table__cell">
        12-month
      </td>
      <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">
      <td class="nhsuk-table__cell">
        HRT
      </td>
      <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: "Prescription prepayment certificate (PPC) charges",
  captionSize: "m",
  head: [
    {
      text: "Item"
    },
    {
      text: "Current charge",
      format: "numeric"
    },
    {
      text: "New charge",
      format: "numeric"
    }
  ],
  rows: [
    [
      {
        text: "3-month"
      },
      {
        text: "£31.25",
        format: "numeric"
      },
      {
        text: "£32.05",
        format: "numeric"
      }
    ],
    [
      {
        text: "12-month"
      },
      {
        text: "£111.60",
        format: "numeric"
      },
      {
        text: "£114.50",
        format: "numeric"
      }
    ],
    [
      {
        text: "HRT"
      },
      {
        text: "£19.30",
        format: "numeric"
      },
      {
        text: "£19.80",
        format: "numeric"
      }
    ]
  ]
}) }}

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 scope="col" class="nhsuk-table__header">
        Name
      </th>
      <th scope="col" class="nhsuk-table__header">
        Email address
      </th>
      <th scope="col" class="nhsuk-table__header">
        Status
      </th>
      <th scope="col" class="nhsuk-table__header">
        <span class="nhsuk-u-visually-hidden">Actions</span>
      </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell nhsuk-u-text-break-word">
        Stephanie Meyer
      </td>
      <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">
      <td class="nhsuk-table__cell nhsuk-u-text-break-word">
        Aleksandrina Featherstonehaugh-Whitehead
      </td>
      <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: "Users",
  captionSize: "m",
  head: [
    {
      text: "Name"
    },
    {
      text: "Email address"
    },
    {
      text: "Status"
    },
    {
      html: '<span class="nhsuk-u-visually-hidden">Actions</span>'
    }
  ],
  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">
      <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 scope="col" class="nhsuk-table__header">
            Skin symptoms
          </th>
          <th scope="col" class="nhsuk-table__header">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Blisters on lips or around the mouth
          </td>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Itchy, dry, cracked, sore
          </td>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Itchy blisters
          </td>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

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

{{ table({
  card: true,
  caption: "Impetigo can look similar to other skin conditions",
  captionSize: "m",
  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 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">
      <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 scope="col" class="nhsuk-table__header">
            Skin symptoms
          </th>
          <th scope="col" class="nhsuk-table__header">
            Possible cause
          </th>
        </tr>
      </thead>
      <tbody class="nhsuk-table__body">
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Blisters on lips or around the mouth
          </td>
          <td class="nhsuk-table__cell">
            Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Itchy, dry, cracked, sore
          </td>
          <td class="nhsuk-table__cell">
            Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row">
          <td class="nhsuk-table__cell">
            Itchy blisters
          </td>
          <td class="nhsuk-table__cell">
            Shingles, chickenpox
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Macro

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

{{ table({
  card: {
    heading: "Other conditions like impetigo",
    headingSize: "m",
    variant: "feature"
  },
  caption: "Impetigo can look similar to other skin conditions",
  captionSize: "s",
  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 as a card (feature) responsive

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

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-responsive" 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 scope="col" class="nhsuk-table__header" role="columnheader">
            Skin symptoms
          </th>
          <th scope="col" class="nhsuk-table__header" role="columnheader">
            Possible cause
          </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-responsive__heading" aria-hidden="true">Skin problems </span>Blisters on lips or around the mouth
          </td>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table-responsive__heading" aria-hidden="true">Possible cause </span>Cold sores
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table-responsive__heading" aria-hidden="true">Skin problems </span>Itchy, dry, cracked, sore
          </td>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table-responsive__heading" aria-hidden="true">Possible cause </span>Eczema
          </td>
        </tr>
        <tr class="nhsuk-table__row" role="row">
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table-responsive__heading" aria-hidden="true">Skin problems </span>Itchy blisters
          </td>
          <td class="nhsuk-table__cell" role="cell">
            <span class="nhsuk-table-responsive__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: "Other conditions like impetigo",
    headingSize: "m",
    variant: "feature"
  },
  caption: "Impetigo can look similar to other skin conditions",
  captionSize: "s",
  responsive: true,
  head: [
    {
      text: "Skin symptoms"
    },
    {
      text: "Possible cause"
    }
  ],
  rows: [
    [
      {
        header: "Skin problems",
        text: "Blisters on lips or around the mouth"
      },
      {
        header: "Possible cause",
        text: "Cold sores"
      }
    ],
    [
      {
        header: "Skin problems",
        text: "Itchy, dry, cracked, sore"
      },
      {
        header: "Possible cause",
        text: "Eczema"
      }
    ],
    [
      {
        header: "Skin problems",
        text: "Itchy blisters"
      },
      {
        header: "Possible cause",
        text: "Shingles, chickenpox"
      }
    ]
  ]
}) }}