CMS Tables

Tables are a great way of organising information within a page. The CMS WYSIWYG editor provides a range of tools to add a table to your page, and you can also edit it in HTML. Both of these methods will be explored in this guide.

Basic Instructions

Insert Table

1. Navigate to the CMS page you want to add the table to, or create a new one.

2. Edit the page.

3. Insert a new block.

   Open

   

4. Choose “Text”.

   Open

   

5. Click the Table > Insert Table

Other Table Options

Once you begin entering content into a table, there are a variety of options available to help you get the table how you want it. Click inside the table, and then click the table button to be presented with the following options:

1. Insert Row Above: This will insert a row above the current row.

2. Insert Row Below: This will insert a row below the current row.

3. Insert Column Left: This will insert a column to the left of the current column.

4. Insert Column Right: This will insert a column to the right of the current column.

5. Add Head: This will add a header row to the top of the table for titles/ headings of each column. This can be done using just a normal row, but is better achieved using a head row.

6. Delete Head: This will delete the header row from the top of the table if there is one.

7. Delete Column: This will delete the current column, including any content in the cells.

8. Delete Row: This will delete the current row, including any content in the cells.

9. Delete Table: This will delete the whole table, including any content in the cells.

10. Default Table Style: This will toggle the default table style on and off. This can be combined with one or more of the other table styles.

11. Bordered Table Style: This will toggle the default table style on and off. This style puts all borders in including column and row lines. This can be combined with one or more of the other table styles.

12. Striped Table Style: This will toggle the default table style on and off. This style changes the colour of alternating rows to make it easier to read. This can be combined with one or more of the other table styles.

13. Hover-highlight Table Style: This will toggle the hover-highlight table style on and off. This style changes the colour of the row of the table that the mouse is hovering over. This can be combined with one or more of the other table styles.

Text Options

Text within tables can still be styled using the buttons across the top, including bold, italics, strikethrough, and lists. Just highlight the text and click the appropriate button to toggle the chosen style.

Images

Images can also be inserted into cells of a table. When in the appropriate cell, click the “Image” button and insert it as normal by selecting or uploading an image.

Advanced Tables

HTML Editor

The HTML editor is very useful when creating CMS pages, but especially so with tables. The WYSIWYG editor gives limited options, whereas your options with HTML are almost endless. If you are new, or just a little rusty on HTML tables, this tutorial will help you: HTML Tables

Responsive Tables

Responsive tables will adjust when the screen size changes, such as on a mobile phone or tablet. This can be achieved by tweaking the HTML of a table.

For this to work correctly, your table must have a header row. Use option 5 in “Other Table Options” section above.

Your table will look something like this to start with:

With the code looking like this (having been distributed across multiple lines to make it easier to read):

In order to make this table responsive, you need to add 2 things to the code:

1. A div tag surrounding the table:

   1. '<div class=”table-stacked”>' above the start of the table.

   2. ‘</div>’ just below the end of the table.

2. A data title attribute to EACH <td> element (table cell). The content of this attribute will need to be the same as the column header the cell falls under. Copy and paste will be your friend here to make adding the attribute to each cell quicker.

The outcome of these changes should look no different at full size. However, when you view the page from a smaller device it will look like this:

The header row has been hidden and the data attributes have become titles for each cell to the left. This is easier to view on a smaller screen and means that all information is displayed rather than some being truncated.

Excel Table Widget

If you have an existing table in Excel (or similar), you can import it into a CMS page in place of copying and pasting it into the page. This can also be especially useful if the information in the table needs updating regularly as you can just swap the file out for an updated version.

1. Navigate to edit an existing CMS page, or create a new one.

2. Insert a new Block.

3. Click “Edit”.

4. Click “Widget”.

5. Select “Excel Table” and click “OK”.

6. Click “Configure”.

7. Complete the wizard:

   1. Excel File: Select the Excel file you want to use from your files. Note: The file will need to have a .xlsx file extension.

   2. Worksheet Name: Enter the name of the sheet you want to use from the file.

   3. Cell Range: Enter the cell range you want to include from the worksheet specified.

   4. Header Row: If the first row in your data is a header, select “Yes”.

   5. Read Table from File: Click “Read Table from File” to a preview of the table.

   6. Bordered: If set, each cell will have a border.

   7. Striped: If set, rows will be alternatively shaded light and dark. This makes the table easier to read.

   8. Condensed: If set, the space above and below the text within each cell will be reduced.

   9. Table Data: A preview of the table based on the appearance settings in steps f, g, and h.

   10. Page Jump Links: You can add a button at the top of the page to jump to this component when clicked. Enter the link name (for the link itself) and the caption (for the button).

   11. Device Visibility: Select whether this page element is visible when viewed on devices of different sizes.

   12. Custom CSS: If you have added any custom CSS in Site Styles & Colours, you can add CSS classes here that you want to be applied to this component.

   13. OK: Once happy with the details, click “OK” to add the table to your CMS page.

8. Click “Save Draft” or “Publish” to save the CMS page.

Related articles