How to add a table

On this page:

• Creating a table

• Responsive design

  • Ensure your table headings don't cause overlaps

  • Setting a table to keep a fixed width (if it would be easier to read)

• Merging cells

Creating a table

1. From the Administration bar, select My Workbench.

2. Select Create/Manage Content and select the content type you wish to add the table to (eg. Web Page).

3. Place your cursor at the point where you would like your table to appear.

4. Click on the Table button in the toolbar.

   Open

   

5. Input the number of rows and columns you want your table to have and select the appropriate Headers. Click OK.

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

      Open

      

6. Add the contents of your table.

7. Optionally merge cells together.

8. Click Save.

9. Change the moderation state to Published and click Apply.

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 you should check to see how it looks on mobile and adjust your table accordingly.

• Ensure your table headings don't cause overlaps.

• Set a table to keep a fixed width (if it would be easier to read)

Ensure your table headings don't 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.

1. With your cursor in the table heading cell select the 'Source' button.

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

   <th scope="col">department/​school</th>

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

   <th scope="col">charac­teristics</th>

    

On mobile after breaking long headers:

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

Setting a table to keep a fixed width

On complex tables, the way it is rearranged for mobile may make the table more difficult to read. If you want a particular table to not re-arrange its cells, you can do this by setting the class "no-responsive".

1. Open the Table Properties box, and select the table, right-click the mouse and click Table Properties.

2. Select the Advanced tab.

3. Enter the class no-responsive in the Stylesheet Classes field for tables that should not be responsive in the Responsive theme.

   Note: The Stylesheet Classes field will remain empty for tables that should be responsive in the Responsive theme.

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 (ex. 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.

Sample:

Note: 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 a logical reading order.

For more information on creating accessible tables, please consider registering for the SEW course: Creating Accessible Tables.