Creating and editing tables
Tables can be created using the drop-down grid on the Insert Table button in the editor toolbar, or using the Insert Table dialog that is opened when clicking the Insert Table button.
Creating a table using the drop-down grid
Click on the drop-down arrow on the Insert Table button and select the number of columns and rows for the table by dragging the mouse over the grid. When the required number of columns and rows have been highlighted, click the left mouse button to insert the table.
The new table is inserted with a default width and height value. To resize the table, click anywhere in the table, then drag the table using the handle in the bottom-right corner.
Creating a table using the Insert Table dialog.
- Click on the Insert Table button to open the Insert Table dialog.
- Set the number of columns and rows for the table as required, and set a Width and Height value.
- Set any other options as required.
- Click the Insert button.
The Tables dialog consists of two tabbed areas - General and Advanced. A summary of the options available is listed below.
General Properties
Cols
Set the number of Columns for the table
Rows
Set the number of Rows for the table
Cellpadding
Set the space between the cell wall and the cell content
Cellspacing
Set the space between cells
Width
Set the table width in pixels, eg: 200 (pixels) or percent, eg: 100%
Height
Set the table height in pixels, eg: 200 (pxiels) or percent, eg: 100%
Table caption
Check or uncheck to include or remove a table caption. The <caption> tag is used to descibe the table, eg:
<table style="width: 400px; height: 300px;"> <caption>This is a table caption</caption> <tbody> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table>
Advanced Properties
Classes
Select css classes from your template stylesheet to apply to the table. Additional class names, seperated by a space, can be typed into the field.
Id
Set a unique id attribute value for the table.
Summary
Set a summary of the table content
Style
A list of inline css properties to be applied to the table, eg: border: 1px solid red;
Language code
Set the language code for the table eg: en
Background image
Select a background-image for the table. You can browse for an image using the File Browser dialog accessed by clicking the File Browser button
Frame
Select whcih parts of the tables outer borders should be visible
Rules
Select which parts of the tables inner borders should be visible
Language direction
Select the language direction for the table
Border
Set the table border styles by checking the checkbox and selecting a Width, Style and Colour.
Background color
Set the table background colour in hex format eg: #cccccc, or select a colur using the Colour Picker.
Deleting Tables
To delete a table click anywhere within the table and click the Delete Table button in the editor toolbar, or in the right-click Context Menu in the editor.
Creating and Editing Table Rows
Editing Table Rows
To edit a table row, click in the table row and click the Table Row Properties button in the editor toolbar or in the right-click Context Menu in the editor.
The Table Row Properties dialog consists of two tabbed areas - General and Advanced.
General Properties
Row type
Set the part of the table this row represents - Table Header, Table Body or Table Footer
Alignment
Set the row alignment
Height
Set the row height in pixels, eg: 100 or percent eg: 50%
Advanced Properties
Classes
Select css classes from your template stylesheet to apply to the row. Additional class names, seperated by a space, can be typed into the field.
Id
Set a unique id attribute value for the row.
Summary
Set a summary of therow content.
Style
A list of inline css properties to be applied to the row, eg: border: 1px solid red;
Language code
Set the language code for the row eg: en
Background image
Select a background-image for the row. You can browse for an image using the File Browser dialog accessed by clicking the File Browser button
Language direction
Select the language direction for the row
Border
Set the row border styles by checking the checkbox and selecting a Width, Style and Colour.
Background color
Set the row background colour in hex format eg: #cccccc, or select a colur using the Colour Picker.
Any changes made to the row can be applied to the selected row, all rows in the table, or all odd or even rows. Select the desired option from the list in the bottom-let of the dialog.
Inserting a New Row
Rows can be inserted before or after the currently selected row. To select a row, click anywhere within the row.
To insert a row before the selected row click the Insert Row Before button in the editor toolbar or right-click Context Menu.
To insert a row after the selected row click the Insert Row After button in the editor toolbar or right-click Context Menu.
Deleting a Row
Select a row by clicking anywhere within the row. Click the Delete Table Row button in the editor toolbar or right-click Context Menu
Creating and Deleting Table Columns
Inserting a New Column
Columns can be inserted before or after the currently selected column. To select a column, click anywhere within the column.
To insert a column before the selected column click the Insert Column Before button in the editor toolbar or right-click Context Menu.
To insert a column after the selected column click the Insert Column After button in the editor toolbar or right-click Context Menu.
Deleting a Column
Select a column by clicking anywhere within the column. Click the Delete Table Column button in the editor toolbar or right-click Context Menu
Editing Table Cells
Editing Table Cells
To edit a table cell, click in the table row and click the Table Cell Properties button in the editor toolbar or in the right-click Context Menu in the editor.
The Table Cell Properties dialog consists of two tabbed areas - General and Advanced.
General Properties
Alignment
Set the cell alignment
Vertical Alignment
Set the cell vertical alignment
Cell type
Set the type of cell eg: Header or Data
Scope
Select a scope for the cell. This sets the association header and data cells in the table
Width
Set the cell width in pixels, eg: 100 or percent eg: 50%
Height
Set the cell height in pixels, eg: 100 or percent eg: 50%
Advanced Properties
Classes
Select css classes from your template stylesheet to apply to the cell. Additional class names, seperated by a space, can be typed into the field.
Id
Set a unique id attribute value for the cell.
Summary
Set a summary of the cell content.
Style
A list of inline css properties to be applied to the cell, eg: border: 1px solid red;
Language code
Set the language code for the cell eg: en
Background image
Select a background-image for the cell. You can browse for an image using the File Browser dialog accessed by clicking the File Browser button
Language direction
Select the language direction for the cell
Border
Set the cell border styles by checking the checkbox and selecting a Width, Style and Colour.
Background color
Set the cell background colour in hex format eg: #cccccc, or select a colur using the Colour Picker.
Any changes made to the cell can be applied to the selected cell, all cells in the row, or all cells in the table. Select the desired option from the list in the bottom-let of the dialog.
Merging and Splitting Table Cells
Merging Table Cells
Click and drag in the table cells to select the cells to merge and click the Merge Table Cells button in the editor toolbar or in the right-click Context Menu in the editor.
Click anywhere in a table cell and click the Merge Table Cells button to open the Merge Table Cells dialog.
Enter the number of Cols (Columns) or Rows to merge and click the Update button.
Splitting Merged Table Cells
Click anywhere within a merged table row or column. A row or column is merged when it occupies more cells than the row or column adjacent to it. Click the Split Merged Table Cells button in the editor toolbar or in the right-click Context Menu in the editor.