Sunday, 27 December 2020 13:01

Tables

Documentation for Inserting and Editing Tables
Inserting and editing Tables
Deleting Tables
Creating and Editing Table Rows
Creating and Deleting Table Columns
Editing Table Cells
Merging and Splitting Table Cells

Creating and editing tables

Tables can be created using the drop-down grid on the Insert Table button 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.

Insert a table using the grid

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.

Drag resize a table

Creating a table using the Insert Table dialog.

  1. Click on the Insert Table button to open the Insert Table dialog.
  2. Set the number of columns and rows for the table as required, and set a Width and Height value.
  3. Set any other options as required.
  4. Click the Insert button.

Insert a table using the dialog

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.

To delete a table click anywhere within the table and click the Delete Table Delete table button button in the editor toolbar, or in the right-click Context Menu in the editor.

Delete a table

Editing Table Rows

To edit a table row, click in the table row and click the Table Row Properties button Table row 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

Table row dialog

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

Table row dialog advanced tab

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 Insert row before button in the editor toolbar or right-click Context Menu.

Insert row before

To insert a row after the selected row click the Insert Row After button Insert row after button in the editor toolbar or right-click Context Menu.

Insert row after


Deleting a Row

Select a row by clicking anywhere within the row. Click the Delete Table Row button Delete row button in the editor toolbar or right-click Context Menu

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 Insert column before button in the editor toolbar or right-click Context Menu.

Insert column before

To insert a column after the selected column click the Insert Column After button Insert column after button in the editor toolbar or right-click Context Menu.

Insert column after


Deleting a Column

Select a column by clicking anywhere within the column. Click the Delete Table Column button Delete column button in the editor toolbar or right-click Context Menu

Editing Table Cells

To edit a table cell, click in the table row and click the Table Cell Properties button 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

Cell 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

Cell properties advanced tab

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 Table Cells

Click and drag in the table cells to select the cells to merge and click the Merge Table Cells Merge cells button button in the editor toolbar or in the right-click Context Menu in the editor.

Merge table cells

Click anywhere in a table cell and click the Merge Table Cells Merge cells button button to open the Merge Table Cells dialog.

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 Split merged cells button button in the editor toolbar or in the right-click Context Menu in the editor.

Split merged cells

Read 4975 times Last modified on Sunday, 27 December 2020 13:10
More in this category: « Paste Creating Links »