MODULES WEB EDITOR WORKING WITH TABLES

Table Properties

Each table has its own properties: width, height, background color etc. This section describes all available table properties and how to access them.

HTML Properties

The following properties are available for each table:

Layout

Cell Padding (number spin box)

Sets the cell padding in the table (padding is the distance between the cell contents and the border, see the image below).

Cell Spacing (number spin box)

Width

• Specify Width (check box) - If checked, you can specify a custom width for the table, otherwise a default width is used (the minimum width to fit the table contents).
• Width (number edit box) - Type here the table width you want to use.
• In Pixels/In Percent (radio group) - If In Percent is selected, the Width value is treated as a percent of the web page width, otherwise an absolute width in pixels is used.

Height

• Specify Width (check box) - If checked, you can specify a custom width for the table, otherwise a default width is used (the minimum width to fit the table contents).
• Width (number edit box) - Type here the table width you want to use.
• In Pixels/In Percent (radio group) - If In Percent is selected, the Width value is treated as a percent of the web page width, otherwise an absolute width in pixels is used.

Borders

Table Border Sets the table border parameters (outer border, as shown on the picture). Width (number spin box) - Sets the table border width. Set this property to 0 to make the table border invisible. Type (combo box) - Sets the table border type. You can select between raised, lowered, solid, dashed, dotted. Color (button & preview box) - Sets the table border color. Columns Border Sets the columns border parameters (inner border, as shown on the picture). Width (number spin box) - Sets the columns border width. Set this property to 0 to make the columns border invisible. Type (combo box) - Sets the column border type. You can select between raised, lowered, solid, dashed, dotted. Color (button & preview box) - Sets the columns border color.

Note: You can use every color preview box to recognize colors on the screen. Simply press CTRL and click inside the color preview box. Now, when you move the mouse over the screen, the color of the corresponding object will be displayed in the color preview box.

Background

• Color (button & preview box) - This option specifies background color for the table. To use the page background color instead, press the none button.
• Image (button & edit box) - The edit box contains the address of an image file that will be used as a table background. Press the Image button to browse for an image. Leave the box empty to use the specified color instead. Press the none button to cancel the image that has been previously selected.
• Repeat (combo box) - This property determines how the specified background image is repeated. The repeat value will repeat the image both horizontally and vertically. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. Use no-repeat value if you don't want the background image to be repeated.
• Position (combo box) - This property gives the initial position of the specified background image.
• Bg Generator (button box) - This button will take you to the Background Generator window where you can design your own background, using some predefined patterns.

Special Effects

This section allows you to set your table as framed table and also add drop-down effect to it.

The default values in this section are the only difference between a table and a framed table. Turning on graphical borders converts your table into a framed table, turning them off sets it back to a regular table.

Framed Table

• Framed Table (check box) - If checked, this option will set the table as framed table (with rendered graphical border). The specific look of the framed table depends on the Web Template selected for the site.
• Type (combo box) - This option allows you to select the graphical border style from several available for the selected template.

If you want to use framed table style from template other than the selected one, use Add button to enter the Framed Tables Factory window, where you can design your own Framed Table Type and then apply it to the framed table.

• Caption (text box) - Type here the caption you want to be displayed as titlebar of the graphical border. This option has no effect if Framed Table is unchecked.
• Caption Alignment (combo box) - Select alignment for the framed table caption. You can choose between left, right and center.
• Drop-Down Effect (check box) - Check this box to allow the user to minimize/restore the framed table content by clicking the framed table title bar. This option is not visible if Framed Table is unchecked.
• Initial State: Open (check box) - If this box is unchecked, the frame content is minimized by default. Check the box to have the content visible by default. This option is not visible if Drop-Down Effect is unchecked.

Roll-Over

Roll-Over effect doesn't work correctly when table background image is defined.

• Type (combo box) - This option selects type of roll-over effect for table. Row -> whole rows in table are highlighted. Cell --> cells are highlighted. Column --> columns are highlighted. Row and Column --> rows and column are highlighted.
• Rollover Color (button & preview box) - This option specifies the roll-over color for the table.
• Not on first row (check box) - Check this box to disable rollover effect for first row in table.
• Not on first column (check box) - Check this box to disable rollover effect for first column in table.

Additioal Settings

• ID (edit box) - This attribute assigns a name to the table. This name must be unique in a page.
• Table-Tag (edit box) - Define here custom tags for table tag.
• Add cols and rows classnames (check box) - When this checkbox is checked, EZGenerator will include classnames for rows (R0,R1,R2...) and columns (C0,C1,C2...).

Scrolling Table section (this section is available only if you have inserted Scrolling Table):

• Height (edit box) - Define here scrolling table height (in px or %).
• Width (edit box) - Define here scrolling table width (in px or %).

CSS Layout

CSS Layout tab gives you an alternative option to format your table. Layout, Borders and Background settings from HTML Properties tab can be replaced with CSS style formatting. CSS style is more flexible in some extend, because you can use it to format columns separetely.