Het rowspan attribuut

Het attribuut rowspan beheert het samenvoegen van rijen in een HTML tabel. Van toepassing op de tags th en td.

Geaccepteerde waarde: een geheel getal vanaf 1.

Hoe te gebruiken: voeg dit attribuut toe aan elke cel td of th. Als, bijvoorbeeld, rowspan ingesteld wordt op waarde 2 - dan zal de cel waaraan dit is toegewezen, twee rijen in de hoogte van de tabel innemen. Hierbij verdwijnen de cellen uit de rij eronder niet, onze uitgebreide cel zal ze verdringen en de tabel zal instorten. Om dit te voorkomen, moet één van de cellen uit de rij eronder worden verwijderd. Bekijk de voorbeelden voor een beter begrip.

Voorbeeld . Tabel zonder samenvoegingen

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

<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;
}

Voorbeeld . Laten we een cel over twee rijen uitbreiden

Laten we nu cel 1 over twee rijen uitbreiden, door het attribuut rowspan in te stellen op waarde 2. We zullen zien dat het de cellen uit de rij eronder verdringt en de tabel instort:

<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;
}

Voorbeeld . Laten we een cel uitbreiden zonder dat de tabel instort

Om het instortingsprobleem van de tabel uit het vorige voorbeeld op te lossen, laten we proberen een van de cellen uit de tweede rij te verwijderen (en dit is niet noodzakelijk cel 4, die zich direct onder onze cel 1 bevindt, je kunt elke cel verwijderen, we verwijderen cel 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;
}

Voorbeeld . Laten we een cel over `3` rijen uitbreiden

Laten we hier onze cel niet over twee rijen uitbreiden, maar over 3, door rowspan in te stellen op waarde 3. Hierbij verwijderen we een van de cellen uit de derde rij (cel 7, 8 of 9 - het maakt niet uit), zodat de tabel niet instort:

<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;
}

Voorbeeld . Laten we nog met `2` kolommen uitbreiden

Laten we ook cel 2 over 2 kolommen uitbreiden, in aanvulling op de eerste cel. Hiervoor voegen we aan cel 2 colspan toe in waarde 2. Hierbij verwijderen we cel 3, zodat de tabel niet instort:

<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;
}

Zie ook

het attribuut colspan,
dat kolommen van een tabel samenvoegt