Tables

• Introduction
• To change the border and padding of the table
• Other features
• Advanced table formatting
• Editing in Firefox

Introduction

Firefly has easy functions to allow you to add and update tables. Insertion is either by clicking the Table menu button (see screenshot above) or by right clicking anywhere in the Modify Component content window and selecting the Insert table option (see below).

Either method will bring up the Insert Table dialog box (below).

Options are

• Rows: this determines the number of rows in the table
• Columns: this determines the number of columns in the table
• Total width: this can be selected as a percentage of the available page width or as a fixed number of pixels by clicking the down arrow to the right of the percent/pixels box 
• Border width: this gives the width in pixels of the lines drawn between and around each cell in the table; set this at 0 if you wish to show no lines
• Cell padding: this gives the width in pixels of the space (margin) between cell contents and the cell border
• Cell spacing: this gives the separation in pixels between adjacent cells

The table below has been created using the settings shown above. Note that its width varies according to the width of this page window and is always as wide as the page.

To change the border and padding of the table

Right-click anywhere in the table and press Table Properties... to bring up the Table Properties dialog box, similar to the Insert Table box but without Row and Column inputs:-

• Set the Border width, the Cell padding (margin between cell edge and content) and the Cell spacing (distance between cells) to their new values.
• Press OK
• Press Save Changes and your changes should take effect

Other features

Whilst right-clicking on the table will give the opportunities to delete the table or to display Table or Cell Properties, a much wider variety of editing tools is available by clicking anywhere in the table and then clicking the down arrow next to the Table menu button (see below). Note that you cannot always undo any changes using Ctrl+Z but the Undo Editor icon  should also work.

Table Properties...: brings up the Table Properties dialog box (as above)

Cell Properties...: allows you to change the properties of the selected cell, e.g. its width (percentage or in pixels), the horizontal or vertical alignment of contents in the cell, and the background colour of the cell.

Split cell horizontally/vertically: the selected cell is divided into 2 cells either horizontally or vertically.

Merge Cell right/down: this merges the cell to the right (or below) of the selected one, the contents of the two cells being aggregated into the resulting cell.

Insert Row above/below: this inserts a new row above or below that of the row containing the selected cell.

Merge row: this merges all the cells in the row containing the selected cell, the contents of all cells being aggregated into the resulting cell.

Delete Row: this deletes the row containing the selected cell

Insert Column left/right: this inserts a new column left or right of the column containing the selected cell.

Merge column: this merges all the cells in the column containing the selected cell, the contents of all cells being aggregated into the resulting cell.

Delete Column: this deletes the column containing the selected cell

Advanced table formatting

Firefly's table editor allows a basic range of functions but does not support the more advanced features of full-featured web editing software. For example, it doesn't allow selection of a column (Internet Explorer only) so that all its contents might, for instance, be formatted in bold - each cell in the column would have to be emboldened separately, a tedious task for a big table.

In situations like this, it is recommended that either the table is copied and pasted into a web editor such as Dreamweaver, GoLive, FrontPage, etc (or even Word or Excel) or is written in one of these applications in the first place. Alternatively, browsers such as Firefox supply more tools for editing tables (see below).

Formatting of the table is then done in the selected application and the table is then pasted back into the Firefly page. If Word/Excel has been used, it is recommended to use the Clean up Formatting tool on the resulting page so that future editing may be done more easily. It is also recommended that the table is written using the Firefly default font and size (e.g. Tahoma 10 pt).

If a proper HTML editor is used it is recommended that the table is written using unformatted text.

Editing in Firefox

Firefox (and some other browsers) provides tools for editing tables which are not available in Internet Explorer. If a cell in a table (when in the Modify Component window) is clicked, editing tools are displayed as below

Side and corner handles enable the table's size to be altered

Row and column editing is done via editing tools such as: . In the example above, the top left cell is selected and editing tools appear across its top side and its left hand side. Taking the tools across the top side:

• clicking the right arrow inserts a new column to the right of the current column
• clicking the left arrow inserts a new column to the left of the current column
• clicking the cross deletes the current column

And similarly for rows using the tools across the side of the table

Formatting rows and columns: Rows and columns can be selected individually when Firefox is the browser. This means that they may be formatted separately too, e.g. by making all the text in the top row bold.