Web Builder Help
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.
Click within the editable area where you wish to insert a table. Click on the Tables option (along the top of the editor).
Click the Create Table icon.
Depending on your computer's configuration you will see options similar to these:
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
|
Cell Spacing of 5
|
Both set to 5
|
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).
To perform any of the table modification actions simply click within the relevant table, column or row before clicking the icon.
Create Table enables you to put a table inside another table.
Delete Table removes the currently selected table. This cannot be undone.
Insert Column inserts a new column before the currently selected column.
Insert Row inserts a new column before the currently selected row.
Append Column adds a new column to the right side of the table.
Append Row adds a new row to the bottom of the table.
Column Width sets the width (in pixels) of the currently selected column.
Row Height sets the height (in pixels) of the currently selected row.
Delete Column removes the currently selected column.
Delete Row removes the currently selected row.
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 aligns the cell contents to the vertical middle of the cell.
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.