Tables

Tables are a useful way to layout tabular data and on occasion may be used to assist with the general layout of your page. Please note that tables used incorrectly can cause problems for people with certain accessibility issues and we therefore recommend you use them discerningly.
These instructions are split into two parts:
How to create a table and How to modify an existing table.

How to create a table

Click within the editable area where you wish to insert a table. Click on the Tables option (along the top of the editor).

Create TableClick the Create Table icon.

Depending on your computer's configuration you will see options similar to these:

Insert Table Options

A table is simply a grid with cells e.g.

 1

 2

 3

 4

 5

 6

This example table has 2 rows and 3 columns (giving 6 cells), a width of 100 Pixels, borders turned on and alignment set to Center.

Note: Before you create your table try and work out how many rows and columns you need. However, you can modify your table at any time so if you need more or less rows or columns down the line that's easy to do.

Rows: These are the number of horizontal groups of cells. Row heights automatically grow as you add content. You can also specify row height (see below: Modifying a Table, Row Height).

Columns: These are the number of cells each row will contain. Initially columns will be equal widths but by default columns resize their width according to the content you put into the cells. However you can specify the width of columns (see below: Modifying a Table, Column Width).

Width: By default this is set to the entire width of your editable area (100%). You may prefer to set it to something a bit narrower (e.g. 95%) if you want a bit of a margin around the edge of the table. If you know an exact size you can set the width in pixels. Most templates have a maximum editable area width of about 500 pixels but this varies according to the specific template.

Borders: When this is ticked your visitors will be able to see lines around the cells of your table. When you are editing the table you will normally be able to see lines around the cells to help you edit it correctly (this is not dependent on the borders option). If the borders option is unticked then your visitors will see the content of the cells but not the cells lines.

Alignment: This determines the position of the table. Default, Left, Center or Right.

Whilst not often needed more advanced users may also wish to set the following:

Cell Padding: This defines the amount of space between the edges of the cell and the cell content.

Cell Spacing: This defines the amount of space between the cells (not including the borders)

The examples below may help you understand.

Cell Padding of 5

 1

 2

 3

 4

 5

 6

Cell Spacing of 5

 1

 2

 3

 4

 5

 6

Both set to 5

 1

 2

 3

 4

 5

 6

Please note with borders turned off the layout of the above tables would be similar but the lines wouldn't be visible.


 How to modify an existing table

Table Outlines: When editing a table if it doesn't have borders turned on it is often useful to see the cell outlines (these are guides just for the purposes of editing and are not visible to your site's visitors). To turn on table outlines click anyway in the editable area but NOT within a table then on the Tables tab along the top of the editor, you'll see two icons click the right hand one (table outlines).

 

Create Table Delete Table Insert Column Insert Row Append Column Append Row Column Width Row Height Delete Column Delete Row Align Top Align Middle Align Bottom

To perform any of the table modification actions simply click within the relevant table, column or row before clicking the icon.

Create Table Create Table enables you to put a table inside another table.

Delete Table Delete Table removes the currently selected table. This cannot be undone.

Insert Column Insert Column inserts a new column before the currently selected column.

Insert Row Insert Row inserts a new column before the currently selected row.

Append Column Append Column adds a new column to the right side of the table.

Append Row Append Row adds a new row to the bottom of the table.

Column Width Column Width sets the width (in pixels) of the currently selected column.

Row Height Row Height sets the height (in pixels) of the currently selected row.

Delete Column Delete Column removes the currently selected column.

Delete Row Delete Row removes the currently selected row.

Align Top Align Top aligns the cell contents to the top of the cell. This can be useful if you have one cell with lots of content next to another with less.

Align Middle Align Middle aligns the cell contents to the vertical middle of the cell.

Align Bottom Align Bottom aligns the cell contents to the bottom of the cell. This can be useful if you have one cell with lots of content next to another with less.