Skip to main content

Table examples

  • # default

    Open this example in a new tab: button
    January £85 £95
    February £75 £55
    March £165 £125 
    {
  "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"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "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"
      }
    ]
  ]
}) }}

  • # with head

    Open this example in a new tab: button
    Month you apply Rate for bicycles Rate for vehicles
    January £85 £95
    February £75 £55
    March £165 £125 
    {
  "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"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "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"
      }
    ]
  ]
}) }}

  • # with head and caption

    Open this example in a new tab: button
    Caption 1: Months and rates
    Month you apply Rate for bicycles Rate for vehicles
    January £85 £95
    February £75 £55
    March £165 £125 
    {
  "caption": "Caption 1: 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"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "caption": "Caption 1: 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"
      }
    ]
  ]
}) }}

  • # classes

    Open this example in a new tab: button
    Jan Feb 
    {
  "classes": "custom-class-goes-here",
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "classes": "custom-class-goes-here",
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}) }}

  • # attributes

    Open this example in a new tab: button
    Jan Feb 
    {
  "attributes": {
    "data-foo": "bar"
  },
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "attributes": {
    "data-foo": "bar"
  },
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}) }}

  • # html as text

    Open this example in a new tab: button
    Foo <script>hacking.do(1337)</script>
    Foo <script>hacking.do(1337)</script> 
    {
  "head": [
    {
      "text": "Foo <script>hacking.do(1337)</script>"
    }
  ],
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "text": "Foo <script>hacking.do(1337)</script>"
    }
  ],
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
}) }}

  • # html

    Open this example in a new tab: button
    Foo bar
    Foo bar 
    {
  "head": [
    {
      "html": "Foo <span>bar</span>"
    }
  ],
  "rows": [
    [
      {
        "html": "Foo <span>bar</span>"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "html": "Foo <span>bar</span>"
    }
  ],
  "rows": [
    [
      {
        "html": "Foo <span>bar</span>"
      }
    ]
  ]
}) }}

  • # head with classes

    Open this example in a new tab: button
    Foo
    Jan Feb 
    {
  "head": [
    {
      "text": "Foo",
      "classes": "my-custom-class"
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "text": "Foo",
      "classes": "my-custom-class"
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}) }}

  • # head with rowspan and colspan

    Open this example in a new tab: button
    Foo
    Jan Feb 
    {
  "head": [
    {
      "text": "Foo",
      "rowspan": 2,
      "colspan": 2
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "text": "Foo",
      "rowspan": 2,
      "colspan": 2
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}) }}

  • # head with attributes

    Open this example in a new tab: button
    Foo
    Jan Feb 
    {
  "head": [
    {
      "text": "Foo",
      "attributes": {
        "data-fizz": "buzz"
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "text": "Foo",
      "attributes": {
        "data-fizz": "buzz"
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Jan"
      },
      {
        "text": "Feb"
      }
    ]
  ]
}) }}

  • # with firstCellIsHeader true

    Open this example in a new tab: button
    January £85 £95
    February £75 £55
    March £165 £125 
    {
  "firstCellIsHeader": true,
  "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"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "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"
      }
    ]
  ]
}) }}

  • # firstCellIsHeader with classes

    Open this example in a new tab: button
    Foo 
    {
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "my-custom-class"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "my-custom-class"
      }
    ]
  ]
}) }}

  • # firstCellIsHeader with html

    Open this example in a new tab: button
    Foo bar 
    {
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "html": "Foo <span>bar</span>"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "html": "Foo <span>bar</span>"
      }
    ]
  ]
}) }}

  • # firstCellIsHeader with html as text

    Open this example in a new tab: button
    Foo <script>hacking.do(1337)</script> 
    {
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
}) }}

  • # firstCellIsHeader with rowspan and colspan

    Open this example in a new tab: button
    Foo 
    {
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 2,
        "colspan": 2
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 2,
        "colspan": 2
      }
    ]
  ]
}) }}

  • # firstCellIsHeader with attributes

    Open this example in a new tab: button
    Foo 
    {
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}

  • # with falsy items

    Open this example in a new tab: button
    A 1
    B 2
    C 3 
    {
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": 1
      }
    ],
    false,
    null,
    [
      {
        "text": "B"
      },
      {
        "text": 2
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": 3
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": 1
      }
    ],
    false,
    null,
    [
      {
        "text": "B"
      },
      {
        "text": 2
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": 3
      }
    ]
  ]
}) }}

  • # rows with classes

    Open this example in a new tab: button
    Foo 
    {
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "my-custom-class"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "my-custom-class"
      }
    ]
  ]
}) }}

  • # rows with rowspan and colspan

    Open this example in a new tab: button
    Foo 
    {
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 2,
        "colspan": 2
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 2,
        "colspan": 2
      }
    ]
  ]
}) }}

  • # rows with attributes

    Open this example in a new tab: button
    Foo 
    {
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}

  • # with small text modifier for tables with a lot of data

    Open this example in a new tab: button
    January £85 £95
    February £75 £55
    March £165 £125 
    {
  "classes": "govuk-table--small-text-until-tablet",
  "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"
      }
    ]
  ]
}
    
{% from "govuk/components/table/macro.njk" import govukTable %}

{{ govukTable({
  "classes": "govuk-table--small-text-until-tablet",
  "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"
      }
    ]
  ]
}) }}