Tables are used for displaying tabluar data, they should not be used for laying out content in columns.

Best practice

  • Each table should have a header row or column that denotes what the value in each cell represents. Table header cells are automatically bolded and shaded. To add a table header, choose one of the options from the 'Headers' select list when creating a table.
  • Set the table width to 100% so that it fills the width of the content section its in and scales down on smaller devices.
  • Large and complex tables may not display well on smaller screens. To allow users to use the table without breaking the page layout add the class table--responsive to the table. Right click on the table and choose 'Table properties'. Click the 'Advanced' tab. Enter the class in the 'Stylesheet classes' field.

Examples:

First row is the header
First name Last name
John Doe
Jill Doe
First column is the header
Fruit
  • Apple
  • Pear
Vegetables
  • Carrot
  • Potato
Dairy
  • Milk
  • Cheese
Both first row and column are headers
  Favourite food Favourite activity
John Apple Cycling
Jill Cheese Singing