This page contains examples of the styles available for tables generated by the CMS as well as some basic table html for editors who create them manually.
To add one of the below styles to your table simply create your table, right click and select 'Table properties' and begin typing 'table' into the style field and the options for styling will appear. You can see all the style options listed below along with their names. We have also developed a way to format wide tables so that they stack on mobile devices and do not cause horizontal scrolling.
Making sure your tables don't cause horizontal scrolling
If you have a table which contains a lot of columns and therefore is wide this can often cause horizontal scrolling on mobile which does not meet WCAG 2.1 accessibility requirements. To prevent this from happening you can add 'table--accessible_user' alongside any of the below styling options. This is added in the same way outlined previously.
table--accessible_user
The following example has 'table__green_user' and 'table--accessible_user' added into the Style field. If you right click on this page and click 'inspect' you can see how this table would stack on mobile.
Table of residences
Name of Residence | Room Type | Village | Number of rooms | Total Cost |
Ashcroft |
Single Bedroom with Shared Bathroom, Self-catered |
Pritchatts Park Village |
£102 |
£5,060 |
Jarratt Hall |
En-suite Bedroom, Self-catered |
Selly Oak Village |
£157 |
£7,803 |
Tennis Court |
En-suite Bedroom, Self-catered |
The Vale Village |
£156 |
£7,754 |
Mason |
En-suite Bedroom, Self-catered |
The Vale Village |
£163 |
£8,085 |
Pritchatts Road (Studio) |
Studios and Apartments |
Pritchatts Park Village |
£202 |
£10,033 |
Pritchatts Road (Studio Plus) |
Studios and Apartments |
Pritchatts Park Village |
£215 |
£10,653 |
Shackleton (Studio Plus) |
Studios and Apartments |
The Vale Village |
£215 |
£10,653 |
Shackleton (Studio Apartment) |
Studios and Apartments |
The Vale Village |
£254 |
£12,588 |
Pritchatts Road (Studio Apartment) |
Studios and Apartments |
Pritchatts Park Village |
£254 |
£12,588 |
Mason (Studio Apartment) |
Studios and Apartments |
The Vale Village |
£254 |
£12,588 |
Mason (Studio Apartment Plus) |
Studios and Apartments |
The Vale Village |
£271 |
£13,468 |
Pritchatts Road (Studio Apartment Plus) |
Studios and Apartments |
Pritchatts Park Village |
£271 |
£13,468 |
Example without using the accessibility styling
You will see that in mobile view this table causes scrolling without the accessibility styling option added:
Table of residences
Name of Residence | Room Type | Village | Cost per week | Total Cost |
Ashcroft |
Single Bedroom with Shared Bathroom, Self-catered |
Pritchatts Park Village |
£102 |
£5,060 |
Jarratt Hall |
En-suite Bedroom, Self-catered |
Selly Oak Village |
£157 |
£7,803 |
Tennis Court |
En-suite Bedroom, Self-catered |
The Vale Village |
£156 |
£7,754 |
Mason |
En-suite Bedroom, Self-catered |
The Vale Village |
£163 |
£8,085 |
Pritchatts Road (Studio) |
Studios and Apartments |
Pritchatts Park Village |
£202 |
£10,033 |
Pritchatts Road (Studio Plus) |
Studios and Apartments |
Pritchatts Park Village |
£215 |
£10,653 |
Shackleton (Studio Plus) |
Studios and Apartments |
The Vale Village |
£215 |
£10,653 |
Shackleton (Studio Apartment) |
Studios and Apartments |
The Vale Village |
£254 |
£12,588 |
Pritchatts Road (Studio Apartment) |
Studios and Apartments |
Pritchatts Park Village |
£254 |
£12,588 |
Mason (Studio Apartment) |
Studios and Apartments |
The Vale Village |
£254 |
£12,588 |
Mason (Studio Apartment Plus) |
Studios and Apartments |
The Vale Village |
£271 |
£13,468 |
Pritchatts Road (Studio Apartment Plus) |
Studios and Apartments |
Pritchatts Park Village |
£271 |
£13,468 |
Tables with medium and long headings
If your tables contain headings which are longer in length and look untidy in mobile view when using the 'table--accessible_user' style you may instead want to use 'table--accessible-medium-headings_user' or 'table--accessible-long-headings_user'. These are added in the same way but the weighting is increased for the heading text. Editors should test their tables in mobile view with each of the styles to see which displays best.
Visual styling options
Dark blue table (table__blue--dark_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Dark blue alternative table (table__blue--dark--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Dark blue alternative table with row headers (table__blue--dark--headers-alt_user)
Purple table (table__purple_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Purple alternative table (table__purple--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Purple alternative table with row headers (table__purple--headers-alt_user)
Blue table (table__blue_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Blue alternative table variant (table__blue--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Blue alternative table with row headers (table__blue--headers-alt_user)
Demin table (table__denim_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Demin alternative table (table__denim--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Denim alternative table with row headers (table__denim--headers-alt_user)
Green table (table__green_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Green alternative table (table__green--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Green alternative table with row headers (table__green--headers-alt_user)
Dark gray table (table__gray--dark_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Dark gray alternative table (table__gray--dark--alt_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Dark gray alternative table with row headers (table__gray--dark--headers-alt_user)
Basic tables
Dark blue (table__basic--dark--blue_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Purple (table__basic--purple_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Blue (table__basic--blue_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Denim (table__basic--denim_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Green (table__basic--green_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
Dark gray (table__basic--gray--dark_user)
This is a CMS-generated table with headers across the top
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a hand-made table with headers across the top with an explicit 'thead' tag
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 Column 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 Column 1 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |
This is a CMS-generated table with headers across the top and the left
Header 1 | Header 2 | Header 3 | Header 4 |
Row 1 |
Row 1 Column 2 |
Row 1 Column 3 |
Row 1 Column 4 |
Row 2 |
Row 2 Column 2 |
Row 2 Column 3 |
Row 2 Column 4 |