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