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 |
Available Patterns
Standard Table A.1: Caption & header cells
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)
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
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
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
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 |