Creating tables

Tables are a great way for you to display and organise data within your site and keep your pages looking clean and tidy. Please note the following when adding tables to your content:

  • Do not use tables for formatting content.
  • Tables should be used to display and organise data.
  • Tables need to contain a detailed description of the information they present. If you are inserting a table, it needs to contain the relevant description for accessibility. This can be done in the Summary section when you add the table.
  • If uploading an image of a table then the “alt” attribute should contain the summary of the table’s contents. If there is no table caption then this should be as detailed as possible.

Add a WYSIWYG component and insert table

1. Navigate to your page in the Asset Tree.

2. Go to the Content tab.

3. Click where you would like the table to appear in a WYSIWYG content container, and select the Insert Table button. Click and drag the blue boxes in the pop-up box to select how many columns and rows the table will have.

The four options under the Headers section allow you to pick which row/column the headers of the table will be.

4. Click Insert Table.

5.  Your table should now appear in the content container. Insert the data required.

The grey column on the left shows the header section.

Formatting the table

To edit the format of the table, click inside the table and select the pop-up table box that appears.

These four boxes will appear:

(L-R): entire table, entire row, entire column, single cell.

Click on the table option on the left and enter a summary of the table for accessibility. This is necessary for your page to be approved. Hit Apply Changes, and then save in the top right corner.

Setting column width

To set the column width, select the column button and enter the width as a percentage of the whole table. For example if you want five equal columns you would edit each column and select 20% as the width of each. Three equal columns are each 33.3%. You may wish to have the one column narrower or wider – for example 20%, 40% and 40%. Note you will have to enter a width for each column for this to work. Hit Apply Changes, and then Save.

Changing the style

To change the style of the table, select the Entire Table button and click the Class button. Click Choose Styles, and select Default or Blue to change the style:

Default Table:

Blue Table:

Preview your page to double-check the table is displaying correctly before Applying for Approval on the Details screen.


Print this page

Download as PDF

this page was last updated by Daniel Fallon on 27 Sep 2023