Das Element <table> fügt eine Tabelle in das Form-UI ein.
Hinweis:
Wird bei verschachtelten Tabellen die Breite der inneren Tabelle in Prozent angegeben muss für die äußere Tabelle das Attribut cellPadding="0" eingefügt werden. Wird das Attribut nicht angegeben, ändert sich die Breite der Tabelle bei jedem Aktualisierungsprozess des Form-UIs.
Attributname | Verwendung | Attributwerte | Defaultwert | Beschreibung |
---|---|---|---|---|
align | optional | left, center, right | left | Ausrichtung der Tabelle im umhüllenden Element |
boColor | optional | 0,0,0 bis 255,255,255 | Systemfarbe | Rahmenfarbe als RGB-Wert |
border | optional | Integer | Rahmendicke in Pixel | |
cellPadding | optional | Integer | Abstand des Zellinhalts zum Zellenrand in Pixel | |
cellSpacing | optional | Integer | Abstand der Zellen zueinander und zum Tabellenrahmen in Pixel | |
columns | optional | Integer | Anzahl der Tabellenspalten | |
readonly | optional | true, false | true = Tabelle kann nur gelesen werden. false = In der Tabelle sind Eingaben möglich. |
|
visible | optional | true, false | true | true = Tabelle ist sichtbar false = Tabelle ist unsichtbar |
width | optional | Absolutwert in Pixel Prozentwert |
Absolutwert in Pixel = Breite der gesamten Tabelle in Pixel, z.B. "300" Prozentwert = Breite der gesamten Tabelle in Bezug zur Breite, die zur Verfügung steht, z.B. "60%" |
Erlaubte Unterelemente | Anzahl |
---|---|
colGroup | beliebig |
include | beliebig |
loop | beliebig |
rowGroup | beliebig |
td | beliebig |
Tabelle mit drei Spalten und zwei Zeilen:
Das folgende Beispiel zeigt eine einfache Tabelle. Das Attribut columns mit dem Wert "3" teilt die Tabelle in drei Spalten. Für jede Spalte ist ein Element <td> zu definieren. Da die Tabelle zwei Zeilen hat, sind 6 Elemente <td> definiert.
<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>
Ergebnis:
Tabelle mit einer absoluten Breite:
Das Beispiel zeigt eine Tabelle mit 3 Spalten, dessen gesamte Breite 300 Pixel beträgt.
<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>
Ergebnis:
Tabelle mit rotem Rahmen:
Das Beispiel zeigt eine Tabelle mit 3 Spalten, dessen Rahmen rot dargestellt wird.
<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>
Ergebnis:
Tabelle mit definiertem Abstand zwischen Zellenrahmen und Inhalt:
In der Tabelle werden die Inhalte mit einem Abstand von 10 Pixel zum Zellenrahmen dargestellt.
<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>
Ergebnis:
Tabelle mit definiertem Abstand zwischen den Zellen:
In der Tabelle werden die Zellen mit einem Abstand von 5 Pixel zueinander dargestellt.
<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>
Ergebnis:
Verschachtelte Tabellen mit definierter Ausrichtung:
In einer Tabellenzelle ist eine weitere Tabelle zentriert eingefügt.
<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>
Ergebnis:
Tabelle mit Verschachtelung:
In eine Tabelle werden Tabellenzellen aus einer anderen Konfiguration eingefügt.
<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>
Ergebnis: