Table – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Table – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Table"> <meta name="description" content="Use the table component to make information easier to compare and scan for users"> <meta name="og:description" content="Use the table component to make information easier to compare and scan for users"> <link rel="canonical" href="https://design-system.service.gov.uk/components/table/"> <link href="/stylesheets/main-c4a333404e1796065e06bfef0e1fd954.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> Design System </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/" aria-current="page"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> Components <h1 class="govuk-heading-xl"> Table </h1> <div class="app-prose-scope"> Use the table component to make information easier to compare and scan for users. <div class="app-example-wrapper" id="table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/default/' target='_blank'> Open this example in a new tab: table </a> </div> <iframe title="Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/default/index.html" loading="eager"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-example-html" role="tab" aria-controls="table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-example-nunjucks" role="tab" aria-controls="table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#table-example-html" aria-controls="table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Date</th> <th scope="col" class="govuk-table__header">Amount</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">First 6 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 33 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Total estimated pay</th> <td class="govuk-table__cell">£4,282.20</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#table-example-nunjucks" aria-controls="table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Dates and amounts", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, head: [ { text: "Date" }, { text: "Amount" } ], rows: [ [ { text: "First 6 weeks" }, { text: "£109.80 per week" } ], [ { text: "Next 33 weeks" }, { text: "£109.80 per week" } ], [ { text: "Total estimated pay" }, { text: "£4,282.20" } ] ] }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> Use the table component to let users compare information in rows and columns. <h2 id="when-not-to-use-this-component">When not to use this component</h2> Never use the table component to layout content on a page. Instead, use the <a href="/styles/layout/#using-the-grid-system">grid system</a>. <h2 id="how-it-works">How it works</h2> <h3 id="table-captions">Table captions</h3> Use the <code><caption></code> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables. There are other styling options for table captions. You can use <code>govuk-table__caption--s</code>, <code>govuk-table__caption--m</code>, <code>govuk-table__caption--l</code> and <code>govuk-table__caption--xl</code> classes to make them larger or smaller from the default. <div class="app-example-wrapper" id="custom-caption-size-table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/caption-l/' target='_blank'> Open this example in a new tab: custom caption size – table </a> </div> <iframe title="Custom caption size – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/caption-l/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-caption-size-table-example-html" role="tab" aria-controls="custom-caption-size-table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-caption-size-table-example-nunjucks" role="tab" aria-controls="custom-caption-size-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#custom-caption-size-table-example-html" aria-controls="custom-caption-size-table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="custom-caption-size-table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--l">Months and rates</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Month you apply</th> <th scope="col" class="govuk-table__header">Rate for vehicles</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">January</th> <td class="govuk-table__cell">£95</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">February</th> <td class="govuk-table__cell">£55</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">March</th> <td class="govuk-table__cell">£125</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#custom-caption-size-table-example-nunjucks" aria-controls="custom-caption-size-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="custom-caption-size-table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-custom-caption-size-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-custom-caption-size-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-custom-caption-size-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-custom-caption-size-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-caption-size-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-caption-size-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Months and rates", captionClasses: "govuk-table__caption--l", firstCellIsHeader: true, head: [ { text: "Month you apply" }, { text: "Rate for vehicles" } ], rows: [ [ { text: "January" }, { text: "£95" } ], [ { text: "February" }, { text: "£55" } ], [ { text: "March" }, { text: "£125" } ] ] }) }}</code></pre> </div> </div> </div> <h3 id="table-headers">Table headers</h3> Use table headers to tell users what the rows and columns represent. Use the <code>scope</code> attribute to help users of assistive technology distinguish between row and column headers. There are 2 ways to use the table component. You can use HTML or, if you are using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the <a href="https://prototype-kit.service.gov.uk">GOV.UK Prototype Kit</a>, you can use the Nunjucks macro. <div class="app-example-wrapper" id="table-second-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/default/' target='_blank'> Open this example in a new tab: table second </a> </div> <iframe title="Table second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/default/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-second-example-html" role="tab" aria-controls="table-second-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-second-example-nunjucks" role="tab" aria-controls="table-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#table-second-example-html" aria-controls="table-second-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="table-second-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Date</th> <th scope="col" class="govuk-table__header">Amount</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">First 6 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 33 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Total estimated pay</th> <td class="govuk-table__cell">£4,282.20</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#table-second-example-nunjucks" aria-controls="table-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="table-second-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-table-second-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-table-second-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-table-second-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-table-second-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-table-second-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-table-second-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Dates and amounts", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, head: [ { text: "Date" }, { text: "Amount" } ], rows: [ [ { text: "First 6 weeks" }, { text: "£109.80 per week" } ], [ { text: "Next 33 weeks" }, { text: "£109.80 per week" } ], [ { text: "Total estimated pay" }, { text: "£4,282.20" } ] ] }) }}</code></pre> </div> </div> </div> <h2 id="numbers-in-a-table">Numbers in a table</h2> When comparing columns of numbers, align the numbers to the right in table cells. <div class="app-example-wrapper" id="numbers-in-a-table-table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/numbers/' target='_blank'> Open this example in a new tab: numbers in a table – table </a> </div> <iframe title="Numbers in a table – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/numbers/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#numbers-in-a-table-table-example-html" role="tab" aria-controls="numbers-in-a-table-table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#numbers-in-a-table-table-example-nunjucks" role="tab" aria-controls="numbers-in-a-table-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#numbers-in-a-table-table-example-html" aria-controls="numbers-in-a-table-table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="numbers-in-a-table-table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--m">Months and rates</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Month you apply</th> <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th> <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">January</th> <td class="govuk-table__cell govuk-table__cell--numeric">£85</td> <td class="govuk-table__cell govuk-table__cell--numeric">£95</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">February</th> <td class="govuk-table__cell govuk-table__cell--numeric">£75</td> <td class="govuk-table__cell govuk-table__cell--numeric">£55</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">March</th> <td class="govuk-table__cell govuk-table__cell--numeric">£165</td> <td class="govuk-table__cell govuk-table__cell--numeric">£125</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#numbers-in-a-table-table-example-nunjucks" aria-controls="numbers-in-a-table-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="numbers-in-a-table-table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-numbers-in-a-table-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-numbers-in-a-table-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-numbers-in-a-table-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-numbers-in-a-table-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-numbers-in-a-table-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-numbers-in-a-table-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Months and rates", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, head: [ { text: "Month you apply" }, { text: "Rate for bicycles", format: "numeric" }, { text: "Rate for vehicles", format: "numeric" } ], rows: [ [ { text: "January" }, { text: "£85", format: "numeric" }, { text: "£95", format: "numeric" } ], [ { text: "February" }, { text: "£75", format: "numeric" }, { text: "£55", format: "numeric" } ], [ { text: "March" }, { text: "£165", format: "numeric" }, { text: "£125", format: "numeric" } ] ] }) }}</code></pre> </div> </div> </div> <h2 id="custom-column-widths">Custom column widths</h2> You can use the <a href="/styles/layout/#width-override-classes">width override classes</a> to set the width of table columns. <div class="app-example-wrapper" id="custom-width-using-override-classes-table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/column-widths/' target='_blank'> Open this example in a new tab: custom width using override classes – table </a> </div> <iframe title="Custom width using override classes – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/column-widths/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-override-classes-table-example-html" role="tab" aria-controls="custom-width-using-override-classes-table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-override-classes-table-example-nunjucks" role="tab" aria-controls="custom-width-using-override-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#custom-width-using-override-classes-table-example-html" aria-controls="custom-width-using-override-classes-table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="custom-width-using-override-classes-table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--m">Month you apply</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header govuk-!-width-one-half">Date</th> <th scope="col" class="govuk-table__header govuk-!-width-one-quarter">Rate for vehicles</th> <th scope="col" class="govuk-table__header govuk-!-width-one-quarter">Rate for bicycles</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">First 6 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> <td class="govuk-table__cell">£59.10 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 33 weeks</th> <td class="govuk-table__cell">£159.80 per week</td> <td class="govuk-table__cell">£89.10 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Total estimated pay</th> <td class="govuk-table__cell">£4,282.20</td> <td class="govuk-table__cell">£2,182.20</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#custom-width-using-override-classes-table-example-nunjucks" aria-controls="custom-width-using-override-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="custom-width-using-override-classes-table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-custom-width-using-override-classes-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-custom-width-using-override-classes-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-custom-width-using-override-classes-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-custom-width-using-override-classes-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-width-using-override-classes-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-width-using-override-classes-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Month you apply", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, head: [ { text: "Date", classes: "govuk-!-width-one-half" }, { text: "Rate for vehicles", classes: "govuk-!-width-one-quarter" }, { text: "Rate for bicycles", classes: "govuk-!-width-one-quarter" } ], rows: [ [ { text: "First 6 weeks" }, { text: "£109.80 per week" }, { text: "£59.10 per week" } ], [ { text: "Next 33 weeks" }, { text: "£159.80 per week" }, { text: "£89.10 per week" } ], [ { text: "Total estimated pay" }, { text: "£4,282.20" }, { text: "£2,182.20" } ] ] }) }}</code></pre> </div> </div> </div> If the <a href="/styles/layout/#width-override-classes">width override classes</a> do not meet your needs you can create your own width classes and apply them to the cells in the table head. These can be added using the <code>classes</code> option in the Nunjucks macro or adding the class directly to the individual cells within <code>govuk-table__head</code> as below. To learn more about this, read guidance on <a href="/get-started/extending-and-modifying-components/">extending and modifying components in production</a>. <div class="app-example-wrapper" id="custom-width-using-custom-classes-table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/column-widths-custom-classes/' target='_blank'> Open this example in a new tab: custom width using custom classes – table </a> </div> <iframe title="Custom width using custom classes – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/column-widths-custom-classes/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-custom-classes-table-example-html" role="tab" aria-controls="custom-width-using-custom-classes-table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-custom-classes-table-example-nunjucks" role="tab" aria-controls="custom-width-using-custom-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#custom-width-using-custom-classes-table-example-html" aria-controls="custom-width-using-custom-classes-table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="custom-width-using-custom-classes-table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <caption class="govuk-table__caption govuk-table__caption--m">Month you apply</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header app-custom-class">Date</th> <th scope="col" class="govuk-table__header app-custom-class">Rate for vehicles</th> <th scope="col" class="govuk-table__header app-custom-class">Rate for bicycles</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">First 6 weeks</th> <td class="govuk-table__cell">£109.80 per week</td> <td class="govuk-table__cell">£59.10 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 33 weeks</th> <td class="govuk-table__cell">£159.80 per week</td> <td class="govuk-table__cell">£89.10 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Total estimated pay</th> <td class="govuk-table__cell">£4,282.20</td> <td class="govuk-table__cell">£2,182.20</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#custom-width-using-custom-classes-table-example-nunjucks" aria-controls="custom-width-using-custom-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="custom-width-using-custom-classes-table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-custom-width-using-custom-classes-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-custom-width-using-custom-classes-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-custom-width-using-custom-classes-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-custom-width-using-custom-classes-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-width-using-custom-classes-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-custom-width-using-custom-classes-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Month you apply", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, head: [ { text: "Date", classes: "app-custom-class" }, { text: "Rate for vehicles", classes: "app-custom-class" }, { text: "Rate for bicycles", classes: "app-custom-class" } ], rows: [ [ { text: "First 6 weeks" }, { text: "£109.80 per week" }, { text: "£59.10 per week" } ], [ { text: "Next 33 weeks" }, { text: "£159.80 per week" }, { text: "£89.10 per week" } ], [ { text: "Total estimated pay" }, { text: "£4,282.20" }, { text: "£2,182.20" } ] ] }) }}</code></pre> </div> </div> </div> <h2 id="tables-with-a-lot-of-data">Tables with a lot of data</h2> If possible, you should aim to have less data in your tables. If you have a lot of data, try to organise it into multiple tables or multiple pages. If you cannot split your data, you can use the CSS class <code>govuk-table--small-text-until-tablet</code>. This class reduces the size of the text on small screens so large amounts of data has more empty space around it. This makes it easier to visually differentiate between each piece of data when read on small screens. <div class="govuk-inset-text"> The CSS class <code>govuk-table--small-text-until-tablet</code> is only available in version 5.2 of GOV.UK Frontend and later.Read about <a href="/get-started/new-type-scale/">updating your service to use the new type scale</a>. </div> You should not use this class on tables unless your table has a lot of data, because a smaller amount of data is easier to read if the text is larger. <div class="app-example-wrapper" id="lots-of-data-table-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/table/lots-of-data/' target='_blank'> Open this example in a new tab: lots of data – table </a> </div> <iframe title="Lots of data – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/lots-of-data/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#lots-of-data-table-example-html" role="tab" aria-controls="lots-of-data-table-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#lots-of-data-table-example-nunjucks" role="tab" aria-controls="lots-of-data-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#lots-of-data-table-example-html" aria-controls="lots-of-data-table-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="lots-of-data-table-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table govuk-table--small-text-until-tablet"> <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th scope="col" class="govuk-table__header">Date</th> <th scope="col" class="govuk-table__header">First amount</th> <th scope="col" class="govuk-table__header">Second amount</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">First 3 weeks</th> <td class="govuk-table__cell">£27.45 per week</td> <td class="govuk-table__cell">£33.90 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 6 weeks</th> <td class="govuk-table__cell">£27.45 per week</td> <td class="govuk-table__cell">£33.90 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 24 weeks</th> <td class="govuk-table__cell">£27.45 per week</td> <td class="govuk-table__cell">£33.90 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Next 33 weeks</th> <td class="govuk-table__cell">£27.45 per week</td> <td class="govuk-table__cell">£33.90 per week</td> </tr> <tr class="govuk-table__row"> <th scope="row" class="govuk-table__header">Total estimated pay</th> <td class="govuk-table__cell">£4,282.20</td> <td class="govuk-table__cell">£5,288.40</td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#lots-of-data-table-example-nunjucks" aria-controls="lots-of-data-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="lots-of-data-table-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-lots-of-data-table-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-lots-of-data-table-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rows</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Required. The rows within the table component. <a href="#options-lots-of-data-table-example--rows"> See macro options for rows</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">head</th> <td class="govuk-table__cell">array</td> <td class="govuk-table__cell"> Can be used to add a row of table header cells (<code><th></code>) at the top of the table component. <a href="#options-lots-of-data-table-example--head"> See macro options for head</a>. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">caption</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Caption text. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">captionClasses</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes for caption text size. Classes should correspond to the available typography heading classes. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">firstCellIsHeader</th> <td class="govuk-table__cell">boolean</td> <td class="govuk-table__cell"> If set to <code>true</code>, the first cell in each row will be a table header (<code><th></code>). </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table container. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table container. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-lots-of-data-table-example--rows"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>rows</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML for cells in table rows. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table row cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> <table class="govuk-table app-options__table" id="options-lots-of-data-table-example--head"> <caption class="govuk-table__caption govuk-heading-m ">Options for <code>head</code> array objects</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>html</code> is set, this is not required. Text for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> If <code>text</code> is set, this is not required. HTML for table head cells. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">format</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Specify format of a cell. Currently we only use “numeric”. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the table head cell. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">colspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many columns a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">rowspan</th> <td class="govuk-table__cell">integer</td> <td class="govuk-table__cell"> Specify how many rows a cell extends. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the table cell. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{% from "govuk/components/table/macro.njk" import govukTable %} {{ govukTable({ caption: "Dates and amounts", captionClasses: "govuk-table__caption--m", firstCellIsHeader: true, classes: "govuk-table--small-text-until-tablet", head: [ { text: "Date" }, { text: "First amount" }, { text: "Second amount" } ], rows: [ [ { text: "First 3 weeks" }, { text: "£27.45 per week" }, { text: "£33.90 per week" } ], [ { text: "Next 6 weeks" }, { text: "£27.45 per week" }, { text: "£33.90 per week" } ], [ { text: "Next 24 weeks" }, { text: "£27.45 per week" }, { text: "£33.90 per week" } ], [ { text: "Next 33 weeks" }, { text: "£27.45 per week" }, { text: "£33.90 per week" } ], [ { text: "Total estimated pay" }, { text: "£4,282.20" }, { text: "£5,288.40" } ] ] }) }}</code></pre> </div> </div> </div> </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> To help make sure that this page is useful, relevant and up to date, you can: <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/61"> ‘Table’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/table/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-f59bf1e64302757cb67086172d7d4999.js"></script> </body> </html>

CINXE.COM

Table – GOV.UK Design System