TABLES AND LAYOUTS > 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.

The dialog has one preview area and three tabs with settings that are explained below.

If you want to load predefined settings or save current settings and use them later for another table, use the Presets option (at the top left corner). For more information see Presets.

You can quickly turn a table into a framed table and vice-versa using the Add Block Effect to Table option.

Blocks Effect

If you work with Blocks table, you will have few more properties in the preview area:

• Type (drop-down menu) - This option allows you to select the graphical border style from several available for the selected template.

If you want to use blocks table style from template other than the selected one, go to Editing Tools, press on Block button and select Manage blocks window, where you can design your own Blocks Type and save it as a preset. All custom presets will show then in this Type drop-down menu.

• Effect (check box) - You have option here to set drop-down effect to the block table. With this effect the block table is not visible until the block title is clicked.

With InitialOpen the block content is visible by default. With InitialClosed the block content is invisible by default.

• Title (text box) - Type here the title you want to be displayed as titlebar of the graphical border.

If you make any changes here, make sure to press Apply button.

Properties tab

Width / 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 or in %).
• Specify Height (check box) - If checked, you can specify a custom height for the table, otherwise a default height is used (the minimum width to fit the table contents).
• Height (number edit box) - Type here the table height you want to use (in pixels or in %).

Cell Padding / Spacing

• Cell Padding (edit 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 (edit box) - Sets the cell spacing in the table (padding is the distance between the cell borders, see the image below).
• Collapse Borders (check box) - The border-collapse property sets whether the table borders are collapsed into a single border.

Table Border

Sets borders for the table. For more information see Border Properties.

Border Radius

The border-radius property allows you to easily utilise rounder corners to the table. For more information see Border Radius.

Columns Border

Sets borders for the columns. For more information see Border Properties.

Background

Sets background for the table. For more information see Background Properties.

Tip: To recognize colors on the screen, 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.

Additioal Settings

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

Row CSS Layout

Row CSS Layout tab gives you an alternative option to format your table. If enabled - layout, borders and background settings from Properties tab will be replaced with CSS formatting. You either use standard formatting in Properties tab, or CSS formatting in this tab. CSS style is more flexible in some extend, because you can use it to format columns and rows separetely.

CSS layout is useful if you want to create odd even rows table where you have header and footer rows and the alternating rows have slightly different colors for clarity.

You have four tabs - HEADER, ODD ROW, EVEN ROW and FOOTER. In HEADER you format the header row which is the first row. If you don't want to have header row, uncheck Use Table Header. In ODD ROW you format all odd rows (1, 3, 5, 7, etc). In EVEN ROW you format all even rows (2, 4, 6, 8, etc). In FOOTER you format the footer row which is the last row. If you don't want to have footer row, uncheck Use Table Footer.

If you want sortable table check Sortable Table option in the Header tab.

In all four tabs you have the following settings:

Margins

Sets margins for the table. For more information see MarginsProperties.

Padding

Sets padding for the table. For more information see Padding Properties.

Background

Sets background for the table. For more information see Background Properties.

Border

Sets borders for the table. For more information see Border Properties.

Effects

Roll-Over

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

• Enable Roll-Over (check box) - Check this box to apply roll-over effect to teh table.
• Type (drop-down menu) - 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.
• Color (button & preview box) - This option specifies the roll-over color for the table.
• Disable Roll-over for the first row (check box) - Check this box to disable rollover effect for first row in table.
• Disable Roll-over for the first column (check box) - Check this box to disable rollover effect for first column in table.

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 %).