Attribuut colspan

Het attribuut colspan beheert het samenvoegen van kolommen in een HTML tabel. Is van toepassing op de tags th en td.

Geaccepteerde waarde: een geheel getal vanaf 1.

Hoe te gebruiken: voeg dit attribuut toe aan elke td- of th-cel. Als je, bijvoorbeeld, colspan instelt op de waarde 2 - dan zal de cel waaraan dit is toegewezen, twee kolommen van de tabel beslaan. Hierbij verdwijnen de aangrenzende cellen aan de rechterkant niet, onze uitgebreide cel zal ze verdringen en de tabel zal instorten. Om dit te voorkomen, moet je één van de cellen aan de rechterkant verwijderen. Zie de voorbeelden voor een beter begrip.

Voorbeeld . Tabel zonder samenvoegingen

Laten we kijken naar een tabel zonder samenvoegingen, waarmee we later zullen werken:

<table>
	<tr>
		<td>cel1</td>
		<td>cel2</td>
		<td>cel3</td>
	</tr>
	<tr>
		<td>cel4</td>
		<td>cel5</td>
		<td>cel6</td>
	</tr>
	<tr>
		<td>cel7</td>
		<td>cel8</td>
		<td>cel9</td>
	</tr>
</table>

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

Voorbeeld . Laten we een cel over twee kolommen uitbreiden

Laten we proberen cel 1 over twee kolommen uit te breiden door het attribuut colspan in te stellen op waarde 2. Hierbij zal het de cellen aan de rechterkant verdringen en de tabel zal instorten:

<table>
	<tr>
		<td colspan="2">cel1</td>
		<td>cel2</td>
		<td>cel3</td>
	</tr>
	<tr>
		<td>cel4</td>
		<td>cel5</td>
		<td>cel6</td>
	</tr>
	<tr>
		<td>cel7</td>
		<td>cel8</td>
		<td>cel9</td>
	</tr>
</table>

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

Voorbeeld . Breid een cel uit zonder dat de tabel instort

Laten we nu proberen het probleem met het instorten van de tabel uit het vorige voorbeeld op te lossen, verwijder één van de cellen aan de rechterkant van de onze (dit is cel 2 of 3 - het maakt niet uit):

<table>
	<tr>
		<td colspan="2">cel1</td>
		<td>cel2</td>
	</tr>
	<tr>
		<td>cel4</td>
		<td>cel5</td>
		<td>cel6</td>
	</tr>
	<tr>
		<td>cel7</td>
		<td>cel8</td>
		<td>cel9</td>
	</tr>
</table>

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

Voorbeeld . Breid een cel uit over drie kolommen

Laten we cel 1 uitbreiden over 3 kolommen en het attribuut colspan instellen op waarde 3. Hierbij verwijderen we nog een cel aan de rechterkant, zodat de tabel niet instort:

<table>
	<tr>
		<td colspan="3">cel1</td>
	</tr>
	<tr>
		<td>cel4</td>
		<td>cel5</td>
		<td>cel6</td>
	</tr>
	<tr>
		<td>cel7</td>
		<td>cel8</td>
		<td>cel9</td>
	</tr>
</table>

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

Voorbeeld . Gelijktijdig colspan en rowspan

Laten we proberen de cellen met nummer 4, 5, 7 en 8 samen te voegen, met behulp van de attributen colspan en rowspan (vorige samenvoegingen halen we uit de tabel):

<table>
	<tr>
		<td colspan="3">cel1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">cel4</td>
		<td>cel6</td>
	</tr>
	<tr>
		<td>cel9</td>
	</tr>
</table>

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

Zie ook

attribuut rowspan,
dat rijen van de tabel samenvoegt