Tables

Rich text editor insert tables button  Tables are used to format information in a grid-based structure.

NOTE: COPIED FROM BTv3 USER GUIDE - ***TO BE UPDATED***

When you insert a table, you select how many rows and columns the table should comprise of, as well as fill in a number of additional optional formatting properties. These values can be altered later, so you do not need to know exactly what your table will look like when you first create it.

Table Properties

Table Properties

Once you have created a table, you can tailor it to your requirements. You can change its position on the page, change the width of table and enter colors and background images. Make these changes in the Insert/Edit Table dialog box, which you can open by right-clicking anywhere in the table and selecting Table Properties.

Table Right Click

Columns / Rows
The columns and rows fields define how many columns and rows will make up your table.

Cell Padding
Cell padding is the distance from the edge of the cell to its content. The distance is given in pixels. The default value for cell padding is 1 pixel. If you do not want any distance, you must specify the value 0.

Cell Spacing
Cell spacing is the distance between the cells in a table. The distance is given in pixels. The default value for cell spacing is 2 pixels. If you do not want any distance, you must specify the value 0.

Alignment
Using alignment, you can decide where on the page the table will be placed. Here you can select to position the table to the left, to the right or have it centered.

Border
The border field defines in pixels, the thickness of a border line to go around the table. If you do not want any border, you must specify the value 0.

Width / Height
The width and height fields define the physical dimensions of the table, and can be defined in either pixels or as a percentage of the containing element. To enter a pixel dimension, simply enter the number of pixels you want the table to be, or alternatively for a percentage based dimension, enter a number between 1 and 100 followed by the '%' character. Setting the height of a table is generally not common practice, although it can be done. If a height is not defined, then the height of the table is generally governed by its content.

Class
The class dropdown provides a list of stylesheet classes that can be assigned to the table. These allow you to apply predefined styles so that you do not have to style the whole table yourself. The number of options within this list may differ between installs. Please contact your system administrator for details about which classes are available in your installation.

Table caption
Checking the table caption field will provide a caption area at the top of the table to allow you to define a caption for the table.

Advanced Tab

Table Properties Advanced

ID
The id field allows you to define a unique id for the table. This is often used for scripting or styling purposes.

Summary
Use the summary option to briefly describe the content of the table.

Style
The style field allows you to define inline CSS code to style the table.

Note: Please be aware that inline CSS may invalidate your page if your organisation is following certain web standards protocols.

Language Code
The language code field allows you to define in which language the content of the table is targeted. The code itself should be an ISO 639 language code.

Background Image
The background image field allows you to define the URL of an image to use as a background for the table.

Frame (if available)
The frame dropdown allows you to choose how the outer borders of the table are displayed.

Rules (if available)
The rules dropdown allows you to choose when internal borders should be displayed.

Language Direction
The language direction field allows you to define in which direction the content of the table should flow, either left to right or right to left.

Border Color
The border color field allows you to define the color of the tables border.

Note: The tables border must be set to a number greater than 0.

Background Color
The background color field allows you to define a background color for the table.

Table Cell/Row Properties

Cell Properties

To modify the properties of cell, you would need to do this via the Table Cell Properties dialog box, which you can open by right clicking anywhere in the table cell and selecting Cell > Table Cell Properties.

Table Cell 2

Table Cell Properties

Cell Properties – General Tab

Alignment
Using alignment, you can decide how the content of the cell should be aligned. Here you can select to position the contents of the cell to the left, to the right or have it centered.

Cell Type
Use the Cell type option to indicate whether the cell is a data cell or a header cell. This results in a <th> for a header cell and a <td> for a data cell.

Vertical Alignment
Using vertical alignment, you can decide how the content of the cell should be vertically aligned. Here you can select to position the content of the cell to the top, to the bottom or have it centered.

Scope
The scope field allows you to define the scope of a cell. The scope is a way of associating header and data cells in a table. The scope identifies whether a cell is a header for a column, row, or group of columns or rows. The scope will generally make no visual difference in your web browser.

Width / Height
The width and height fields define the physical dimensions of the cell, and can be defined in either pixels or as a percentage of the containing element. To enter a pixel dimension, simply enter the number of pixels you want the cell to be, or alternatively for a percentage based dimension, enter a number between 1 and 100 followed by the '%' character.

Class
The class dropdown provides a list of stylesheet classes that can be assigned to the cell. These allow you apply predefined styles to the cell. The number of options within this list may differ between installs. Please contact your system administrator for details about which classes are available in your installation.

Cell Properties – Advanced Tab

The advanced tab allows you to define advanced properties for the table cell.

(See Table Properties - Advanced Tab for more details)
 

Table Row Properties

To modify the properties of a row, you would do this via the Table Row Properties dialog box, which you can open by right clicking anywhere in the table and selecting Row > Table Row Properties.

Table Row

Table Row Properties

Row Properties – General Tab

Row Type
The row type dropdown allows you to define whether the row should appear in the head, body or foot of the table. This is often used to allow different styling for header and footer rows to that of the main body of the table. If you are unsure which to use, you should leave the field set to Body.

Alignment
Using alignment, you can decide how the content of the row should be aligned. Here you can select to position the contents of the row to the left, to the right or have it centered.

Vertical alignment
Using vertical alignment, you can decide how the content of the row should be vertically aligned. Here you can select to position the content of the row to the top, to the bottom or have it centered.

Class
The class dropdown provides a list of stylesheet classes that can be assigned to the row. These allow you apply predefined styles to the row. The number of options within this list may differ between installs. Please contact your system administrator for details about which classes are available in your installation.

Height
The height field defines the physical dimensions of the row, and can be defined in either pixels or as a percentage of the containing element. To enter a pixel dimension, simply enter the number of pixels you want the row to be, or alternatively for a percentage based dimension, enter a number between 1 and 100 followed by ‘%’ character.

Update Current Row dropdown
The update current row dropdown allows you to define which rows the changes should apply to. Here you can select to apply the changes to the current row, to odd rows, to even rows or to all rows.

Table Row – Advanced Tab

The advanced tab allows you to define advanced properties for the table row.

(See Table Properties - Advanced Tab for more details)

Modifying, Merging and Splitting Cells

Modify the number of Rows and Columns in a Table

If you have a table on a page that you want to add or remove rows or columns from at a later point, you can do this by right clicking the table, and selecting one of the insert or delete options from either the row or columns sub menu.

Table Column

Merging Cells

If you want to merge two or more cells in a table, you can do this via the Merge Table Cells dialog box, by right clicking the left / top most cell you want to merge and selecting Cell > Merge Table Cells. From the dialog, you can say how many columns or rows you want to merge the cell over.

Table Cell

Table Merge Cells

Splitting Cells

You can re-split two or more cells that you previously merged by right clicking in the cell, and selecting Cell > Split Merged Table Cells.

Table Cell 2

Free
demo