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.
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
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.
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
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.
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:
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:
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.
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.