Das rowspan-Attribut

Das Attribut rowspan steuert das Zusammenfassen von Zeilen in einer HTML-Tabelle. Wird auf die Tags th und td angewendet.

Akzeptierter Wert: eine ganze Zahl beginnend mit 1.

Anwendung: Wir fügen dieses Attribut zu einer beliebigen Zelle td oder th hinzu. Wenn man zum Beispiel rowspan auf den Wert 2 setzt - dann belegt die Zelle, der dies zugewiesen wurde, zwei Zeilen in der Höhe der Tabelle. Dabei verschwinden die Zellen aus der Zeile darunter nicht, unsere erweiterte Zelle verdrängt sie und die Tabelle bause auseinander. Um dies zu verhindern, muss eine der Zellen aus der darunterliegenden Zeile entfernt werden. Siehe Beispiele für ein besseres Verständnis.

Beispiel . Tabelle ohne Zusammenfassungen

Schauen wir uns eine Tabelle ohne Zusammenfassungen an, mit der wir weiter arbeiten werden:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Beispiel . Erweitern einer Zelle über zwei Zeilen

Erweitern wir nun Zelle 1 über zwei Zeilen, indem wir ihr das Attribut rowspan mit dem Wert 2 zuweisen. Wir werden sehen, dass sie die Zellen aus der Zeile darunter verdrängt und die Tabelle auseinanderfällt:

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Beispiel . Erweitern einer Zelle ohne Auseinanderfallen der Tabelle

Um das Problem mit dem Auseinanderfallen der Tabelle aus dem vorherigen Beispiel zu beheben, versuchen wir, eine der Zellen aus der zweiten Zeile zu entfernen (und dies muss nicht die Zelle 4 sein, die sich direkt unter unserer Zelle 1 befindet; es kann jede entfernt werden, wir entfernen die Zelle mit der Nummer 5):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Beispiel . Erweitern einer Zelle über `3` Zeilen

Erweitern wir hier unsere Zelle nicht über zwei Zeilen, sondern über 3, weisen ihr rowspan mit dem Wert 3 zu. Dabei entfernen wir eine der Zellen aus der dritten Zeile (Zelle 7, 8 oder 9 - spielt keine Rolle), damit die Tabelle nicht auseinanderfällt:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Beispiel . Noch eine Erweiterung über `2` Spalten

Erweitern wir zusätzlich zur ersten Zelle auch Zelle 2 über 2 Spalten. Dafür fügen wir Zelle 2 colspan mit dem Wert 2 hinzu. Dabei entfernen wir Zelle 3, damit die Tabelle nicht auseinanderfällt:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td colspan="2">cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Siehe auch

das Attribut colspan,
das Spalten einer Tabelle zusammenfasst