Elements - Tables

Elements: Adding Tables

Tables within the Site Editor are especially useful for organising the content of elements placed within them. It is important when creating tables to follow in-order the various stages of the process to keep things straightforward. These are the simplest order of steps to create a table: Decide how many rows and columns the basic table will have.   Create the table before you create the contents to go in it.   Decide on how you want the table to look and what other elements you want to place in each section.   Decide if any table cells need to span more than one row and/or column.   Decide on the table's parameters - total width, border thickness, spacing between cells, padding within cells and table alignment.   Creating a basic table Changing a table's settings Changing a cell's settings

Creating a basic table

• To start off with, select the Table item from the Insert item screen and click the insert button. This brings up the table Edit Item screen displaying the defaults.
    
• Additional rows and columns can be added by clicking the Insert buttons around the edge of the table diagram. These buttons immediately refresh the screen to display the new structure when clicked.
    
• An existing row or column can be removed by clicking the appropriate Delete (red dustbin) button.
    
• The next stage is to insert any cell spans required. The default space taken up by each cell is "1 col x 1 row"; i.e. one column wide and one row deep. By changing the number of columns and/or rows occupied by a cell from the drop down boxes displayed within it, it can be merged with adjacent cells.
    
• It is important to remember that the merging of cells takes place from the upper left most corner of the region being merged downwards and/or across from it.
    
• Changes to the cell span settings are not seen until you save the changes by clicking the Store Changes button.  

Back to top

Changing a table's settings

These parameters are all optional, but they allow you to control the way the table appears and how elements are placed in it. All these settings are available to be customised from the table Edit item screen. If you do not have a specific need to define a particular setting then we suggest you leave it as Default. You will need to use the Store Changes button to save your modifications before any of them will be viewable.

• Table width: Table width can be defined in terms of percentage of area width or exactly in pixels.
    
• Table border and thickness: The thickness of the outside border of a table can be chosen on a scale of 0-5 pixels. If a thickness of 0 is chosen the table will be invisible on the completed page and in page preview mode (though it will still be visible on the Page Editor screen). This facility is useful if you wish a table to provide structure to the contents of a page without it being visible itself.
    
• Spacing between cells: The gap between adjacent cells can be specified in pixels.
    
• Padding within each cell: The minimum amount of gap left between the edge of an element inside a table cell and the cell wall can be specified in pixels.
    
• Table alignment: This option decides how the table body is aligned within the area it is placed.  

Back to top

Changing a cell's settings

These parameters are also optional, but they allow you to control the way individual cells appear and the elements within them are displayed. All these settings are also available to be customised from the table Edit item screen. If you do not have a specific need to define a particular cell setting then we suggest you leave it as Default or blank. Changes to these settings will only be seen once you have clicked the Store Changes button to return to the table Page Editor screen.
 
Note: Some of the settings you have defined may only be displayed properly on the completed page or when you preview it.

• Width and height: Input the values you require for cells into the relevant boxes in units of pixels. 
• Note: If different heights are specified for cells in the same row then the highest value will be applied. 
• Note: If different widths are specified for cells in the same column then the highest value will be applied.
    
• Horizontal and vertical alignment of cell contents: Choose your requirements from the drop down lists. The default alignments are horizontal - left and vertical - centre.
    
• Foreground and background colours: Enter the colour you require as a six digit hexadecimal code. The following web pages provide lists of web-safe colours (i.e. ones guaranteed to display correctly on users computers) and their hexadecimal codes to help you choose.
   

  http://www.dtp-aus.com/htmlchrt.htm
  http://www.w3.org/MarkUp/Guide/Style.html

• Looking at a completed table on the Page Editor screen, note how the system automatically places an Insert button into each cell so other elements can be placed inside them.
    
• Background Image: You are able to select an uploaded image and set it to be a background image. This feature enables you to add type over an image, adding extra depth to your site.  

Site Administration, User Administration, Page Listing, Images, Files, Page Ordering, External Links, Adding Pages, Editing Pages, Adding Content, Elements, E-Commerce, Forums, Databases, Mailing Lists, Banners