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.
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.
...
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 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:
Remember to always add a space between “th” or “td” and the alignment code snippet, so it looks like this: How to add the codeIn the component with your table, click the Source button. Look for code like this:
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:
|
Column width
Expand | ||
---|---|---|
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. 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 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). You want to add this code Here are the 12 snippets of code and the percentage they will apply: Examples of how the different column widths displayOften you just want to set the first column and let the width of the other columns automatically display according to the contents. This table has the first column set to display at 17% of the table's width. This table has the first column set to display at 33% of the table's width. This table has the first column set to display at 50% of the table's width. The fifth column has some longer text and this is affecting how columns 2, 3, 4 and 5 display in relation to each other. This table has the first column set to display at 75% of the table's width. That doesn't leave much space to display the content in the other columns. |
...