...
| Info |
|---|
This guide will help you with adding a table to a CMS page, to learn about adding more to a CMS page, read this guide here: CMS |
| Table of Contents | ||||
|---|---|---|---|---|
|
Basic Instructions
Insert Table
Navigate to the CMS page you want to add the table to, or create a new one.
Edit the page.
Insert a new block.
...
Choose “Text”.
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:
...
Insert Row Above: This will insert a row above the current row.
Insert Row Below: This will insert a row below the current row.
Insert Column Left: This will insert a column to the left of the current column.
Insert Column Right: This will insert a column to the right of the current column.
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.
Delete Head: This will delete the header row from the top of the table if there is one.
Delete Column: This will delete the current column, including any content in the cells.
Delete Row: This will delete the current row, including any content in the cells.
Delete Table: This will delete the whole table, including any content in the cells.
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.
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.
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.
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.
...
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: https://www.w3schools.com/html/html_tables.asp HTML Tables
| Info |
|---|
Tip: When using the HTML editor for tables, those created using the WYSIWYG editor will be in one long continuous line. If you press enter between each new row of the table (marked by the <tr> tags), it will make it much easier to read, follow, and make edits to. |
...
In order to make this table responsive, you need to add 2 things to the code:
...
A div tag surrounding the table:
'<div class=”table-stacked”>' above the start of the table.
‘</div>’ just below the end of the table.
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:
...
| Info |
|---|
You can also see the mobile/ tablet view on a computer (in Chrome) by right clicking on the page and selecting “Inspect”. You can then select the view of a set mobile size or a responsive size. |
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.
| Info |
|---|
You can learn more about CMS widgets in this guide: CMS Widgets |
Navigate to edit an existing CMS page, or create a new one.
Insert a new Block.
Click “Edit”.
Click “Widget”.
Select “Excel Table” and click “OK”.
Click “Configure”.
Complete the wizard:
Excel File: Select the Excel file you want to use from your files. Note: The file will need to have a .xlsx file extension.
Worksheet Name: Enter the name of the sheet you want to use from the file.
Cell Range: Enter the cell range you want to include from the worksheet specified.
Header Row: If the first row in your data is a header, select “Yes”.
Read Table from File: Click “Read Table from File” to a preview of the table.
Bordered: If set, each cell will have a border.
Striped: If set, rows will be alternatively shaded light and dark. This makes the table easier to read.
Condensed: If set, the space above and below the text within each cell will be reduced.
Table Data: A preview of the table based on the appearance settings in steps f, g, and h.
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).
Device Visibility: Select whether this page element is visible when viewed on devices of different sizes.
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.
OK: Once happy with the details, click “OK” to add the table to your CMS page.
Click “Save Draft” or “Publish” to save the CMS page.
| Info |
|---|
You can learn more about CMS widgets in this guide: CMS Widgets |
Related articles
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...