The element <td> inserts a table cell.
Attribute name | Usage | Attribute values | Default value | Description |
---|---|---|---|---|
align | optional | centre, left, right | left | horizontal alignment of the cell content |
bColor | optional | 0,0,0 to 255,255,255 | System color | Background color as RGB value |
colSpan | optional | Integer | Number of cells, that are connected in a row | |
readonly | optional | true, false | true = cell is read-only. false = Input can be written to the cell. |
|
rowSpan | optional | Integer | Number of cells, that are connected in a column | |
valign | optional | bottom, middle, top | middle | vertical alignment of the cell content |
visible | optional | true, false | true | true = table cell is visible true = table cell is invisible |
Allowed sub-elements | Quantity |
---|---|
action | any |
group | any |
img | any |
include | any |
input | any |
instantiation | any |
label | any |
line | any |
loop | any |
mailto | any |
open | any |
progressBar | any |
table | any |
Table with different alignments of the table cells:
The following example shows a simple table listing the various alignments of the content of table cells. The attribute align specifies the horizontal and the attribute valign defines the vertical alignment.
<table columns="4" border="1" boColor="0,0,0" cellPadding="10" >
<td/>
<td align="center"><label font="bold">align="left"</label></td>
<td align="center"><label font="bold">align="center"</label></td>
<td align="center"><label font="bold">align="right"</label></td>
<td align="left">
<label font="4"/>
<label font="bold">valign="top"</label>
<label font="4"/>
</td>
<td align="left" valign="top"><label>abc</label></td>
<td align="center" valign="top"><label>abc</label></td>
<td align="right" valign="top"><label>abc</label></td>
<td align="left">
<label font="4"/>
<label font="bold">valign="middle"</label>
<label font="4"/>
</td>
<td align="left" valign="middle"><label>abc</label></td>
<td align="center" valign="middle"><label>abc</label></td>
<td align="right" valign="middle"><label>abc</label></td>
<td align="left">
<label font="4"/>
<label font="bold">valign="bottom"</label>
<label font="4"/>
</td>
<td align="left" valign="bottom"><label>abc</label></td>
<td align="center" valign="bottom"><label>abc</label></td>
<td align="right" valign="bottom"><label>abc</label></td>
</table>
Result:
Table with connected cells in a row:
In the first row of the table the cells of column2 and 3 are connected.
<table columns="5" border="2" boColor="0,0,0">
<td><label>Zelle 1.1</label></td>
<td colSpan="2"><label>Zelle 1.2 + Zelle 1.3</label></td>
<td><label>Zelle 1.4</label></td>
<td><label>Zelle 1.5</label></td>
<td><label>Zelle 2.1</label></td>
<td><label>Zelle 2.2</label></td>
<td><label>Zelle 2.3</label></td>
<td><label>Zelle 2.4</label></td>
<td><label>Zelle 2.5</label></td>
</table>
Result:
Table with connected cells in a column:
In the first column of the table the cells of row 2 and 3 are connected.
<table columns="2" border="2" boColor="0,0,0">
<td><label>Zelle 1.1</label></td>
<td><label>Zelle 1.2</label></td>
<td rowSpan="2"><label>Zelle 2.1 + Zelle 3.1</label></td>
<td><label>Zelle 2.2</label></td>
<td><label>Zelle 3.2</label></td>
<td><label>Zelle 4.1</label></td>
<td><label>Zelle 4.2</label></td>
</table>
Result: