Attributet rowspan

Attributet rowspan styr sammanslagningen av rader i HTML-tabeller. Tillämpas på taggarna th och td.

Accepterat värde: heltal börjar från 1.

Hur man använder: lägg till detta attribut till valfri cell td eller th. Om, till exempel, du sätter rowspan till värdet 2 - kommer cellen som detta satts på att uppta två rader i tabellens höjd. Samtidigt kommer celler från raden under inte försvinna, vår utökade cell kommer att tränga undan dem och tabellen kommer att kollapsa. För att förhindra detta måste du ta bort en av cellerna från raden under. Se exemplen för bättre förståelse.

Exempel . Tabell utan sammanslagningar

Låt oss titta på en tabell utan sammanslagningar, som vi kommer att arbeta med senare:

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

Exempel . Utöka en cell över två rader

Och låt oss nu utöka cell 1 över två rader, genom att sätta dess attribut rowspan till värdet 2. Vi kommer att se att den tränger undan celler från raden under den och tabellen kollapsar:

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

Exempel . Utöka en cell utan att tabellen kollapsar

För att åtgärda problemet med att tabellen kollapsar från föregående exempel, låt oss försöka ta bort en av cellerna från den andra raden (och det är inte nödvändigtvis cell 4 som finns direkt under vår cell 1, du kan ta bort vilken som helst, vi tar bort cell med 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;
}

Exempel . Utöka en cell över `3` rader

Och här låt oss utöka vår cell inte över två rader, utan över 3, sätt dess rowspan till värdet 3. Samtidigt tar vi bort en av cellerna från den tredje raden (cell 7, 8 eller 9 - spelar ingen roll), så att tabellen inte kollapsar:

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

Exempel . Utöka ytterligare med `2` kolumner

Låt oss utöka även cell 2 med 2 kolumner utöver den första cellen. För detta lägger vi till colspan till cell 2 i värde 2. Samtidigt tar vi bort cell 3, så att tabellen inte kollapsar:

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

Se även

attributet colspan,
som slår samman tabellkolumner