Inserting Tables

CMS Express & Pro versions only
Click the "Insert Table" button  from the editor toolbar to open an insert table dialog box as shown below.  This is the same dialog used when editing table properties.  You can define the following properties for tables:

• Rows / Columns: The number of rows and columns initially in the table
• Width: Either set in pixels or as a percentage of the total width available
• Height: This is actually the minimum height in pixels.  It will expand if enough content is entered.
• Border-size: The border width of the table and individual cells
• Alignment: The alignment of the table.  The alignment buttons in the editor work just as well or better however.
• Cell spacing: The spacing between cells.  If set this will leave a gap between cell borders.
• Cell padding: The amount of padding within each cell
• Caption / Summary: Both of these will most likely waste your time.

Editing Tables

All table editing is done through the table context menu, which you access by right clicking in a table cell.  This menu is shown to the right.  Some notes about each of these functions are given below so you know how best to use them:

• Insert Row / Column: Inserts a row or column immediately after the currently selected row or column.
• Delete Row / Column: Deletes the currently selected row or column.
• Insert / Delete Cell: This inserts or deletes a single cell in the current row.  It is advisable not to use these buttons as they will most often cause your table to lose good form.
• Merge Cells: This will merge the selected cells into one cell.  Unfortunately this currently only works when merging cells in the same row.  See Advanced Table Editing for an alternative solution to merging cells in the same column.
• Split Cell: Splits a previously merged cell into its former number of cells
• Delete Table: Deletes the selected table
• Cell / Table Properties: Brings up the properties dialog for the cell or table

The Cell Properties Dialog

Clicking on Cell Properties in the context menu will bring up the dialog box for the selected cell as shown below.  Explanations of the individual options are set out below:

• Cell Width / Height: Similar to table width and height.  If you leave these blank (which is the default) the table cells will resize themselves automatically according to the data in them.
• Word Wrap: This is on by default, if you turn it off it causes text to extend the width of the cell instead of running over to a new line.
• Horizontal / Vertical Alignment: Sets the text alignment within the cell.
• Rows / Columns Span: Explained under Advanced Table Editing.
• Background Colour: Sets the cell background colour
• Border Colour: Sets the cell border colour.

Advanced Table Editing

Tables can be used in very complex ways in order to layout data on the page, and this may require a bit of foreplanning.  By setting the border-width on a table to 0 it essentially becomes invisible, so you can use it to layout other elements on your page.  For instance, you might want to have 3 columns of text to read like a news column.  You can do this by creating a table with 1 row and 3 columns, border-width 0, cell-spacing 0 and cell-padding 0.  Then in each of the cell properties change the width to 33%.  This is done below:

Now say you want to have multiple rows, but only in the first column.  This could have been done by merging the cells in one column, however because this doesn't work here is another solution.  Simply create another table inside the first column with one column and multiple rows and set the border-width to 0.  This time set some cell-padding, say to 5.  Also, because there is no padding in the second two columns, you can create a single celled table in those cells with padding added.  The Final result is shown below.  Border-widths are shown in this example, however in reality these would be invisible and only used for layout.

Even though the Smart CMS editor has a lot of flexibility with tables, there are still some limitations which prevent from having complete flexibility in layout.  If you need something done a bit more professionally then feel to Contact Us with your design request.