Lektion 11: Mehr über Tabellen
Die Überschrift “Mehr über Tabellen” klingt vielleicht ein wenig langweilig. Aber sehen Sie die positive Seite: Wenn Sie Tabellen meistern, dann gibt es in Sachen HTML nichts mehr, was Sie umhauen kann.
Was fehlt denn noch?
Die beiden Attribute colspan und rowspan. Diese werden dazu verwendet, um besondere Tabellen zu erstellen.
colspan bedeutet column span, welches man mit “Spalten-Spanweite” übersetzen kann. colspan wird im <td>-Tag benutzt und gibt an, über wieviele Spalten die Zelle aufgespannt werden soll.
Beispiel 1:
<table border="1">
<tr>
<td colspan="3">Zelle 1</td>
</tr>
<tr>
<td>Zelle 2</td>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>
sieht im Browser wie folgt aus:
| Zelle 1 | ||
| Zelle 2 | Zelle 3 | Zelle 4 |
Indem man colspan="3" gesetzt hat, wird die Zelle in der ersten Zeile über drei Spalten aufgespannt. Wenn wir den colspan auf "2" gesetzt hätten, wäre die Zelle nur über zwei Spalten aufgespannt worden und wir hätten eine zusätzliche Zelle in die erste Zeile einfügen müssen, damit die beiden Zeilen die ‘gleiche’ Anzahl an Spalten haben.
Beispiel 2:
<table border="1">
<tr>
<td colspan="2">Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
<td>Zelle 5</td>
</tr>
</table>
sieht im Browser wie folgt aus:
| Zelle 1 | Zelle 2 | |
| Zelle 3 | Zelle 4 | Zelle 5 |
Und was ist mit rowspan?
rowspan kann man mit “Zeilen-Spannweite” übersetzen und wie Sie sich vielleicht schon gedacht haben, gibt rowspan an, über wieviele Zeilen eine Zelle reichen soll:
Beispiel 3:
<table border="1">
<tr>
<td rowspan="3">Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
</tr>
</table>
sieht im Browser wie folgt aus:
| Zelle 1 | Zelle 2 |
| Zelle 3 | |
| Zelle 4 |
In diesem Beispiel ist rowspan="3" in Zelle 1 gesetzt. Dies heißt, dass diese Zelle sich über drei Zeilen (“rows”) erstrecken muss (ihre eigene plus zwei zusätzliche). Zelle 1 und Zelle 2 sind dabei in der gleichen Zeile, während die Zellen 3 und 4 jeweils in einer eigenen liegen.
Verwirrt? Nun, es ist ein wenig kompliziert und man kann leicht den Faden verlieren. Deswegen ist es eine gute Idee, die gewünschte Tabelle auf ein Blatt Papier zu zeichnen, bevor Sie mit der Umsetzung in HTML beginnen.
Nicht verwirrt? Dann machen Sie weiter und erstellen Sie selbst ein paar Tabellen mit colspan und rowspan.