Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Tables

Tables can be used for displaying data that should be arranged in a tabular format. Tables should not be used for layout or arranging elements on a page - try using the multi-row/column content options instead.

How to create a table:

  1. Select the Insert/Edit Table icon in the WYSIWYG toolbar. Insert table screenshot
  2. Enter the number of columns and rows in your table. All other fields should remain empty. Enter Column and Row about screenshot
  3. Select the Advanced tab.                                                                        Select advanced tab screenshot
  4. In the Summary field, indicate what the table data is, its structure, and how the table should be read. This is important for accessibility, especially for complex tables. An example summary for the table below would be "Contact information. Table of 2 columns, to be read by row. Column 1 lists names, column 2 lists phone extensions." The summary field will not appear on the page, but can be read by assistive devices like screen readers.
     
    Sample table:
    Contact information
    John Doe ext. 1234
    Jane Doe ext. 5678
    If you would like further assistance with creating AODA-compliant tables and adding elements like heading cells, please contact webteam@uoit.ca
  5. Select Insert and a blank table will be added to the WYSIWYG editor. Add your content to the cells.

Styling tables:

  • Merge cells

    1. Highlight the two cells you want to merge. Ensure that the cells are fully highlighted (not just the text).
    2. Right click and hover over Cell, then select Merge Table CellsMerge Table cells screenshot
  • Split merged cells

    1. Highlight the merged cells. 
    2. Right click and hover over Cell, then select Split Merged CellsSplit Tables screenshot
  • Modify the table layout

    Add a row:

    1. Click inside a cell.
    2. Right click and hover over Row, them select Insert Row Before to insert a row above the current row, or Insert Row After to insert a row below the current row.Add a row screenshot

    Remove a row:

    1. Highlight the row you want to remove or click inside a cell that is in the row you want to remove.
    2. Right click and hover over Row, then select Delete row.Delete a row screenshot

    Add a column:

    1. Click inside a cell.
    2. Right click and hover over Column, then select Insert Column Before to insert a column before the current column, or Insert Column After to insert a row after the current row. Insert column screenshot

    Delete a column:

    1. Highlight the column you want to remove or click inside a cell that is in the column you want to remove.
    2. Right click and hover over Column, then select Delete column. Delete column screenshot
  • Add or change styles

    There are several style options to choose from when creating tables. By default, tables will have an outside border, no cell borders, rows will alternate between white and light grey, and the width will automatically adjust to the cell contents (unless set widths are specified on columns). 

    The available style options are listed and described below. You can have one or several styles "chained" together on a single table. 

    tblFullWidth - The table will span the full width of the content area. 
    Example of full width table

    tblWhite - All cell backgrounds will be white; rows will not alternate between white and light grey.
    Example of white table

    tblNoBorders - Remove the default outside border around the table.
    Example of table with no outside borders

    tblCellBorders - Add a border around each cell. 
    Example of table with cell borders

    tblRowBorders - Add borders only to the rows (tblCellBorders should not be selected).
    Example of table with row borders

    tblAlignTop - Aligns multi-line text in each cell to the top (the default is the middle of the cell).
    Example of table with multi-line text aligned to the top of the cell

    How to add these styles to a table:

    1. Create your table and add your content.
    2. Highlight the entire table and select a style option from the Styles dropdown in the WYSIWYG toolbar.  Highlight entire table screenshot
    3. To add or "chain" another style to the table, repeat the steps above. 

    Example of table with tblFullWidth, tblWhite, tblNoBorders, and tblRowBorders applied:

    Example of table with multiple styles

    Formatting tables in the WYSIWYG editor can sometimes be tricky, so if your table is not displaying as you intend, please contact webteam@uoit.ca or make a note in the comments section when you submit the page to the workflow.