Work with Tables

To address both responsive design and web accessibility standards tables should only be used to display tabular data, not to create page layout.

After inserting a table into the Body field, the following options are available:

Insert a Table

  1. Place the cursor in the Body: where the table is to be inserted
  2. Select the table table icon from the toolbar
    The Table Properties will be displayed
    Table Properties box
  3. Rows:  enter the number of rows
  4. Columns:  enter the number of columns
  5. Width: defaults to 100%.  The table will encompass the entire width of the content well no matter what type of device is used to display the page. If desired, enter a new percent value but ensure the % sign is used or the table width will default to pixels
  6. Height:  leave blank
  7. Headers: defaults to None. For screen reader accessibility, tables must have a Header.  Choose from the drop-down to define First Row, First Column or Both.  Do NOT merge cells that are defined as headers which will result in multiple columns or rows associated with one header.  This type of formatting makes it too difficult for a blind person to mentally align the content with the headers
  8. Cell spacing: leave default set to 0 (zero)
  9. Border size:  leave default set to 1
  10. Cell padding:  leave default set to 4
  11. Alignment: default is <not set>.  If you have selected a Header, you may align the text Left, Centre or Right using the drop-down menu
  12. If desired, add a Caption to appear above the table which will display in the web browser
  13. Summary:  The summary does not display in the web browser, but will form part of the Page Source metadata information.  More importantly, it will be read out by a screen reader for the visually impaired.  
  14. Click the [OK] button to complete the action
    The Table Properties will be closed and the table will be inserted at the cursor location

 Modify Table Properties

  1. Place the cursor in any cell of the table
  2. Right-click the mouse to display the Table Menu.  DO NOT select the table icon from the toolbar to edit an existing table.  It will result in inserting a table within a table
    table context menu
  3. Choose Table Properties
    The Table Properties will be displayed
  4. Refer to the steps 3 to 14 above.

Add Cell Background Colour

  1. Place the cursor in the applicable cell (drag mouse to select multiple cells)
  2. Right-click the mouse to display the Table Menu
    The Table Menu will be displayed
  3. Choose Cell Properties
    The Cell Properties box will be displayed
    Cell Properties box
  4. Enter one of the following colour codes in the Background Color field, and click [OK]
    Hex Code Colour
    #BFBFBF #BFBFBF
    #F1F1F2 #F1F1F2

    The Cell Properties box will be closed and the cell background colour displayed‚Äč

Add/Delete Rows and Columns

  1. Place the cursor in the location of the table that you want to insert/delete a row or column
  2. Right-click to display the Table Menu 
  3. Choose Row or Column from the menu
  4. Select the applicable option
    The Table Menu will close and the table will be re-displayed with the selected option implemented

Merge/Split Cells

  1. Place the cursor in the location of the table that you want to merge or split cells, or drag mouse to select multiple cells (only the Merge Cells option will be active)
  2. Right-click to display the Table Menu 
  3. Choose Cell from the menu 
    Cell properties menu
  4. Select the applicable option
    The Table Menu will close and the table will be re-displayed with the selected option implemented.

 Delete a Table

  1. Place the cursor in any cell in the table
  2. Right-click to display the Table Menu
  3. Choose Delete Table
    The table will be removed from the Body

See Interface Guidelines for information about removing, moving or adding paragraphs between panels