Adjusting column width, cell alignment and merging cells requires some HTML coding ability.
Tables in the Single Digital Presence (SDP) content management system can be built using either the table option in the Basic text Body content component toolbar or the Data table component.
For accessibility reasons, you should always have table headings tagged correctly as a heading row and table caption if there is one (there usually should be).
...
Year
...
Total amount ($)
...
2019
...
23,100
...
2020
...
19,870
...
2021
...
21,100
Setting alignment
...
Adjusting column width, cell alignment and merging cells requires some HTML coding ability. This functionality is currently under maintenance, sorry.
Before adding tables to your content, we recommend reading the Australian Government Style Manual’s guidance on tables.
Data table component
Read our guide on using the data table component.
Basic text component – table option
Read our guide on using the basic text component – table option.
Advanced settings
Alignment
| Expand | ||
|---|---|---|
Most tables should be left-aligned because we read left-to-right. However, tables of with financial figures should have the any columns with numerals set to right-aligned.  To set change the alignment, you need to go into the source code and edit the HTML. The code options you need to copy in can use are:
Remember to always add a space between th “th” or td “td” and the alignment code snippet, so it looks like this: How to add the codeClick In the component with your table, click the Source button. You'll see some Look for code like this:
The heading cells are coded with <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:
Here's how the table will display with right alignment set on the second column. | ||
Year | Total amount ($) | |
2019 | 23,100 | |
2020 | 19,870 | |
2021 | 21,100 |
Setting column width
...
Column width
| Expand | ||||
|---|---|---|---|---|
You can set a column width in just the heading row and that instruction setting will control then apply to the whole column. (This is different to alignment, which you have to set up in every cell.) Why you might want to set column widthOne 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 just the first column columns should make the page content look better. How to manually set column widthWidth is controlled by our CSS (a style sheet that controls how the web pages look). In the CSS for vic.gov.au we have preset pre-set 12 fixed widths that correspond to percentages of the text area on screen (with different widths for different devices: desktop, tablet or mobile). If we use the table above as an example, you add the code as follows: <table> Here are the 12 snippets of code and what the percentage they will apply. | ||||
Code snippet | Percentage of width | |||
class="rpl-table--col-1" | 8.33% | |||
class="rpl-table--col-2" | 16.67% | |||
class="rpl-table--col-3" | 25% | |||
class="rpl-table--col-4" | 33.32% | |||
class="rpl-table--col-5" | 41.65% | |||
class="rpl-table--col-6" | 50% | |||
class="rpl-table--col-7" | 58.3% | |||
class="rpl-table--col-8" | 66.65% | |||
class="rpl-table--col-9" | 75% | |||
class="rpl-table--col-10" | 83.3% | |||
class="rpl-table--col-11" | 91.63% | |||
class="rpl-table--col-12" | 100% | |||
W2 | Col 2 | Col 3 | Col 4 | Col 5 |
17% | text | text | text | text | thin | text | text | text | text
Width 4 | Col 2 | Col 3 | Col 4 | Col 5 |
33% | text | text | text | text |
text | text | text | text | text |
Column width 6 = 50% | Col 2 | Col 3 | Col 4 | Col 5 |
text | text | text | text | In the 2 tables above, all the cells have equal sized text, so the columns are displaying as equal widths. |
text | text | text | text | This column has longer text in it which affects the display width of this column in relation to the others. |
Column width 9 = 75% | Col 2 | Col 3 | Col 4 | Col 5 |
text | text | text | text | text text text text text text text |
text | text | text | text | text |
...
 |
Merging cells
| Expand | ||||
|---|---|---|---|---|
Occasionally you may want to merge some cells in a table heading row. This is not ideal for accessibility - make sure you read the note below. To merge table cells, you do it via the source code., which you can do via the source code.
Use the colspan codeIf you're merging cells in a column (such as a heading), you insert the code and remove extra cells that relate to the spanning. This For example: picture a table that has the 5 columns, and its first row is set up as the heading row.In this example, the table has 5 columns. We have merged headings. We want merge the heading cells in columns 1, 2 and 3 and deleted , so we’ll delete the heading code snippet for columns 2 and 3. The rest of the table has 5 cells per row.
Here's what the above code looks like: | ||||
Head 1,2,3 | Head 4 | Head 5 | ||
blah blah | blah blah | blah blah | blah blah | blah blah |
blah blah | blah blah | blah blah | blah blah | blah blah |
Head 1 | data | data | ||
Head 2 | data | data | ||
Head 3 | data | data | ||
Head 4 | data | data | ||
Head 1 & 2 | data | data | ||
data | data | |||
Head 3 | data | data | ||
