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.


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