Page Comparison

Navigation-

• Responsive Design

• Create a table

• Ensure your tables don't cause overlaps

• How to edit a table:

  • Inserting rows/columns

  • Deleting cells

  • Splitting cells

  • Spanning rows/columns

  • Merging cells

Tables provide a layout to display carefully arranged information within a series of columns and rows.

Below is an example of a table in WCMS 3:

Responsive design

Responsive design provides site visitors with an optimal viewing experience; whether browsing from a desktop, tablet or smartphone device.

By default, table cells will be re-arranged on narrow screens so that the table header cells are next to their corresponding table data cells, instead of being at the top of the table. This works well for most tables, but for accessibility purposes, view the table on mobile and make adjustments if necessary.

Create a table 

If you need to create a web page first, please review the instructions on how-to create a web page.  

1. From the editing toolbar, select the Table icon.

   

2. Input the desired number of Rows and Columns. Set table Width and Headers. Enter a Caption if desired.

3. Select OK to insert the table.

4. Add content to the table.

5. Merge cells together if desired.                       

6. Select Add block (Or Update if this is a pre-existing Copy text Block). 

7. Select state from the Change to: drop-down menu.

8. Select Save layout.

Note: Table headers must be used to ensure Accessibility standards are met. Headers will allow a user's screen reader to logically follow the table text.

Ensure your table headings do not cause overlaps

You may find that on mobile devices long table headings can overlap the corresponding data cell. Headers will wrap to the next line at "line break characters" (such as spaces). Below are some options for breaking long headings.                 

• With your cursor in the table heading cell select Source.

  

• To break a long header string, e.g. Department/school, enter code ​ for a "zero-width space" after the slash.

  

• To break a long word, e.g. Characteristics, enter code ­ for a "soft hyphen".

  

• ​ and ­ can also be used to break long words within your data cells.

How to edit a table

Inserting rows/columns 

• To insert a row above a cell, right-click on the cell, select Row, and select Insert Row Before.

  • Similarly, to insert a column to the left of a cell, right-click on the cell, Column, and select Insert Column Before.

• To insert a row below a cell, right-click on the cell, select Row, and select Insert Row After.

  • Similarly, to insert a column to the left of a cell, right-click on the cell, select Column, and select Insert Column Before.

• Note: Inserting rows before a "Heading" row produces another heading formatted row. Also, a newly inserted column has the same formatting as the selected column i.e. presence/absence of "Header" rows, merged cells, split cells etc.

Deleting Cells

• To delete a row/column, right-click on a cell in that row/column, select Row/Column, then select Delete Row/Delete Column.

  • Similarly, to insert a column to the left of a cell, right-click on the cell, select Column, then select Insert Column Before.

• Note: Deleting cells by right-clicking on them and selecting Delete Cells simply erases the contents of the selected cells.

Splitting Cells

To split a cell, right-click on the cell and select Cell.

• For the split cells to span a row, select Split cells horizontally. 

• For the split cells to span a column, select Split cells vertically. 

Note: Splitting a cell that contains content automatically transfers all content to the first (upper/left) split cell.

Tip: Remember to check that your table is accessible after splitting cells across rows/columns. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.

Spanning rows/columns

To make a cell span multiple columns/rows follow the given steps:

1. Right-click on the cell and select Cell.

2. Select Cell properties.

3. Enter the number of rows/columns the cell should span under Rows Span/Columns Span respectively.

Note: Changing the span of multiple cells at once (by selecting several cells) changes the individual span of each cell.

Tip: Remember to check that your table is accessible after spanning cells across rows/columns. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.

Merging Cells         

Merging cells allows you to customize the look and feel of your table by taking two or more cells and combining them together.                    

1. Create your table (e.g. 3 Rows, 5 Columns).                    

2. Right-click on the first cell you want to merge.

3. Select Cell.                            

4. Select Merge right or Merge down.                            

5. Repeat steps 2-4 to continue merging cells.    

Note: Merging cells containing content appends all content from all cells being merged.                   

Tip: Remember to check that your table is accessible after merging cells. This can be tested by making your web browser as small as possible and viewing the order of your table's cell content. The table data should appear in logical reading order.