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

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