Tables

There are a number of table classes to make formatting easier. Please note that tables should only be used to display tabular data and not used to arrange blocks of text or images. When laying out text you should use the content grid, or box styles, or pull quotes.

By default, a <table> has a border around the outside, no borders within and no shading. The border colour will automatically be 100 per cent of the college or uni colour.

For accessibility, all tables should have table header cells and captions. This is described below, along with instructions for changing the borders and shading.

Alignment & width

If you are using version 4 of the ANU web styles, your site will be responsive - it will change layout depending on the screen size of the user's device. For this reason, you should not set your table or column widths to pixel values.

Table alignment & width

Tables can use the standard alignment and width classes to specify where the table sits on a page and how wide it is.

For example, if you want your table to fill the width of the screen, use a 'fullwidth' class on the table:

Column widths

If you want to control the width of columns in your table there are percentage-based classes available for use. These classes allow the table columns to lay out properly on all screen sizes. There are classes for 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 25, 75, 33 and 67 per cent of the table width.

For example:

40%	10%	25%	25%
-	-	-	-

Note that if the contents of a cell are wider than the class specifies, then the column width will expand to fit the content if it cannot wrap the text onto the next line (eg if there are no spaces).

Table captions

The <caption> element is the most accessible way of providing a short descriptive title for a table. When coding a table, the <caption> element should come immediately after the <table> element and before anything else. Only one caption can be specified per table.

Table headers

You must add header cells by using <th> around the table cells that contain the column or row headings. This will allow your table to be clearly understood and accessible by those viewing your site through alternative methods, such as screen readers.

Table headers are shaded with 25 per cent college or uni colour, and use bold 100 per cent colour text within.

In Dreamweaver, you can make a table cell into a header cell by selecting the Header checkbox in Properties.

Example table with column headers
Heading 1	Heading 2
Cell 1 contents	Cell 2 contents

<table class="w-wide">
<caption>Example table with column headers</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell 1 contents</td>
<td>Cell 2 contents </td>
</tr>
</table>

Example table with row headers
Heading 1	Cell 1 contents
Heading 2	Cell 2 contents

<table class="w-wide">
<caption>Example table with row headers</caption>
<tr>
<th>Heading 1</th>
<td>Cell 1 contents</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Cell 2 contents</td>
</tr>
</table>

Table borders

To create a table with borders only applied to the rows:

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

To create a table with borders only applied to the columns:

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

To create a table with borders around every cell:

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

To create a table with a border around the outside and extra space between the cells:

Shading is not included by default, but has been added here so that you can see the extra space between cells.

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

Outer border

You can remove the outer border from a table by adding the class noborder.

For example, the following table is set to have row borders but no outer border:

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

Border colours

On College websites tables will be College colour by default. To override this with University colour, use:

tbl-uni - all table elements
tbl-row-bdr-uni - row borders only
tbl-col-bdr-uni - column borders only
tbl-cell-bdr-uni - all cell borders

Table shading

Tables can be shaded using the appropriate background colour class on the table, row or cell. For example:

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

Row shading

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

Cell shading

Head 1	Head 2
Cell 1 contents	Cell 2 contents
Cell 3 contents	Cell 4 contents

Floating table headers for long tables

If you have a long table that is likely to take up more than one page, you can use floating table headers to make sure the first row of the table is always visible. To create a table with a floating header, you will need to do two things:

add the class 'anu-long-area' to the table
add the class 'anu-sticky-header' to the first table row

Note: the sticky header will not work in Internet Explorer 7, but should work in more modern browsers.

<table class="fullwidth tbl-cell-bdr anu-long-area">
<tr class="anu-sticky-header">
<th>Heading 1</th><th>Heading 2</th>
</tr>

<tr>
<td>Some data in a table</td><td>Some more data</td>
</tr>

<tr>
<td>Some data in a table</td><td>Some more data</td>
</tr>
...
</table>

Demonstration of a table with a floating header
Heading 1	Heading 2
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data
Some data in a table	Some more data

Scrolling tables for wide tables

If you have a wide table that flows outside the screen area on smaller screens (when using responsive styles), you may want to make your table content scroll in place. To do this, you will need to add the class 'anu-wide-scroll' to the table.

A table with the 'anu-wide-scroll' class will have an indicator at the top and a horizontal scrollbar at the bottom when the table content will not fit in the page width.

<table class="fullwidth tbl-cell-bdr anu-wide-scroll">
<tr>
<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th>
</tr>

<tr>
<td>Some data in a table</td><td>Some more data</td><td>Some more datathatwontwrap...</td>
</tr>

<tr>
<td>Some data in a table</td><td>Some more data</td><td>Some more data</td>
</tr>
</table>

Demonstration of a scrolling table
Heading 1	Heading 2	Heading 3
Some data in a table	Some more data	Some more datathatwontwrapandmakesthetablereallywidewhichisaproblemonsmallerscreens
Some data in a table	Some more data	Some more data

Updated: 20 March 2018/ Responsible Officer: Director Marketing/ Page Contact: Webstyle