Table

Tables display sets of information in a grid-like format of rows and columns. Organising data this way makes it easier to scan, helping users locate patterns or specific facts.

Status
Released
Version

2.0.1

Last updated

28 Nov 2019

Basic table

This table without vertical divisions is suitable for displaying minimal content.

Application closing dates Session 1, 2019
Application Open Date 8 February 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019
Tuition fee due date 22 February 2019

Detailed table

To display a large amount of data, a table with ruled vertical lines and extra columns can be used.

Application closing dates Session 1, 2019 Session 2, 2019
Application Open Date
CLOSED*
 12 March 2019
On-time Application Closing Date ($75 Application) 8 February 2019 12 July 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019 19 July 2019
Tuition fee due date 22 February 2019 26 July 2019

Simple table

Use this table design where content is simple but particular items contain a large amount of text.

Application closing dates Session 1, 2019
Senior secondary study or at least one year of full-time tertiary study. American Samoa, Antigua and Barbuda, Australia, Bahamas, Barbados, Belize, Bermuda, Botswana, Canada, Cameroon, Cook Islands, Dominica, Falkland Islands, Fiji, Gambia, Ghana, Gibraltar, Grenada, Guyana, Ireland, Jamaica, Kenya, Kiribati, Lesotho, Liberia, Malawi, Maldives, Mauritius, Namibia, Nauru, New Zealand, Nigeria, Papua New Guinea, Philippines, Samoa, Seychelles, Sierra Leone, Singapore, Solomon Islands, South Africa, St Kitts and Nevis, St Lucia, Tanzania, Tonga, Trinidad and Tobago, Uganda, United Kingdom (including Northern Ireland), United States of America, Vanuatu, Zambia, Zimbabwe
Purpose

Focus on the data rather than the user interface when designing tables.

Organisation

Organise your table's contents in a meaningful way. Hierarchy, alphabetisation and table headings are potentially useful tools.

Highlight

Tints from GEM's secondary colour palette can be used to draw attention to information that is especially important.

Table Styles

Table - Basic

Application closing dates Session 1, 2019
Application Open Date
CLOSED*
On-time Application Closing Date ($75 Application) 8 February 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019
Tuition fee due date 22 February 2019 
                        <table>
                            <caption class="visually-hidden">Table Description</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Application closing dates</th>
                                    <th scope="col">Session 1, 2019</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Application Open Date</td>
                                    <td class="is-error"><div>CLOSED*</div></td>
                                </tr>
                                <tr>
                                    <td>On-time Application Closing Date ($75 Application)</td>
                                    <td>8 February 2019</td>
                                </tr>
                                <tr>
                                    <td>Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems.</td>
                                    <td>15 February 2019</td>
                                </tr>
                                <tr>
                                    <td>Tuition fee due date</td>
                                    <td>22 February 2019</td>
                                </tr>
                            </tbody>
                        </table>

Table - Simple

Application closing dates Session 1, 2019
Senior secondary study or at least one year of full-time tertiary study. American Samoa, Antigua and Barbuda, Australia, Bahamas, Barbados, Belize, Bermuda, Botswana, Canada, Cameroon, Cook Islands, Dominica, Falkland Islands, Fiji, Gambia, Ghana, Gibraltar, Grenada, Guyana, Ireland, Jamaica, Kenya, Kiribati, Lesotho, Liberia, Malawi, Maldives, Mauritius, Namibia, Nauru, New Zealand, Nigeria, Papua New Guinea, Philippines, Samoa, Seychelles, Sierra Leone, Singapore, Solomon Islands, South Africa, St Kitts and Nevis, St Lucia, Tanzania, Tonga, Trinidad and Tobago, Uganda, United Kingdom (including Northern Ireland), United States of America, Vanuatu, Zambia, Zimbabwe 
                        <table class="table--row-headings table--simple">
                            <caption class="visually-hidden">Table Description</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Application closing dates</th>
                                    <th scope="col">Session 1, 2019</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Senior secondary study or at least one year of full-time tertiary study.</td>
                                    <td>American Samoa, Antigua and Barbuda, Australia, Bahamas, Barbados, Belize, Bermuda, Botswana, Canada, Cameroon, Cook Islands, Dominica, Falkland Islands, Fiji, Gambia, Ghana, Gibraltar, Grenada, Guyana, Ireland, Jamaica, Kenya, Kiribati, Lesotho, Liberia, Malawi, Maldives, Mauritius, Namibia, Nauru, New Zealand, Nigeria, Papua New Guinea, Philippines, Samoa, Seychelles, Sierra Leone, Singapore, Solomon Islands, South Africa, St Kitts and Nevis, St Lucia, Tanzania, Tonga, Trinidad and Tobago, Uganda, United Kingdom (including Northern Ireland), United States of America, Vanuatu, Zambia, Zimbabwe</td>
                                </tr>
                            </tbody>
                        </table>

