Add a Table

To add a table to your page:

  • Click into the “Editable” field where you would like the table to appear
  • Select “Insert/Edit Table” from the Edit Toolbar located at the top of the editable field

Insert/Edit Table

The “Insert/Edit Table” pop-up box provides you with a variety of options to size and build your table.

Sizing a table

You can size a table from the “Insert/Edit Table” pop-up box by setting the “General Properties”:

  • Enter the number of columns (vertical columns) in the “Columns” field
  • Enter the number of rows (horizontal rows) in the “Rows” field

Set the width of your table by filling out the “Width” field, which will determine how much of the page width the table will occupy:

  • Leave the field empty if you want the table to span the entire width of the page
  • Enter a percentage value to set a specific width
  • Do not enter a value without a %, this will set the sizing to pixels

For example, if you enter 50% in the “Width” field, the table will occupy 50% of the width of your page. We recommend using full width tables wherever possible. Tables sized to less than 100% may create undesirable effects on smaller screens (such as cell phones and tablets).

Add a table caption

A table caption is a title for a table and should describe the content of the table. To add a table caption, select the “Table Caption” checkbox in the “Insert/Edit Table” pop-up box. Captions are often read out by screen reader software to help identify the purpose of the table to those with visual impairments.

Insert table

Select the “Insert” button at the bottom of the pop-up box and your table will automatically appear on your page. If you ever want to get back to the “Insert/Edit Table” pop-up box, click the “Insert/Edit Table” icon on the Edit Toolbar.

Entering data into the table

You can now begin to enter data into the table. If you checked the caption box in the “Insert/Edit Table” pop-up box, a full width cell at the top of your table allows you to enter a caption. Then, enter your column and row headers. Header cells require additional steps outlined below to function properly. Once the caption and headers are added, you can finish entering the remaining date into the table.

Table
title 1title 2
   
   
   

If your table includes row or column headers, these must be marked to help visitors using screen readers. Header cells will signal to the screen reader to read the header each time it enters a cell in the column or row.

To set header cells:

  1. Place your cursor in the first cell of your heading row or column
  2. Click the “Table Cell Properties” icon in the Edit Toolbar located at the top of the editable field this will open the “Table Cell Properties” pop-up box
  3. Select “Header” from the “Cell Type” drop-down menu
  4. Click the drop-down menu above the “Update” button and select “Update all Cells in Row” (for row headings) or “Update all Cells in Column” (for column headings)
  5. Click the “Update” button

Table columns will automatically size to the content. For example, columns with more information become wider than columns with less information.

To customize the width of a cell:

  1. Place your cursor in the first cell of the column you wish to size
  2. Click the “Table Cell Properties” icon in the Edit Toolbar
  3. Enter the width of the column in the “Width” field (the number should be a percentage of the of the width of the table)
  4. Click “Update” to finalize the change

You only need to set the width of one cell in a column. This will automatically set the width of all cells in the column.

You can add and remove rows and columns using the “Insert/Edit Table” icon, or through the row and column tools provided. You can also right click on the table to insert or delete rows and columns.