Layout Tables
A Table element is a container of row(s) and column(s). A table can help you conserve space on your form, improve the appearance, and indicate that certain elements are closely related. You can add rows and columns, delete rows and columns, and change table properties. Each column and row can have its own properties, distinct from the table.
On This Page
- Creating a Table
- Add Rows and Columns
- Inserting an Element into a Cell
- Deleting an Element from a Cell
- Delete Rows and Columns
- Table Properties
- Column Properties
- Row Properties
Creating a Table
A table is a standard Logiforms field.
- From the Insert Element menu, choose Table. An table named Unnamed Table is created with a two rows and two columns. The first row is a header row.
- Add rows and columns as required.
Add Rows and Columns
To add a row, right-click on the table element in the Form Outline Panel and choose Modify Table > Insert Row.
To add a column, right-click on the table element in the Form Outline Panel and choose Modify Table > Insert Row.
To add a row or column in a specific place, right-click on the row or column adjacent to the place you want to insert it, then choose Modify Table > Insert Row or Modify Table > Insert Column.
Inserting an Element Into a Cell
To insert a Form Element into a cell, first find the cell in which you want to place the element. Locate the row, then choose the specific column for that row. Right-click over that column, and then choose Modify Table > Insert New Form Element.
Deleting an Element from a Cell
To delete an element in a table cell, find it in the specific column (beneath the table element on the Form Outline Panel), right-click and choose Modify Table > Delete Selected.
Delete Rows and Columns
To delete a row, right-click on the table element in the Form Outline Panel and then choose Modify Table > Delete Selected.
To delete a column, right-click on the table element in the Form Outline Panel and then choose Modify Table > Delete Selected.
Table Properties
You can set the properties for the entire table.
| Property | Description |
|---|---|
| Table Name | This is the internal name for this element. |
| Show Border | Set this property to true to display borders for the table. |
| Border Color | Click to choose a color for the table border. |
| Background Color | Click to choose a background color for the entire table. The column background color will override this color (see Column properties in this topic). |
| Cellpadding | Specify a width for the padding for the inside edges of all cells. |
| Dependency | Create a dependency to hide or show this element based on a rule. The field becomes "dependent" on other values entered on the form. Learn more in Dependencies. |
| Hidden | Set this property to true if you want this element to be hidden. |
| Hide Mode | This property determines how the element is hidden and if it will collapse within the space it would otherwise occupy. |
Column Properties
You can set the properties separately for each column.
| Property | Description |
|---|---|
| Name | This is the name used to reference the field and is also the name of the column heading in the submission bin. |
| Width | Specify the width for the column, or leave the default setting of auto. |
| Optimize Child Elements | Leave this setting as true to automatically optimize child elements for display within all cells in the column. This includes hiding the label and removing all of the padding for the child elements. Set the value to false to allow for manual formatting within cells and make the label visible. |
| Background Color | Click to choose a background color for the table. Note that background color for the header row remains gray. Leave empty to allow it to inherit background color defined for this table. |
| Align | Default left. Change to center or right. |
| Vertical Align | Deafult top. Change to middle or bottom. |
| Inline Style | Write a CSS style rule to apply to this element. |
| Class | Apply an additional CSS class to this element. |
Row Properties
You can set the properties for each individual row.
| Property | Description |
|---|---|
| Name | This is the internal name for the row. |
| Inline Style | Write a CSS style rule to apply to this element. |
| Class | Apply an additional CSS class to this element. |
| Dependency | Click to open the Dependency Editor and hide or show this row. |
| Hidden | Default is false. Change to true to hide this row. |
0 Comments