3.9 Tables

If you have information for your site that needs to be laid out in an organised structural manner, such as a price list or menu, we recommend that you use the Insert/Edit Table option on the Web Editor toolbar. This tool allows you to add a table that has been set to your requirements to the page you are editing. Once it has been added you can change the size and appearance of the entire table or of each cell individually.

Inserting a table

When you click on the Insert/Edit Table button on the toolbar a pop-up box will appear (see Figure 3.9.1), allowing you to edit the overall structure and appearance of the table you wish to add. A breakdown of all the different parameters you can set are given below. Once you have set all the options you wish to include, hit the OK button and your table will be added to the page.

Figure 2.3 The Insert Table pop-up box controls the overall structure and appearance of the table.

Figure 3.9.1 - The Insert Table pop-up box controls the overall structure and appearance of the table.

Rows
This option allows you to set the number of rows in your table.

Columns
This option allows you to set the number of columns in your table.

Width
This option allows you to set the width of your table. This can either be done using pixels or a percentage.

Please Note: If you set the width using a percentage, it will automatically resize to the available editable area of your website and may look slightly larger or smaller within the editing window.

Height
This option allows you to specify the height of your table. This is not an essential value to include, if it's not set the table's height will still grow to the same size as the content it contains.

Border size
This option allows you to set the size of the border around the outside of your table.

Alignment
This option allows you to align the entire table either to the left, right or centre of your page. It's worth noting that giving your table one of these values does not affect the alignment of the text it contains.

Cell spacing
This option allows you to set the space between individual cells within the table.

Cell padding
This option allows you to set the space between the text in a table cell from its surrounding edges.

Caption
This option allows you to set a title that appears just before the table is shown.

Summary
This option allows you to give the table an overall summary. This is never displayed on your page and has been exclusively designed for browsers used by the blind and partially sighted.

Managing Tables

Once you have started adding the content to your table, if you feel that the layout isn't quite right, you can now go back and edit different aspects of the table. The table management options allow you to add and remove rows or columns, change the look of an individual cell, and split and merge them together to create the overall look and layout that you desire.

Figure 2.4 By right clicking your mouse over a table you will bring up the editing menu.

Figure 3.9.2 - By right clicking your mouse over a table you will bring up the editing menu.

Editing the overall table appearance

  1. Right Click your mouse anywhere inside the table or on any of its outside edges.
  2. On the pop-up menu that appears, select Table Properties.
  3. This will bring up a window very similar to the Insert/Edit Table pop-up.
  4. Make the changes you wish to the overall table then hit the OK button.

Inserting table cells

  1. Right Click your mouse on the cell that you wish your new cell to appear to the right of.
  2. On the pop-up menu that appears select Cell, then Insert Cell.
  3. There will now be an extra cell added to your table.

Deleting table cells

  1. Right Click the mouse on the cell you wish to remove.
  2. On the pop-up menu that appears select Cell, then Delete Cells.

If you would like to remove more than one cell, hold down the Left Mouse Button and drag the mouse over the cells you wish to delete, so that the text is highlighted and then follow the steps above.

Please Note: If you are deleting a table cell that isn't the last on a row, all remaining cells will shift to the left to occupy the space it leaves.

Merging table cells together

To merge two or more table cells together you will need to complete the following instructions:

  1. First of all make sure that all the cells you wish to merge have some content in them, as the Merge Cell tool will not work if the cells are empty.
  2. Hold down the Left Mouse Button and drag the mouse over the cells you wish to merge so that the text is highlighted.
  3. Right Click the mouse over any of the selected text.
  4. On the pop-up menu that appears select Cell, then Merge Cells.
  5. On the page you will see that the table cells you selected have now become one.

Splitting a table cell

To turn a single table cell into two separate cells:

  1. Rick Click your mouse over the cell you wish to split.
  2. On the pop-up menu that appears select Cell, then Split Cell.
  3. On your page you will see that the cell has been split into two separate cells.
  4. Repeat this as many times as you need as there is no limit to the amount of times a cell can be split.

