Search the Manual:

Manual Contents

3.9.2.5. Adding and Editing Tables

3.9.2.5.1. Insert/Modify Table

The Insert/Modify Table button allows you to insert a table into the page you are creating or editing. When you click on it the Insert/Modify Table dialogue box will open to the General tab.

GENERAL TAB:

Here you can define the general properties of your table; including,

Cols: type the number of columns you want your table to have into this text field.
Rows: type the number of rows you want your table to have into this text field.
Cellpadding: (in pixels) enter the amount of space that you would like to have around the content placed within each cell of your table. Internal cellpadding creates space around the contents of each cell equally on all 4 sides.
Cellspacing: (in pixels) enter the amount of space that you would like to have between each cell of your table. Cellspacing creates space between each cell in your table, equally on all 4 sides.
Alignment: select how you would like your overall table to be aligned on your page by picking center, left, or right, from the drop down list provided.
Border: (in pixels) if you would like your overall table to have a border, enter the desired width of your border in this text field.
Width: (in pixels) indicate how wide you would like your total table to be by entering the desired width into this text field.
Height: (in pixels) indicate how high (tall) you would like your total table to be by entering the desired height into this text field.
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here.
Table Caption: if you check this checkbox, your table will be created with a header row that runs the full width of your table to allow you to enter a header or caption at the top of your table.

Some additional tips about tables:

If you add a table with no border, and can't see it once you return to edit your page, click on the View Invisible Elements button and the table guidelines will become visible so that you can edit the content of your table. Whether they are toggled on or off, these guidelines do not appear on your website page.
If you do not enter a table height or width, your table will be placed into your page collapsed (with no space inside each cell). In this case, to expand the cells in your table, simply click inside a cell, and begin typing and they will resize according to the content you enter.

ADVANCED TAB:

Once you have finished setting the basic properties for your table, you may want to modify some of the additional options available.

Switch to the Advanced tab by clicking on it at the top of the Insert/Modify Table dialogue box.

Many of the advanced properties that can be modified in this area require some knowledge of HTML and/or CSS and should be left blank unless you have the necessary expertise. However, there are a few advanced properties that you will likely want to use from time to time; including,

Background image: you may choose to add an image as a background for your table. Depending on the size of your image, it will be displayed as either one large background image or (with smaller images) it will be tiled to fill the background of your table. To add a background image...
- type the name of your image file into the Background image: text field.
- For external links, include the correct prefix (eg http://)
- To link to a file previously uploaded to your site (or to upload one), click on the browse file icon to open the image manager.
- Follow the same process for uploading image files as you did when using the Insert/Edit Image button.
Border colour: if you defined a border in the general properties of your table, you may pick the colour of that border here. To do so,
- Click on the small browse icon to the right of the Border colour text field and a colour palette will open.
- Click on the colour you wish to use for your border. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply]. (See instructions for selecting a background colour when Inserting Media Files).
Background Colour: you can also select a background colour for your table, which will appear as the background for your entire table (unless you also select a background image). To select your table background colour,
- Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
- Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply]. (See instructions for selecting a background colour when Inserting Media Files).

3.9.2.5.2. Edit Table Row Properties

Once you have added a table to your page, and defined its overall properties, you can also define the properties of various separate elements of your table.

The next few buttons on the editing toolbar allow you to modify those individual elements. The next button to the right of the Insert/Modify Table button is the Edit Table Row Properties button. This button allows you to edit the individual row properties within your table. To do so,

First click inside the row that you want to modify.
Then click the button and the Table Row Properties dialogue box will open to the General tab.

GENERAL TAB:

Here you can modify the general properties of the rows in your table in a variety of ways.

Row in table part: if your table is divided into table body, head and foot sections, you can select which portion of the table the row you wish to edit is part of by picking the correct section from the drop down list to the right.
Alignment: you can choose to have the content entered into the selected table row align to the Center, Left, or Right by selecting the alignment from the drop down list.
Vertical alignment: you can choose to have the content entered into the selected table row vertically aligned to the Top, Center, or Bottom of the row by selecting the desired vertical alignment from the drop down list.
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here.
Height: (in pixels) to define the exact height of the row you are editing, enter it in the text field.

ADVANCED TAB:

Once you have finished setting the general properties for the row(s) you wish to modify, you may want to define some of the advanced row properties.

Switch to the Advanced tab by clicking on it at the top of the Table Row Properties dialogue box.

A number of the advanced properties that can be modified in this area require some knowledge of HTML and/or CSS and should be left blank unless you have the necessary expertise.

However, there are two advanced properties that you may use from time to time. They are:

1. Background image: you may choose to add an image as a background for your row, to do so,

Type the name of your image file into the Background image: text field.
For external links, include the correct prefix (eg. http://).
To link to a file previously uploaded to your site (or to upload one), click on the file icon to open the image manager.
Follow the same process for uploading image files as you did when using the Insert/Edit Image button.

2. Background Colour: you can also select a background colour for your row(s), which will appear as the background for the row(s) you identify (unless you also select a background image). To do so,

Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).

