Skip to content

Tables

This page contains your standard UI pattern for tabular data only. If you wish to allow the user to sort or search the table's data, please see the sortable/searchable table pattern.

Suggested Table Colour Schemes

Table row/cell colour styles are available as 'classes' from the University style sheet. It is suggested that web maintainers use styles rather than embedding colours in content tables. These colour schemes are NOT intended to be used all at once, but rather as individual combinations to emphasise aspects of your tabular data. Table content should also incorporate 'headers'.

Examples of table row/cell colour styles and the corresponding 'class' are displayed below.

<table class="light">

<th> <th> <th>
<th class="alt"> <th class="alt">
content content content
<td class="alt"> <td class="alt"> <td class="alt">
content content content
content content content
return to top

Available Patterns

Standard Table A.1: Caption & header cells

Table Caption
Column header Column header Column header
Column cell Column cell Column cell
Subheading Subheading Subheading
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table A.2: No caption, header cells and subheading cells with alternate column cells. (to retain old content)

Table Caption
Column header Column header Column header
Column cell Column cell Column cell
Subheading Subheading Subheading
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table B: Caption & row header cells

Table Caption
Column header Column cell Column cell
Column header Column cell Column cell
Column header Column cell Column cell
Column header Column cell Column cell

- - -

Standard Table C.1: Caption, no header cells - styling on cells

Table Caption
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table C.2: Caption, no header cells - styling on row

Table Caption
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table D: No caption, no header cells

Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table E: No caption, row header cells

Column header Column cell Column cell
Column header Column cell Column cell
Column header Column cell Column cell
Column header Column cell Column cell

- - -

Standard Table F: No caption, header cells

Column header Column header Column header
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell

- - -

Standard Table G: No caption, header cells - Colour variations for highlighting cells

The colour variations for cells is something that is not to be 'over used'. Be mindful that simplicity is a good thing and using the below cell colours should be used only when appropriate to highlight information that is in a similar context i.e. 'grouped' or to highlight an important cell. The below shows the colour options, we do not recommend having each column highlighted in a different colour, nor should these be used in place of a heading cell and the above displayed formatting, this is just an example. If you have any queries please contact us.

Column header Column header Column header
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell
Column cell Column cell Column cell



 

Web Team

Call us: For urgent requests or to speak with someone directly,
please contact one of our team members.
 
Still not sure how to do something? Submit an online enquiry.