Cell properties

If you wish to change the appearance of a single cell, you can do this by accessing the Cell Properties pop-up. From here you can change its dimensions, colour and alignment amongst other characteristics. To open the pop-up, complete the following steps:

  1. Right Click your mouse inside the cell you wish to change. If you would like to apply the changes to more than one table cell, then Left Click your mouse in the first one you wish to change and then drag the mouse over all the cells that you are editing so that the text is highlighted. Once this has been done, Right Click your mouse inside any of the selected cells.
  2. On the pop-up menu that appears select Cell then Cell Properties.

Figure 2.5 The Cell Properties pop-up allows you to change the attributes of individual cells.

Figure 3.9.3 - The Cell Properties pop-up allows you to change the attributes of individual cells.

A breakdown of the different attributes you can give your chosen cell are shown below.

Width
This option allows you to set the width of an individual table cell. It's important to remember that when you change the width of a cell, the table will assign the same width to all the cells in the same column. Also, if the content of your cell is wider than this width, (for example, an image) the cell will strect to fit the content.

Height
This option allows you to set the height of an individual table cell. It's important to remember that when you change the height of a cell, the table will assign the same height to all the cells in the same row. As with the width, if the content of your cell is taller than the specified height, the cell will stretch. 

Word wrap
This option allows you to turn the word wrapping facility on or off for a specific cell. The default setting is On which means that when the text reaches the right hand side of a fixed width cell, it will continue on a new line. If you decide to turn this function off, the text will remain in one line and the table cell width will expand. Our recommendation is that you keep this option turned on.

Horizontal alignment
This option allows you to change the alignment of the text inside a table cell just like in a Word Processor. The values you can choose from are Left, Centre and Right. The default alignment of a cell is set to Left.

Vertical alignment
This option allows you to change where the text is positioned in a table cell relative to its height. The values you can choose are; Top, Middle, Bottom or Baseline. The default vertical alignment of a cell is set to Middle.

Rows span
This option allows you to merge your chosen cell with one or more cells below its position in the table.

Columns Span
This option allows you to merge your chosen cell with one or more cells to the right of it in the same column.

Background colour
This option allows you to set the background colour for an individual cell. To pick a colour click on the Select button, and then choose one of the colours from the colour palette by clicking on it and hitting the OK button. Alternatively if you know the hexadecimal number of the colour you wish to use, type it into the white box under the Selected title and then press OK. Remember to add a hash (#) before you type in the number.

Border colour
This option allows you to set the border colour for an individual cell. To pick a colour click on the Select button and then choose one of the colours from the colour palette by clicking on it and hitting the OK button. Alternatively if you know the hexadecimal number of the colour you wish to use, type it into the white box under the Selected title and then press OK. Remember to add a hash (#) before you type in the number.

Inserting table rows

  1. Right Click your mouse in any of the table cells in the existing row you wish your new row to appear beneath.
  2. On the pop-up menu that appears select Row, then Insert Row.
  3. On your page you will see that a new row has appeared in the table.

Deleting table rows

  1. Right Click your mouse anywhere on the row you wish to delete.
  2. On the pop-up menu that appears select Row, then Delete Rows.
  3. On your page you will see that the row you selected has now been deleted.

Inserting table columns

  1. Right Click your mouse inside any of the table cells in the table column you wish your new column to appear to the right of.
  2. On the pop-up menu that appears select Column, then Insert Column.
  3. On your page you will see that a new column has been added to the table.

Deleting table columns

  1. Right Click your mouse anywhere in the column you wish to delete.
  2. On the pop-up menu that appears select Column, then Delete Columns.
  3. On your page you will see that the column you selected has now been removed from the table.

Deleting a table

  1. Right Click anywhere on the table you wish to remove.
  2. On the pop-up menu that appears select Delete Table.
  3. The table will now have been deleted from the page.
^ Back To TopGo to next section >