Tables

Tables make it easy for users to compare multiple columns or rows of tabular data.

Tabular data is any text, numbers, images or other data that has a logical relationship, either horizontally or vertically.

Tables can be a challenge on small screens and can affect how web crawlers interpret page content. Because of this, you should only use tables for presenting data.

How to create a table

1. Select the table icon in the WYSIWYG editor.
2. Specify the number of rows and columns.
3. Select an option from the 'Headers' drop-down menu.
4. Type '100%' in the 'Width' field, so the table works on all screen sizes.
5. Click 'OK'.
6. If the table is large, add the responsive class.

Headers

Every table needs a header row or header column that explains what the value in each cell represents. Headers are automatically bolded and shaded.

To add a table header, choose the appropriate option for your table from the 'Headers' drop-down menu when you create your table.

Here's how headers look on a page:

First row is a header

First column is header

First row and column are headers

Large tables

If there are too many columns or rows in a table, table data can be cut off at a certain point.

If this happens, use the table--responsive class to show a horizontal scroll bar so users can see the full table.

How to add the responsive class

1. Right click on the table and choose 'Table properties'.
2. Click the 'Advanced' tab.
3. In the 'stylesheet classes' field, enter table--responsive
4. Click 'OK'.

Best practice

• Always use table headers, and use the responsive class as required.
• Make sure there is a clear relationship between the data, either horizontally or vertically.
• Include units of measurement in the header row or column so you don't have to repeat information in each cell.
• Avoid complex tables and don't use cells that span across more than one row or column.
• Use a consistent number of decimal points in each cell (if relevant).
• Use sentence case except for scientific names.