Page Comparison

Mostly, 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.

Image Added

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:

• align="left"

• align="right"

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

• align="justify"

Remember to always add a space between th “th” or td “td” and the alignment code snippet, so it looks like this: <th align="right">

How to add the code

Click In the component with your table, click the Source button. You'll see some 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 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:

<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.

Image Removed

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.)

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 columns 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>
You want to add this code <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 tableX">Column name</th> to the column you're adjusting, with the X being the relevant number from the options below.

Here are the 12 snippets of code and what the percentage they will apply.:

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.

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.

Occasionally you may want to merge some cells in a table heading row, which you can do via the source code.

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.

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 columnsheadings. We have merged 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.

<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 that 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 row 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 have merged want to merge the heading cells in column 1, rows 1 and 2. The cell with <th> tags in the second row has been 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 how this table displayswhat the above code looks like: