Table Styling Options

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 ResidenceRoom TypeVillageNumber of roomsTotal 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 ResidenceRoom TypeVillageCost per weekTotal 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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 (table__purple_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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 (table__blue_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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 table (table__denim_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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 (table__green_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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 (table__gray--dark_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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)

This is a CMS-generated table with headers across the top and the left
Header 1Header 2Header 3Header 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

Basic tables

Dark blue (table__basic--dark--blue_user)

This is a CMS-generated table with headers across the top
Header 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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 1Header 2Header 3Header 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



Colleges

Professional Services