singledigitalpresence.vic.gov.au

Advanced table settings - column width, alignment and merging cells

How to set table column width, cell alignment and merge cells (requires some HTML coding ability).

Tables in the Single Digital Presence (SDP) content management system can be built using the Basic text Body content 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

Mostly, tables should be left-aligned because we read left-to-right. However, tables of financial figures should have the columns with numerals set to right-aligned.

To set alignment, you need to go into the source code and edit the HTML. The code options you need to copy in are:

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

Setting column width

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

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 preset 12 fixed widths that correspond to percentages of the text area on the screen (whether its 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.

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%

Merge cells in rows or columns

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.

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 table has the first row set up as the heading row.

In this example, the table has 5 columns. We have merged the heading cells in columns 1,2 and 3 and deleted 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>

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 above. There are no <thead> tags, 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>

To merge row cells, you insert the code and remove extra cells that relate to the spanning.

In this example, the table has 3 columns. We have merged the heading cells in column 1, rows 1 and 2. The cell with <th> tags in the second row has been 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>

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

Some users may find it easier to work with several simple tables than one more complex table. Authors should consider whether they can convert complex tables to one or more simple tables. (Source: w3.org)

Reviewed 01 December 2020

Vic Gov digital guide

Was this page helpful?