Using Tables

Working with tables in the content editor.

Please note: we strongly advise against using tables as they are not friendly with mobile responsive design. However, we do understand there are specific cases where tables are required. Wherever possible, please avoid using tables.

Creating a Table

To insert a table into your page click the table button in the editor.  

Once the table button is clicked a pop-up window will appear which will hold the information for your table.

  • Rows: Type in the number of rows your table will have.
  • Columns: Type in the number of columns your table will have.
  • Width: This field sets the width of the table you can choose to have it as a percentage of the page or as exact pixels.
  • Height: This field sets the height of the table you can choose to have it as a percentage of the page or as exact pixels.
  • Header: Set the first column, row, or both as a header.
  • Border size: Type in the required border width of the table (0 = no border & 9 = wide border).
  • Align: Left, center or right aligns the table within the page.
  • Caption: Allows you to enter a title above the table.
  • Summary: Allows you to add a hidden description about the table.
  • Cell Padding: Sets the padding area around content within the table.
  • Cell Spacing: Sets the space between cells within the table.

Once you have entered your table properties click on the Ok button.

Editing a Table and Cells

You can return at a later stage to edit the table properties by right clicking on the table’s edge.

To edit each individual cell, place your cursor within the nominated cell and right click to produce a list of editing functions. From this list, hover on the Cell option and select Cell Properties.

A pop-up screen will appear to let you edit the Cell Properties.

  • Width: This field allows you to define the width of cells with within table; you can enter it as a percentage or exact pixels. (if you do not enter a value it will be determined by the content in the table.)
  • Height: This field allows you to define the cell’s height within your table; this value is in pixels, however if you do not enter a value it will be determined by the content in the table.
  • Word Wrap: By ticking this option the text will not wrap content within it. (i.e. there will only be one line of text in each cell)
  • Horizontal Align: This field allows you to adjust the alignment of the content or image within the cell, choose between left, right or centre.
  • Vertical Align: This field allows you to choose the vertical alignment of the content within the cell, choose between top, middle, bottom and baseline.
  • Rows Span: This field allows you to enter the number of cells in the row this particular cell will span.
  • Columns Span: This field allows you to enter the number of cells in the column this particular cell will span.
  • Background Color: Click on the Select… button to choose the cells background color or type in the required Hexadecimal colour if known.
  • Border Color: Click on the Select… button to choose the cells border colour or type in the Hexadecimal colour if known.

Once you have edited the cell properties click on Ok to return to the main editor screen.

Entering Content into a Table

To enter content or an image into your table, place your cursor in the cell and either begin typing or enter the image library.

Right click to view a list of table editing functions.