Tabellen

 

Eine Tabelle wird mit <table> eingeleitet und mit </table> beendet. <tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe mit <td> und </td> definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert. Im folgenden Beispiel wird eine Tabelle mit drei Spalten und drei Zeilen generiert. Die erste Zeile erhält dabei jeweisl eine Spaltenüberschrift. Statt <td></td> wird <th></th> verwendet.

<table>
<tr>
<th>Muppet-Show</th>
<th>Sesamstra&szlig;e</th>
<th>Sendung mit der Maus</th>
</tr>
<tr>
<td>Miss Piggy</td>
<td>Ernie</td>
<td>Maus</td>
</tr>
<tr>
<td>Gonzo</td>
<td>Bert</td>
<td>Elefant</td>
</tr>
</table>

colspan erlaubt es, eine Zelle über mehrereTabellenspalten nach rechts auszudehnen; rowspan erlaubt es, eine Zelle über mehrer Zeilen nach unten auszudehnen.

<table>
<tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td> <td>4. Spalte</td></tr>
<tr><td colspan="3">1. Spalte</td> <td>4. Spalte</td></tr>
<tr><td>1. Spalte</td> <td colspan="3">2. Spalte</td> </tr>
<tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td> <td>4. Spalte</td></tr>
</table>

Überspannte Zellen müssen in der Zeile fehlen.

<table>
<tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr>
<tr><td rowspan="3">1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr>
<tr> <td rowspan="3">2. Spalte</td> <td>3. Spalte</td></tr>
<tr> <td>3. Spalte</td></tr>
<tr><td>1. Spalte</td> <td>3. Spalte</td></tr>
</table>

Überspannte Zellen müssen in der Spalte fehlen.
colspan und rowspan lassen sich natürlich kombinieren. Man sollte jedoch nicht die Übersicht verlieren.

<table>
<tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr>
<tr><td rowspan="3" colspan="2">1. Spalte</td> <td>3. Spalte</td></tr>
<tr> <td>3. Spalte</td></tr>
<tr> <td>3. Spalte</td></tr>
<tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr>
</table>