Tables

Use tables within content pages to display data, or where there is a list of items with more than one attribute for each item.​

For example, the table below from a school admissions page clearly shows the date and time of school admissions information events for each venue.

Tables

How to format tables

Tables should all have the style, 'grey striped' applied and should have a header row with a heading inserted for each column. If desired, the first or last column or last row can also be specified.

Tables should always have a summary added for accessibility (this will also help with SEO, so add keywords where possible).

All tables should have a width of 100% so that they use the full width of the content placeholder.

Additionally, in order for tables to work correctly on smaller screens, it is necessary to wrap a <div> code of <div class=“table-responsive”> around the table html. This will enable the user to scroll horizontally if the table is wider than the screen they are using.