Content Comparison

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 content component, under the Page content tab.

To add a new table to your page, select the Table icon.

...

The widget will ask you to add a number for the amount of Rows and Columns needed for your table.

For accessibility reasons, you should always have table headings tagged correctly as a heading row (usually as First row) and Caption if there is one (there usually should be), then select OK.

...

Setting alignment

...

toolbar or the Data table component.

By default, tables will expand to take up the full text width space on your screen. On desktops, this is 818px wide.

Alignment of text in tables

Table text is left-aligned by default in SDP/Ripple.

Most tables should be left-aligned because we read left-to-right. However, tables

...

with financial figures should have

...

any columns with

...

dollar figures set to right-aligned.

...

To

...

change the alignment, select the cells you

...

• align="left"

• align="right"

• align="center" (note the US spelling)

• align="justify"

Remember to 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

Click the Source button.

You'll see some 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 with <th>.

The rest of the cells are coded <td>.

To set right-alignment for the second column 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>

Here's how the table will display with right alignment set on the second column.

...

Setting column width

Expand

You can set column width in just the heading row and that instruction will control the whole column. (This is different to alignment, which you have to set up in every cell.) Why you might want to set column width 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 just the first column should make the page content look better. How to manually set column width Width 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). If we use the table above as an example, you add the code as follows: <table> <thead> <tr> <th class="rpl-table--col-2">Year</th> <th>Total amount ($)</th> </tr> </thead> You generally don't need to set the width of all the columns. On this page, I set the width of just the first column in each table. Here are the 12 snippets of code and what percentage they will apply. Image Removed Examples of how the different column widths display Often 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. Image Removed This table has the first column set to display at 33% of the table's width. Image Removed 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. Image Removed 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. Image Removed

Merge cells in rows or columns

...

want to change. They will turn blue.

Then use the alignment icon on the toolbar to choose right aligned.

...

Setting column width in tables

This functionality was updated in Release 1.51.0 in December 2024.

When you build a table, the column width auto-adjusts based on the widest content in a column. They also appear centred on the screen.

If you have several tables on a page with similar information, you may want to adjust column width so they display well.

Below is an example of a page in the CMS with similar tables but varying column widths based on the content.

...

Because the tables are centred on screen, first you need to drag the right border of the table to fill the screen. The table will display with a yellow border while you’re doing this.

Below is an example of how the page will look when all tables are dragged to full width.

...

Now that the tables are dragged to full width, you can work on adjusting individual columns for consistency.

Drag the column borders of all your columns to your preferred width.

Setting column width via the source code

You have to do this by eye. If you want to get really specific, you can set the widths in the Source code.

In the example below, I had dragged the column widths so they visually matched and now I’ve gone into the source code to be more exact. I can see my first 2 columns are similar width at 27.45% and 26.97% respectively.

You just need to edit the number after “data-resize-width=”. This will auto adjust the “style=” part as well.

...

If you do edit these numbers make sure all the columns add up to 100%!

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.

...

This is not ideal for accessibility - make sure you read the note below.

...

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

...

Accessibility and merged table cells

Don't overuse merged cells in tables, they can be a tricky for screen readers, especially in complex data tables.

For example, one common, free screen reader app - NVDA - does not announce when a cell spans multiple rows or columns. (Source: accessibility-developer-guide.com).

...

what the above code looks like:

...