Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

How to add a table

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.

    Image Added
  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.

      Image Added
  6. Add the contents of your table.

    Image Added
  7. Optionally merge cells together.

  8. Click Save.

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

...

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.

...

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

...

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

    Image Added
  2. Select the Advanced tab.

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

    Image Added

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

    Image Added

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.