Attribut colspan

Das Attribut colspan steuert das Zusammenfassen von Spalten einer HTML-Tabelle. Wird auf die Tags th und td angewendet.

Akzeptierter Wert: eine ganze Zahl beginnend mit 1.

Wie man es benutzt: Wir fügen dieses Attribut zu einer beliebigen Zelle td oder th hinzu. Wenn man zum Beispiel colspan auf den Wert 2 setzt - dann belegt die Zelle, der dies zugewiesen wurde, zwei Spalten der Tabelle. Dabei werden die benachbarten Zellen rechts nicht verschwinden, unsere erweiterte Zelle wird sie verdrängen und die Tabelle bricht auseinander. Um dies zu vermeiden, muss man eine der Zellen rechts entfernen. Sehen Sie sich die Beispiele für ein besseres Verständnis an.

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 Spalten

Versuchen wir, Zelle 1 über zwei Spalten zu erweitern, indem wir ihr das Attribut colspan mit dem Wert 2 zuweisen. Dabei wird sie die rechts benachbarten Zellen verdrängen und die Tabelle bricht auseinander:

<table>
	<tr>
		<td colspan="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 Auseinanderbrechen der Tabelle

Versuchen wir nun, das Problem mit dem Auseinanderbrechen der Tabelle aus dem vorherigen Beispiel zu beheben, indem wir eine der Zellen rechts von unserer entfernen (dies ist Zelle 2 oder 3 - spielt keine Rolle):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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 drei Spalten

Erweitern wir Zelle 1 über 3 Spalten und weisen ihr das Attribut colspan mit dem Wert 3 zu. Dabei entfernen wir eine weitere Zelle rechts, damit die Tabelle nicht auseinanderbricht:

<table>
	<tr>
		<td colspan="3">cell1</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 . Gleichzeitig colspan und rowspan

Versuchen wir, die Zellen mit den Nummern 4, 5, 7 und 8 zusammenzufassen, indem wir die Attribute colspan und rowspan verwenden (vorherige Zusammenfassungen entfernen wir aus der Tabelle):

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

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

Siehe auch

Attribut rowspan,
das Reihen der Tabelle zusammenfasst