Once you have finished defining both your general and advanced row properties, you can choose to apply them to the current row, odd rows in the table, even rows in the table, or all rows in the table by selecting your preference from the drop down list at the bottom left corner of either tab. To complete the process and return to the page editing screen, click [Update].

3.9.2.5.3. Edit Table Cell Properties

The Edit Table Cell Poperties button allows you to edit the individual cell properties within your table. To do so,

First click inside the cell that you want to modify.
Then click the button and the Table Cell Properties dialogue box will open to the General tab.

GENERAL TAB:

Here you can modify the general properties of the cells in your table in a variety of ways.

Alignment: you can choose to have the content entered into the selected cell(s) align to the Center, Left, or Right by selecting the alignment from the drop down list.
Cell type: you can identify whether your cell is a Data cell or a Header cell by selection the appropriate type from the drop down list provided.
Vertical alignment: you can choose to have the content entered into the selected cell(s) vertically aligned to the Top, Center, or Bottom of the cell(s) by selecting the desired vertical alignment from the drop down list.
Scope: you can set the scope of your cell(s) by selecting the appropriate setting from the drop down list (defining scope makes the identified cells into headers).
Width: (in pixels) indicate how wide you would like your cell(s) to be by entering the desired width into this text field.
Height: (in pixels) indicate how high (tall) you would like your cell(s) to be by entering the desired height into this text field.
Class: If there are pre-defined CSS classes associated with your website (these would have been created by your web designer), they will appear in this drop down menu and you may select them here.

Once you have finished setting the general properties for the cell(s) you wish to modify, you may want to define some of the advanced cell properties.

Switch to the Advanced tab by clicking on it at the top of the Table Cell Properties dialogue box.

ADVANCED TAB:

A number of the advanced properties that can be modified in this area require some knowledge of HTML and/or CSS and should be left blank unless you have the necessary expertise.

However, there are a few advanced properties that you may wish to modify from time to time. They are:

Background image: you may choose to add an image as a background for certain table cells. To add a background image...
- Type the name of your image file into the Background image: text field.
- For external links, include the correct prefix (eg. http://).
- To link to a file previously uploaded to your site (or to upload one), click on the file browse icon to open the image manager.
- Follow the same process for uploading image files as you did when using the Insert/Edit Image button.
Border colour: you can select a border colour for individual cells in this area as well. To do so,
- Click on the small browse icon to the right of the Border colour text field and a colour palette will open.
- Click on the colour you wish to use for your border. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).
Background Colour: you can also select a background colour for specified cells in your table. This will appear as the background for selected cells (unless you also select a background image for those cells). To select a cell background colour,
- Click on the small browse icon to the right of the Background colour: text field - a colour palette will open.
- Click on the colour you wish to use for your background. Pick from any of the three available tabs, which each display the colours in a different type of palette and click [Apply] (See instructions for selecting a background colour when Inserting Media Files).

Once you have finished defining both your general and advanced cell properties, you can choose to apply them to the current cell, all cells in row, or all cells in the table by selecting your preference from the drop down list at the bottom left corner of either tab. To complete the process and return to the page editing screen, click [Update] at the bottom left of either tab.

3.9.2.5.4. Inserting and Deleting Rows

These three buttons on your editor toolbar allow you to easily add and delete rows from your table.

The button on the left allows you to insert a new row into your table before (above) the row your cursor is placed in. Click into any cell in the row directly below where you want the new row added, and click this button to add one row above the one your cursor is placed in.
The button in the centre of these three allows you to insert a new row into your table after (below) the row your cursor is placed in. Click into any cell in the row directly above where you want the new row added, and click this button to add one row below the one your cursor is placed in.
The button on the right allows you to delete the row your cursor is currently placed in. Click into any cell in the row you would like to delete, and click this button to delete the row your cursor is placed in.

3.9.2.5.5. Inserting and Deleting Columns

These three buttons on your editor toolbar allow you to easily add and delete columns from your table.

The button on the left allows you to insert a new column into your table before (to the left of) the column your cursor is placed in. Click into any cell in the column directly to the right of where you want the new column added and click this button to add one column to the left of the one your cursor is placed in.
The button in the centre of these three allows you to insert a new column into your table after (to the right of) the column your cursor is placed in. Click into any cell in the column directly to the left of where you want the new column added and click this button to add one column to the right of the one your cursor is placed in.
The button on the right allows you to delete the column your cursor is currently placed in. Click into any cell in the column you would like to delete and click this button to delete the column your cursor is placed in.

3.9.2.5.6. Splitting and Merging Table Cells

These two buttons on your toolbar allow you to easily split and merge table cells.

The button on the left allows you to split previously merged cells in your table. To do so,

Click inside a previously merged cell, and then click the button.
The cells will be split into their original combination.
Note: if there are no previously merged cells in your table, this button will not be active.

The button on the right allows you to merge multiple cells in your table into one cell. You can do this in two ways.

1. Select the adjoining cells that you would like to merge, and then click the button, or
2. Select your table and click the button to open the Merge Table Cells dialogue box.
- Enter the number of rows and columns you would like the table to have once cells are merged.
- Click [Update] and you will be returned to the page editing area.