Tables in the Single Digital Presence (SDP) content management system can be built using either the table option in the Basic text component toolbar or the Data table component.
Before adding tables to your content, we recommend reading the Australian Government Style Manual’s guidance on tables.
By default, tables will expand to take up the full text width space on your screen. On desktops, this is 818 px wide.
Alignment of text in tables
This functionality is currently not working. Please submit a ticket if you require this. We’re working on it!
Most tables should be left-aligned because we read left-to-right. However, tables with financial figures should have any columns with numerals set to right-aligned.
To change the alignment, you need to go into the source code and edit the HTML.
The code options you can use are:
align="left"
align="right"
align="center" (note the US spelling)
align="justify"
Remember to always add a space between “th” or “td” and the alignment code snippet, so it looks like this: <th align="right">
How to add the code
In the component with your table, click the Source button. Look for code like this:
<table><thead><tr><th>Year</th><th>Total amount ($)</th></tr></thead><tbody><tr><td>2019</td><td>23,100</td></tr><tr><td>2020</td><td>19,870</td></tr><tr><td>2021</td><td>21,100</td></tr></tbody></table>
The heading cells are coded <th>.
The rest of the cells are coded <td>.
To set right-alignment for the second column (as displayed in the example), you need to add the code snippet into the <th> and all the corresponding <td> tags.
Here's an example, using the code above with the alignment snipped added:
<table><thead><tr><th>Year</th><th align="right">Total amount ($)</th></tr></thead><tbody><tr><td>2019</td><td align="right">23,100</td></tr><tr><td>2020</td><td align="right">19,870</td></tr><tr><td>2021</td><td align="right">21,100</td></tr></tbody></table>
Setting column width in tables
This functionality is currently not working. Please submit a ticket if you require this. We’re working on it!
You can set a column width in just the heading row and that setting will then apply to the whole column. (This is different to alignment, which you have to set up in every cell.)
One reason you might want to do this when you have a page with several similar tables and, due to varying lengths of content, they are displaying with varying column widths. In this case, setting the width of the columns should make the page content look better.
Merging cells in tables
Occasionally you may want to merge some cells in a table heading row, which you can do via the source code.
Don't overuse merged cells in tables though, as they can be a tricky for screen readers, especially in complex data tables.
For example: the screen reader app NVDA does not announce when a cell spans multiple rows or columns. (Source: accessibility-developer-guide.com).
Some users may find it easier to work with several simple tables than one complex table, so consider whether you can convert a complex table to one or more simple tables. (Source: w3.org)
Use the colspan code
If you're merging cells in a column (such as a heading), you insert the code and remove extra cells that relate to the spanning.
For example: picture a table that has 5 columns, and its first row is set up as the headings. We want merge the heading cells in columns 1, 2 and 3, so we’ll delete the heading code snippet for columns 2 and 3. The rest of the table has 5 cells per row.
<table><thead><tr><th colspan="3">Head 1,2,3</th><th>Head 4</th><th>Head 5</th></tr></thead><tbody><tr><td>blah blah</td><td>blah blah</td><td>blah blah</td><td>blah blah</td><td>blah blah</td></tr><tr><td>blah blah</td><td>blah blah</td><td>blah blah</td><td>blah blah</td><td>blah blah</td></tr></tbody></table>
Here's what the above code looks like:
Use the rowspan code
If you've set up a table and chosen the first column as the heading row, you'll notice the code looks different to the example above. There are no <thead> tags, and instead the first cell in each row has <th scope="row"> which indicates it's a heading.
Here's an example:
<table><tbody><tr><th scope="row">Head 1</th><td>data</td><td>data</td></tr><tr><th scope="row">Head 2</th><td>data</td><td>data</td></tr><tr><th scope="row">Head 3</th><td>data</td><td>data</td></tr><tr><th scope="row">Head 4</th><td>data</td><td>data</td></tr></tbody></table>
This is what the above code looks like:
To merge cells in rows, you insert the code and remove the extra cells that relate to the spanning.
In this example, the table has 3 columns. We want to merge the heading cells in column 1, rows 1 and 2. The cell with <th> tags in the second row therefore needs to be deleted.
<table><tbody><tr><th scope="row" rowspan="2">Head 1 & 2</th><td>data</td><td>data</td></tr><tr><td>data</td><td>data</td></tr><tr><th scope="row">Head 3</th><td>data</td><td>data</td></tr></tbody></table>
Here's what the above code looks like:
