On this page:


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.
    Table icon in editing bar.
  5. Input the number of rows and columns you want your table to have and select the appropriate Headers. Click OK.

    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.
    Configuring table rows and columns.
  6. Add the contents of your table.Added content to 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

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/&#8203;school</th>
  3. To break a long word, e.g. Characteristics, enter code &shy; for a "soft hyphen".
    <th scope="col">charac&shy;teristics</th>
Department/​school       Charac­teristics
Zoology Wild and wonderful


On mobile after breaking long headers:
Table on mobile with breakpoint and hyphen added to headers.

Note: &#8203; and &shy; 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.
    Table properties box
  2. Select the Advanced tab.Advanced tab of Table Properties
  3. Enter the class no-responsive in the Stylesheet Classes field for tables that should not be responsive in the Responsive theme.
    no-responsive Stylesheet Class
    Note: The Stylesheet Classes field will remain empty for tables that should be responsive in the Responsive theme.Empty Stylesheet Classes field

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:

Accessible table with merged cells

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.