Tools - Table Editor

Table editor is a powerful tool that allows you to create tables in a rather convenient way. The tool consists of several tabs where you set the various elements of the table.

You launch the Table Editor window from the Main Menu / Tools / Tables / Table Editor, as well as from the Tables and Forms toolbar. The default keyboard shortcut to launch this window is Ctrl+T.

Table settings tab

On this tab you will set the basic information about the table you are creating, as well as the style for the table tag. Here you will find three groups of settings:

The Basic Settings group is concerned with setting dimensions and contains the following settings:

Number of columns in the table
In this field you specify how many columns the table will consist of.

Number of rows in the table
In this field you specify how many rows the table will consist of.

Table width
In this field, enter the width of the table in points. If you want the entered value to specify a percentage width relative to the browser window, check the switch marked "%".

Table border
This field specifies the thickness of the table border. Check the toggle next to it to always include this attribute in the TABLE tag, regardless of the value in this field.

Always insert this attribute
Check this toggle to always insert the attribute in the TABLE tag, regardless of the value in the field next to it.

Cell margin (cellpadding)
The value entered in this field determines the size of the empty space between the cell border and its contents. In other words, the inner margin. Check the toggle switch next to it to always include this attribute in the TABLE tag, regardless of the value in this field.

Always insert this attribute
Check this toggle to always insert the attribute in the TABLE tag, regardless of the value in the field next to it.

Spacing between cells (cellspacing)
The value entered in this field determines the size of the empty space between the table border and the cell display area. Check the toggle next to it to always include this attribute in the TABLE tag, regardless of the value in this field.

Always insert this attribute
Check this toggle to always insert the attribute in the TABLE tag, regardless of the value in the field next to it.

Insert Space   in blank cells
If you check this switch, when generating the HTML code of the table, Spider will put a non-breaking space   character in all empty cells without content.

Table border lines
The values of this list determine how the table border lines will be displayed. Possible values are:

• void - no borders
• above - only above
• below - only below
• hsides - above and below
• vsides - left and right
• lhs - left borders only (including cells)
• rhs - right side only
• box - all sides
• border - all sides.

Visibility of borders
The values of this list determine which lines will be displayed between table cells. Possible values are:

• none - no line
• groups - between groups
• rows - only between rows
• cols - only between columns
• all - on all sides.

In the Table Description and Summary group, you will set the description, which is the type of table header displayed above the table, and the Table Content Summary, which is a broader description of the table content that can be useful for browsers for people with disabilities. The summary can, for example, be read aloud by such a browser for the visually impaired.

The style definition group for the table allows you to assign the table tag appropriate styles. Here you will find three fields that allow you to specify:

Definition of style
In this field you define the style for the element to be placed in the document. The button next to it launches the style editor tool that allows you to create a style definition in a friendly and convenient way. By clicking there you can also modify an existing style.

Class selection
In this field you specify the class identifier assigned to the tag. The drop-down list allows you to access classes defined in the current document and in external style sheets attached to it. The button next to it launches the tool for creating a new class.

Item ID
Here you provide a unique identifier for this element in the document. These identifiers can be used, for example, when making jumps to specific parts of the page or in scripts.

Row Settings tab

This tab allows you to specify common settings for selected rows. Here you will find three groups: Rows, Row Alignment and Style Definition for a Row. We will describe them one by one:

The Rows group displays information about available rows in the current table. Additional columns show the properties of individual rows, which are determined in the following groups.

The Row Alignment group allows you to determine:

Horizontal alignment
This parameter specifies the horizontal alignment of the contents of the row cells as long as they do not have their own alignment definition.

Vertical alignment
This parameter specifies the vertical alignment of the contents of the row cells as long as they do not have their own alignment definition.

The Style Definition group for a row allows you to assign the tr tag corresponding to the rows the appropriate styles. Here you will find three fields that allow you to specify:

Definition of style
In this field you define the style for the element to be placed in the document. The button next to it launches the style editor tool that allows you to create a style definition in a friendly and convenient way. By clicking there you can also modify an existing style.

Class selection
In this field you specify the class identifier assigned to the tag. The drop-down list allows you to access classes defined in the current document and in external style sheets attached to it. The button next to it launches the tool for creating a new class.

Item ID
Here you provide a unique identifier for this element in the document. These identifiers can be used, for example, when making jumps to specific parts of the page or in scripts.

Cells tab, Settings and Content

This tab presents a view of the table cells and allows you to specify settings for individual cells as well as their contents. The cell for which the settings are displayed is highlighted in a lighter color. In addition, if a colspan or rowspan attribute is defined for a cell with a value greater than one (that is, merging cells horizontally and vertically), the cells that will be merged with the current cell are locked and marked in dark gray.

On the tab, in addition to the simplified cell view, there are three groups of settings. The first two "Cell Settings" and "Cell Style Definition" are located on the "Cell Settings" tab. The third group of settings will be visible when you switch to the "Cell Contents" page.

Cell Settings page

Horizontal alignment
This parameter specifies the horizontal alignment of the cell contents.

Vertical alignment
This parameter specifies the vertical alignment of the cell contents.

Combining cells vertically (rowspan)
This parameter determines how many cells in the vertical layout are merged into one.

Connecting cells horizontally (colspan)
This parameter determines how many cells in a horizontal layout are merged into one.

The cell is a header
Check this toggle to define that the selected cell is a table header cell.

Assign to all in the column
Fills all cells of all rows in the selected column with the same content and settings.

Assign to all in row
Fills all cells in the current row with the same content and settings.

The Cell Style Definition group allows you to assign the td tag corresponding to the cells the appropriate styles. Here you will find three fields that allows you to specify:

Definition of style
In this field you define the style for the element to be placed in the document. The button next to it launches the style editor tool that allows you to create a style definition in a friendly and convenient way. By clicking there you can also modify an existing style.

Class selection
In this field you specify the class identifier assigned to the tag. The drop-down list allows you to access classes defined in the current document and in external style sheets attached to it. The button next to it launches the tool for creating a new class.

Element identifier
Here you provide a unique identifier for this element in the document. These identifiers can be used, for example, when making jumps to specific parts of the page or in scripts.

Cell contents page

Elements that make it easier to edit the contents of a table cell are located in the third group of settings. It becomes visible when you click on the "Content" button. The largest element is the edit field, where you can enter the content of the cell. You can enter in it the content that will appear in the table cell indicated above, as well as here images, links, forms, etc. The buttons to the left of the edit box are a convenience.

After making changes to the settings of the selected row, press the Accept changes made to the row button for the changes to be remembered.

Table Preview tab

On this tab you can see a preview of the table. The preview is displayed in the built-in MS Internet Explorer browser, so it shows the appearance of the table in its final form. Next to the preview area is a resolution simulation button that allows you to see how the table will look in different resolutions.

Table code preview

If you want to see what the code of the entire table generated by this tool will look like, see the last tab. There you will find, besides the preview, also switches that allow you to choose the formatting of the presented code. It can be HTML in uppercase, HTML in lowercase or XHTML. In addition, you can enable line wrapping in the preview.

Inserting a table

If you want to insert a table, use the OK button on the right side of the window. Under the button, there is a menu that allows you to insert code in different formatting: HTML uppercase, HTML lowercase and XHTML. By default, when you press the OK button, the HTML code is inserted in lowercase letters.