Table - Detailed

Application closing dates Session 1, 2019 Session 2, 2019
Application Open Date
CLOSED*
 12 March 2019
On-time Application Closing Date ($75 Application) 8 February 2019 12 July 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019 19 July 2019
Tuition fee due date 22 February 2019 26 July 2019 
                        <table class="table--detailed">
                            <caption class="visually-hidden">Table Description</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Application closing dates</th>
                                    <th scope="col">Session 1, 2019</th>
                                    <th scope="col">Session 2, 2019</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Application Open Date</td>
                                    <td class="is-error"><div>CLOSED*</div></td>
                                    <td>12 March 2019</td>
                                </tr>
                                <tr>
                                    <td>On-time Application Closing Date ($75 Application)</td>
                                    <td>8 February 2019</td>
                                    <td>12 July 2019</td>
                                </tr>
                                <tr>
                                    <td>Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems.</td>
                                    <td>15 February 2019</td>
                                    <td>19 July 2019</td>
                                </tr>
                                <tr>
                                    <td>Tuition fee due date</td>
                                    <td>22 February 2019</td>
                                    <td>26 July 2019</td>
                                </tr>
                            </tbody>
                        </table>

Table - Row Heading

Application closing dates Session 1, 2019 Session 2, 2019
Application Open Date
CLOSED*
 12 March 2019
On-time Application Closing Date ($75 Application) 8 February 2019 12 July 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019 19 July 2019
Tuition fee due date 22 February 2019 26 July 2019 
                    <table class="table--detailed table--row-headings">
                        <caption class="visually-hidden">Table Description</caption>
                        <thead>
                            <tr>
                                <th scope="col">Application closing dates</th>
                                <th scope="col">Session 1, 2019</th>
                                <th scope="col">Session 2, 2019</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Application Open Date</td>
                                <td class="is-error"><div>CLOSED*</div></td>
                                <td>12 March 2019</td>
                            </tr>
                            <tr>
                                <td>On-time Application Closing Date ($75 Application)</td>
                                <td>8 February 2019</td>
                                <td>12 July 2019</td>
                            </tr>
                            <tr>
                                <td>Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems.</td>
                                <td>15 February 2019</td>
                                <td>19 July 2019</td>
                            </tr>
                            <tr>
                                <td>Tuition fee due date</td>
                                <td>22 February 2019</td>
                                <td>26 July 2019</td>
                            </tr>
                        </tbody>
                    </table>

Table - Sticky Mobile

Application closing dates Session 1, 2019 Session 2, 2019
Application Open Date
CLOSED*
 12 March 2019
On-time Application Closing Date ($75 Application) 8 February 2019 12 July 2019
Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems. 15 February 2019 19 July 2019
Tuition fee due date 22 February 2019 26 July 2019 
                        <div class="table--detailed table--sticky">
                            <div class="table__container">
                                <table>
                                    <caption class="visually-hidden">Table Description</caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">Application closing dates</th>
                                            <th scope="col">Session 1, 2019</th>
                                            <th scope="col">Session 2, 2019</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Application Open Date</td>
                                            <td class="is-error"><div>CLOSED*</div></td>
                                            <td>12 March 2019</td>
                                        </tr>
                                        <tr>
                                            <td>On-time Application Closing Date ($75 Application)</td>
                                            <td>8 February 2019</td>
                                            <td>12 July 2019</td>
                                        </tr>
                                        <tr>
                                            <td>Application Open Day from the inner workings of the cell to outer space, Macquarie researchers are finding creative answers to real-world problems.</td>
                                            <td>15 February 2019</td>
                                            <td>19 July 2019</td>
                                        </tr>
                                        <tr>
                                            <td>Tuition fee due date</td>
                                            <td>22 February 2019</td>
                                            <td>26 July 2019</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>