Tables

Tables are for displaying tabular data only and should not be used for layout purposes such as aligning images with text.

Simple Tables

A simple table has one row or column of headings.

States and Capitals
StateCapital
New South WalesSydney
VictoriaMelbourne
TasmaniaHobart
QueenslandBrisbane

An example of simple table syntax is shown below. A caption is a table identifier that acts like a heading for screen readers.

<table>
<caption>States and Capitals</caption>
<thead>
<tr><th>State</th><th>Capital</th></tr>
</thead>
<tbody>
<tr><td>New South Wales</td><td>Sydney</td></tr>
<tr><td>Victoria</td><td>Melbourne</td></tr>
<tr><td>Tasmania</td><td>Hobart</td></tr>
<tr><td>Queensland</td><td>Brisbane</td></tr>
</tbody>
</table>

Note: the <caption> tag is not strictly required for a simple table provided suitable heading information is provided in the preceding content.

 <h3>States and Capitals</h3> 
<thead>
<tr><th>State</th><th>Capital</th></tr>
</thead>
<tbody>
<tr><td>New
South Wales</td><td>Sydney</td></tr> ...

Complex Tables

A complex table may have multiple rows or columns of headings and possibly merged cells. A <caption> provides heading for complex tables while a 'summary' attribute is used on complex tables gives an overview of the purpose of the table.

Example of a Complex Table
CampusStudents
First Year
BathurstNew15
Returning7
OrangeNew5
Returning8
Second Year
DubboNew9
Returning3

Navigating complex tables

Complex tables need to associate the data cells with the headers to make them more accessible.

Using the 'scope' attribute

<table summary="An example of a complex table with spanned rows, 
columns and horizontal and vertical headers.">
<caption>Example of a Complex Table</caption>
<tbody>
<tr><th scope="col">Campus</th><th colspan="2 scope="col">Students</th></tr>
<tr><th colspan="3" scope="col">First Year</th></tr>
<tr><th rowspan="2" scope="row">Bathurst</th><td>New</td><td>15</td></tr>
<tr><td>Returning</td><td>7</td></tr>
<tr><th rowspan="2" scope="row">Orange</th><td>New</td><td>5</td></tr>
<tr><td>Returning</td><td>8</td></tr>
<tr><th colspan="3" scope="col">Second Year</th></tr>
<tr><th rowspan="2" scope="row">Dubbo</th><td>New</td><td>9</td></tr>
<tr><td>Returning</td><td>3</td></tr>
</tbody>
</table>

Using 'headers' and 'id' attributes

An 'id' is applied to a header cell while the 'headers' attribute lists those headers that relate to a particular cell. Screen readers will speak the headers associated with a cell on tables where the relationship can be difficult to perceive.

<table summary="An example of a complex table with spanned rows, 
columns and horizontal and vertical headers.">
<caption>Example of a Complex Table</caption>
<tbody>
<tr><th id="c1">Campus</th><th colspan="2" id="c2">Students</th></tr>
<tr><th colspan="3" id="r1">First Year</th></tr>
<tr><th rowspan="2" id="r2">Bathurst</th><td headers="c1 r2 c2">New</td><td>15</td></tr>
<tr><td>Returning</td><td>7</td></tr>
<tr><th rowspan="2" id="r3">Orange</th><td headers="c1 r3 c2 r1">New</td><td>5</td></tr>
<tr><td>Returning</td><td>8</td></tr>
<tr><th colspan="3" id="r4">Second Year</th></tr>
<tr><th rowspan="2" id="r5">Dubbo</th><td headers="c1 r5 c2 r4">New</td><td>9</td></tr>
<tr><td>Returning</td><td>3</td></tr>
</tbody>
</table>

Below is an example of how the ID and Headers attributes in the above example relate to cell content. Areas in green are highlights provided  by the Vision Australia Complex Data Table Mark-up Toolbar. Using IDs in table navigation

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Never used for layout
    • Use simple tables where possible.
    • Caption and/or Heading
    • No fixed width
    • CSS Styling
    • Heading Tags
    • Summary for Complex table
    • ID and Header attributes for Complex tables
  • Links

    chevron_right