Tables

We've created multiple table classes to make formatting easier. Please note that tables should only be used to display tabular data and should not use to arrange blocks of text or images. When laying out text you should use the grid layouts, or box styles, or pull quotes.

Table tags & structure

Table below gives you a general idea of the HTML code structure for a table and its commonly-used tags.

TagDescription
<table>It defines a table.
<tr>It defines a row in a table.
<th>It defines a header cell in a table.
<td>It defines a cell in a table.
<tbody>It is used to group the body content in a table
<caption>It defines the table caption.
Code structure: Table

                    <table>
                        <caption> ... </caption>     //define your table caption here.
                        <tbody>     //container for body content.
                            <tr>     //1st row in your table - use this to define your table header cells.
                                <th> ... <th>     //header cell
                                <th> ... <th>     //header cell
                                ...
                            </tr>
                            <tr>     //2nd row in your table - start to enter your tabular data
                                <td> ... <td>     //table cell - matach your number of td with th.
                                <td> ... <td>     //table cell
                                ...
                            </tr>
                            ...
                        </tbody>
                    </table>

By default, a <table> has a black outer border, no borders within, and a tinted shade of table headers.

For accessibility, all tables should have table header cells and captions. You can also customise table borders and shadings.

Overview

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 size & position

Tables can use the standard alignment classes and width classes to specify its size and position.
For example, if you want your table to fill half width of the parent container, you can add .w50 to the table class.

<table class="w50"> ..</table>
Column widths

You can use these percentage-based classes to control the width of individual columns. These classes allow the table columns to layout properly on all screen sizes. These classes should be used on <th> level. To ensure the table is taking 100% width of its parent container, the sum of all column widths should be 100%.

Class nameWidthDescription
.tbl1010%The column width will be 10% of its parent container.
.tbl2020%The column width will be 20% of its parent container.
.tbl2525%The column width will be 25% of its parent container.
.tbl3030%The column width will be 30% of its parent container.
.tbl3333%The column width will be 33% of its parent container.
.tbl4040%The column width will be 40% of its parent container.
.tbl5050%The column width will be 50% of its parent container.
.tbl6060%The column width will be 60% of its parent container.
.tbl6767%The column width will be 67% of its parent container.
.tbl7070%The column width will be 70% of its parent container.
.tbl7575%The column width will be 75% of its parent container.
.tbl8080%The column width will be 80% of its parent container.
.tbl9090%The column width will be 90% of its parent container.
.tbl100100%The column width will be 100% of its parent container.
Table captions

Use the caption to provide a short descriptive title for your table. The <caption> element should be declared right after the <table> element. Only 1 caption per table.


                <table>
                    <caption> ... </caption>
                    <tbody>
                        ...
                    </tbody>
                </table>

Customisation

Table borders

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

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

<table class="tbl-row-bdr">

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

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

<table class="tbl-col-bdr">

To create a table with borders around every cell:

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

<table class="tbl-cell-bdr">

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

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

<table class="tbl-space">

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

You can also use .noborder to remove the outer border.

Table shading

You can apply standard colour classes (.bg-black, .bg-tint, .bg-white) to either:

  • the entire <table>;
  • individual row: <tr>; or
  • individual cell: <td>

But please note: header cell color is fixed, which is tint. This cannot be overwritten.

Example 1: <table class="tbl-row-bdr bg-black">
Head 1Head 2
Cell 1 contentsCell 2 contents
Cell 3 contentsCell 4 contents
Example 2: <tr class="bg-tint">
Head 1Head 2
Cell 1 contentsCell 2 contents
Cell 3 contentsCell 4 contents

Floating/Sticky table headers for long tables

If you have a long table that is likely to take up more than a 1-page scroll, you can use the following classes to make your table header sticky at the top - always visible.

  1. add the .anu-long-area to the <table>
  2. add the .anu-sticky-header to the first table row <tr>, which stores the header cells.

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


            <table class="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

Horizontal scroll 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 responsive as well. To do this, you will need to add the .fullwidthscroll to the parent <div> of the table.


            <div class="fullwidthscroll">
                <table class="tbl-cell-bdr">
                    <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>
                    ...
                </table>
            </div>

scroll sideways below for more content...

Demonstration of a scrolling table
Heading 1Heading 2Heading 3
Some data in a tableSome more dataLoremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
Some data in a tableSome more dataSome more data

Coming soon: Border colors

Use cases

Table width different column widths
40%10%25%25%
----

                    <table class="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>
Table with row headers
Example table with row headers
Heading 1Cell 1 contents
Heading 2Cell 2 contents

                        <table>
                            <caption>Example table with row headers</caption>
                            <tbody><tr>
                                <th scope="row">Heading 1</th>
                                <td>Cell 1 contents</td>
                            </tr>
                            <tr>
                                <th scope="row">Heading 2</th>
                                <td>Cell 2 contents</td>
                            </tr>
                            </tbody>
                        </table>