Zellen, die sich über mehrere Zeilen oder Spalten erstrecken
Die Tabellen, die wir bisher erzeugt haben, zeigten alle einen Wert pro Zelle an und enthielten zum Teil auch leere Zellen. Sie können jedoch auch Zellen erzeugen, die sich über mehrere Zeilen oder Spalten in der Tabelle erstrecken. Diese Zellen können Überschriften enthalten, die Unterüberschriften in der nächsten Zeile oder Spalte anzeigen. Sie können auf diese Weise aber zum Beispiel auch spezielle Effekte innerhalb des Tabellenlayouts erzeugen. Abbildung zeigt eine Tabelle mit Beispielen für Zellen, die sich über mehrere Spalten und Zeilen erstrecken.
Um eine Zelle zu erzeugen, die sich über mehrere Zeilen oder Spalten erstreckt, fügen Sie den Tags <th> oder <td> die Attribute rowspan oder colspan hinzu, zusammen mit der entsprechenden Anzahl der Zeilen oder Spalten. Die Daten innerhalb dieser Zellen werden dann über die gesamte Breite oder Länge der kombinierten Zellen angezeigt, wie im folgenden Beispiel gezeigt:
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Lorem ipsum</th>
</tr>
<tr>
<th>Lorem ipsum color</th>
<th>Lorem ipsum color</th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
</tr>
</table>
</body>
</html>
Abbildung zeigt, wie diese Tabelle aussehen könnte.
Beachten Sie, dass Sie die Zelle in den nächsten Zeilen nicht erneut als leer definieren müssen, wenn sie sich über mehrere Zeilen erstreckt. Ignorieren Sie das einfach, und gehen Sie weiter zur nächsten Zelle in der Zeile. Die Anordnung wird automatisch angepasst.
Zellen erstrecken sich immer nach unten und nach rechts. Um also eine Zelle über mehrere Spalten zu erzeugen, fügen Sie der Zelle ganz links das Attribut colspan hinzu, und für Zeilen, die sich über Zeilen erstrecken, das Attribut rowspan zur obersten Zelle.
Das folgende Ein- und Ausgabe-Beispiel zeigt eine Zelle, die sich über mehrere Zeilen erstreckt (die Zelle ganz links mit dem Wort "Lorem"). Abbildung zeigt das Ergebnis im Safari.
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2"> </th>
<th>Lorem<br />
Ipsum</th>
</tr>
<tr align="center">
<th rowspan="2">Lorem</th>
<th>Ipsum</th>
<td>Lorem Ipsum</td>
</tr>
<tr align="center">
<th>Lorem</th>
<td>Ipsum</td>
</tr>
</table>
</body>
</html>
