Versions Compared

Key

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

How to add a table

...

  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.

    code

    <th

    scope="col">department/

    &#8203;school<

    ​school</th>

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

    code

    <th

    scope="col"

    >charac&shy;teristics<

    >charac­teristics</th>

Department/​school      

Charac­teristics

Zoology

Wild and wonderful

On mobile after breaking long 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

...

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.