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:
<tr>
<th class="tbl40">40%</th>
<th class="tbl10">10%</th>
<th class="tbl25">25%</th>
<th class="tbl25">25%</th>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
</table>
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.
Heading 1 | Heading 2 |
---|---|
Cell 1 contents | Cell 2 contents |
<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>
Heading 1 | Cell 1 contents |
---|---|
Heading 2 | Cell 2 contents |
<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 elementstbl-row-bdr-uni
- row borders onlytbl-col-bdr-uni
- column borders onlytbl-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.
<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>
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.
<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>
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 |