Inserting and working with tables

Insert a Table

 
  1. In the Rich Text Editor, put the cursor where you would like to insert the table
  2. Click on the Table RTE_20.gif icon in the Rich text editor toolbar to open the Table Properties window
    table-properties.png
  3. Enter in the required number of Rows and Columns
  4. Set the Table Width. We recommend that you set the table width to be 100 percent wide to ensure that it spans the full width of the column it sits within
  5. In most cases you should not have to worry about the height of the table. It will automatically expand to fit the content contained within it
  6. In most cases you should not have to worry about the position of the table. The position of the table describes how the table should fit within the content of the page. IE left aligned or Right aligned
  7. The border thickness is set to 0 by default. We recommend this, as the default Windows 3D table style is rather ugly
  8. Set the cell padding as required, usually 0-5 pixels
  9. The cell spacing is the distance between cells and is not usually required. The default is 0 pixels
  10. Click OK
  11. Text and images may now be inserted into the table, or you may go back and edit the table properties at any time
  12. Remember to click Save at the bottom of the page to save the changes
 


Delete a Table

 
  1. In the Rich Text Editor, click on the table to select it
  2. Click on the X icon on the top edge of the table column to delete that entire column
    delete-column.png
  3. Repeat this across all columns in the table until the entire table has been deleted
  4. Remember to click Save at the bottom of the page to save the changes
 


Inserting text before a Table

In the Rich Text Editor, if you insert a table at the beginning of the component, and then later try to insert text before that table, you may have trouble selecting the area before the table to enter the text. To overcome this problem, you can simply select all content in the component by clicking on any area of the Rich Text Editor, and select all (Ctrl + A),  and then cut (Ctrl + X). Then enter the text you wish to enter, click on an area after the text you have just entered, and paste (Ctrl + V) the table and other content you had previously back in.
 



Edit a Table


You can easily customise the look and feel of a table yourself. Using the Rich text Editor you are able to make the following changes to a table:

 

Add a column or row to a table

 
  1. Right click in the column that you would like to add a new column beside
  2. Select column > Insert column after (or before)
    add-column.png
  3. Follow the same steps for inserting a row


Delete a column or row of a table

 
  1. Select the column that you wish to delete by clicking inside it. This will display the delete icons at the top of the column and to the left of the row
  2. Select the X icon at the top of the column to delete that entire column and all the content contained within
  3. Follow the same steps for deleting a Row
    delete-column.png
  4. Alternatively you can select multiple columns by clicking and dragging your mouse across all the columns you wish to delete
  5. Right click and select Column > Delete columns
  6. Follow the same steps for deleting multiple rows

Change the background colour of a cell

 
  1. Right click in the cell or select multiple cells by clicking and dragging your mouse across the a region of cells
  2. Select Cell > Cell properties from the Right click Drop menu to open the Cell properties dialogue box
    cell-properties.png
  3. Specify a Hex colour in the Background colour field or choose from a predefined set of colours. Find out more about Creating web colours

Change the width of a table

 
  1. Right click on the table border and select the Table properties option
  2. Set the width units, either percentage or pixels. We recommend that you use percentage
  3. Set the width dimension. We recommend for most occasions to use 100 % width

Don't forget if you change the width setting of your table you will need to update the width setting for all of your columns to ensure that the sum of the column widths equals the total table width. Thank god for calculators :)
 

Change the width of a column


When ever you create a table or change the width of a table you will need to specify the width of your columns. When you create a new table the system will automatically apply an equal width for each column.
  1. Select all of the cells in the column that you wish to apply the width setting for by clicking and dragging your mouse
  2. Right click in the selected region and select Cell > Cell properties
    cell-properties.png
  3. In the width field set the pixel or percentage amount
  4. Ensure that you use the same units that you specified for the table width

Change the cell padding of a table

 
  1. Right click on the border of the table
  2. Select Table properties from the drop menu
    table-properties.png
  3. Set the cell padding to apply a space between the outside of each cell and the content
 

Inserting a table helps to keep images and text aligned


You may have difficulty keeping things lined up and looking good. In this case it would be helpful to use a table. You don't need to have the borders of the table showing - just insert images in one column and put text in the other so it looks good  - see below for an example (we have left the borders there to show you how it works but it looks a lot better without the borders- just set the border properties to 0).
 
rainbow rgb Proin elementum massa non leo tristique egestas. Duis malesuada posuere urna, ac aliquam est facilisis vel. Sed scelerisque, diam sed rhoncus bibendum, velit nulla blandit ipsum, nec lobortis risus magna eget velit. Vivamus imperdiet sem et dolor sollicitudin et ullamcorper urna placerat. Nullam non ligula lacus, ut molestie eros. Aliquam est purus, sollicitudin ac venenatis ac, ultrices aliquam felis.
   
rainb 1 Donec felis lectus, vestibulum a scelerisque in, varius eget risus. Donec tempus ultricies orci, id ullamcorper lorem interdum sed. Morbi vulputate turpis sed metus vehicula consequat. Pellentesque fringilla egestas fermentum. In et augue nibh, eget egestas lorem. Vivamus porttitor lig