Tables are used for displaying data in a structured, grid-like format.
They are particularly useful for presenting complex information, such as numerical data, comparisons or schedules in a way that is easy to read and understand.
On this page
- When to use Tables
- Adding a Table on a page
- Table editor menu options
- See live example of Tables on the CMS Components Guide
When to use Tables
Do
- Use Tables to display complex information and data that is too detailed for the text.
- Use only as much text or data as you need to make sure the table is easy to understand.
Don't
- Use Tables if there is a simpler and more accessible way to display content, such as a list.
- Create a Table for only 1 or 2 items. Report them in the body of the text instead.
- Assume that the data or information within a Table is obvious. You may need some additional body content to explain the data you are presenting.
Before you start
Consider what type of page template will suit your Table. If you are creating a Table with lots of content in the cells or many columns, consider using the landing page template. Only the landing page template will allow full width containers. See an example of how wide Tables display in different container types.
Adding a Table on a page
You can create Tables by pasting in data from Excel onto the WYSIWYG or build a Table completely within the WYSIWYG itself.
Building a Table using Excel
- Load the data for your Table in Excel.
- If it has any formatting you should remove it, by selecting all content (CTRL+A) and select the Clear menu.
- Select Clear Formats:
- With the formatting removed, select the entire table in Excel and copy it (CRTL+C). Then paste it into the WYSIWYG block in the CMS.
Note: at the bottom of the WYSIWYG there are a lot of span tags indicated. This is additional formatting code that has come over from Excel that isn’t required. To remove this, select all the content in the WYSIWYG component (CTRL+A) and then press Remove formatting
- Once the formatting is removed, click on the table until the table editor menu appears.
The Table editor can be used to build the Table by adding/removing rows and columns, assigning header rows and/or columns, as well as other visual features.
Building a Table with the WYSIWYG
You can also build a Table (without using Excel) within the WYSIWYG.
- Click the 'Insert Table' button. A responsive grid will appear.
- Select the amount of squares on the grid you require for the Table. A table corresponding to the number of squares will appear in the WYSIWYG (ie, a 3x2 grid selection will insert a 3x2 table on the editor).
- You can customise the Table further using the Table editor menu. This appears by clicking in one of the cells.
Table editor menu options
This is the 9-grid icon with the middle column highlighted. Clicking on the icon will have the below options:
- Header column: turns the first column into a header
- Insert column left
- Insert column right
- Delete column
- Select column
This is the 9-grid icon with the middle row highlighted. Clicking on the icon will have the below options:
- Header row: turns the first row into a header
- Insert row above
- Insert row below
- Delete row
- Select row
This is the 9-grid icon with the 4 bottom-right grids merged into one bigger grid. Clicking on the icon will have the below options:
- Merge cell up
- Merge cell right
- Merge cell down
- Merge cell left
- Split cell vertically
- Split cell horizontally
This is the icon with a rectangle on top of a line. Clicking on the icon will show a caption field under the table. You can then click inside the field and enter the caption for the table.
This is a grid icon overlaid on top of a square. Clicking on the icon will have the below styling options for your table:
- Striped
- Bordered
- Full width
- Stacked
- Caption at top
Making the Table responsive
Tables can be displayed responsively on mobile devices. The columns in each row stack on top of each other. The content of the header row is transformed into labels.
Turn on the ‘Stacked’ option for your Table.
Preview your changes with Mobile simulator - responsive testing tool. It is a Chrome extension that will emulate a mobile device in your browser.
This is the bin icon. Clicking on the icon will delete the table.
Highlighting a row, column or cell and then clicking on the icon will delete all the highlighted cells only.
See live example of Tables on nsw.gov.au
Visit Tables to see how this works on a live page.
You can also see live examples of how agencies have applied the component to their content below:
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.