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:

<table class="fullwidth">
   

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:

<table class="fullwidth tbl-cell-bdr">
  <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 10 per cent college or uni colour, and use bold 100 per cent colour centred 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:

<table class="tbl-row-bdr">
 
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:

<table class="tbl-col-bdr">
 
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:

<table class="tbl-cell-bdr">
 
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:

<table class="tbl-space">
 

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:

<table class="tbl-row-bdr noborder">
 
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:

<table class="tbl-row-bdr noborder bg-uni25">
 
Head 1 Head 2
Cell 1 contents Cell 2 contents
Cell 3 contents Cell 4 contents

Row shading

<table class="tbl-space"><tr><th>...</tr><tr class="bg-uni25">...</table>
 
Head 1 Head 2
Cell 1 contents Cell 2 contents
Cell 3 contents Cell 4 contents

Cell shading

<table class="tbl-col-bdr"><tr><th>...<tr><td class="bg-uni25">...</table>
 
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 three things:

  1. add a javascript call to 'style.anu.edu.au/_anu/4/scripts/anu-tables.js'
  2. add the class 'anu-long-area' to the table
  3. add the class 'anu-sticky-header' to the first table row

Note: make sure you only include the javascript file once per page. If you include it more than once, you may find you have multiple headings on your tables.

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

<script src="//style.anu.edu.au/_anu/4/scripts/anu-tables.js" type="text/javascript"></script>

<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 1Heading 2
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome more data
Some data in a tableSome 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 add some classes to make your table content scroll in place. To do this, you will need to do two things:

  1. add a javascript call to 'style.anu.edu.au/_anu/4/scripts/anu-tables.js'
  2. add the class 'anu-wide-scroll' to the table

Note: make sure you only include the javascript file once per page.

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

<script src="//style.anu.edu.au/_anu/4/scripts/anu-tables.js" type="text/javascript"></script>

<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 1Heading 2Heading 3
Some data in a tableSome more dataSome more datathatwontwrapandmakesthetablereallywidewhichisaproblemonsmallerscreens
Some data in a tableSome more dataSome more data

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle