The element <table> inserts a table into the Form-UI.
Note:
When dealing with nested tables, if the width of the inner table is specified, then the cellPadding="0" attribute must be set for the outer table. If the attribute is not specified, then the width of the table changes each time the Form-UI undergoes an updating process.
Attribute name | Usage | Attribute values | Default value | Description |
---|---|---|---|---|
align | optional | left, center, right | left | Alignment of the table in the enclosing element |
boColor | optional | 0,0,0 to 255,255,255 | System color | Border color as RGB value |
border | optional | Integer | Border thickness in pixels | |
cellPadding | optional | Integer | Distance of the cell contents to the cell border, in pixels | |
cellSpacing | optional | Integer | Distance of the cells to each other and to the table border, in pixels | |
columns | optional | Integer | Number of table columns | |
readonly | optional | true, false | true = Table is read-only. false = Input can be written to the table. |
|
visible | optional | true, false | true | true = table is visible false = table is invisible |
width | optional | Absolute value in pixels Percentage |
Absolute value in pixels = width of the entire table in pixels, e.g. "300" Percentage = width of the entire table in relation to the width that is available, e.g. "60%" |
Allowed sub-elements | Quantity |
---|---|
colGroup | any |
include | any |
loop | any |
rowGroup | any |
td | any |
Table with 3 columns and 2 lines:
The following example shows a simple table. The attribute columns with the value "3" divides the table into three columns. An element <td> has to be defined for each column. Since the table has two rows, six elements <td> are defined.
<table columns="3">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
</table>
Result:
Table with an absolute width:
The example shows a table with 3 columns with an entire width of 300 pixels.
<table width="300" columns="3" border="2" boColor="0,0,0" >
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
</table>
Result:
Table with red border color:
The example shows a table with 3 columns with a red border.
<table boColor="255,0,0" border="2" columns="3">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
</table>
Result:
Table with a defined distance between the cell borders and their content:
The table displays the content with a distance of 10 pixels to the cell border.
<table cellPadding="10" columns="5" border="1" boColor="0,0,0">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 1.4</label></td>
<td><label>Cell 1.5</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
<td><label>Cell 2.4</label></td>
<td><label>Cell 2.5</label></td>
</table>
Result:
Table with a defined distance between the cells:
The table displays the cells with a distance of 5 pixels to each other.
<table cellSpacing="5" columns="5" border="1" boColor="0,0,0">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 1.4</label></td>
<td><label>Cell 1.5</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
<td><label>Cell 2.4</label></td>
<td><label>Cell 2.5</label></td>
</table>
Result:
Nested tables with a defined alignment:
A table is inserted centered into a table cell.
<table border="2" boColor="0,0,0" columns="2" width="450">
<td>
<table align="center" border="2" boColor="255,0,0" columns="3">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
</table>
</td>
<td/>
</table>
Result:
Table with nesting:
Table cells from another configuration are inserted into a table.
<form title="Table with included cells" id="Table">
<table border="1" boColor="0,0,0">
<include receiver="this" ref="partId"/>
</table>
</form>
<form title="includable cells" id="partId">
<td><label>Cell 1.1</label></td>
<td><label>Cell 1.2</label></td>
<td><label>Cell 1.3</label></td>
<td><label>Cell 2.1</label></td>
<td><label>Cell 2.2</label></td>
<td><label>Cell 2.3</label></td>
</form>
Result: