Attributtet rowspan

Attributtet rowspan styrer sammenslåingen av rader i HTML tabeller. Brukes på taggene th og td.

Akseptert verdi: heltall fra og med 1.

Hvordan bruke: legger til dette attributtet til en hvilken som helst celle td eller th. Hvis for eksempel rowspan settes til verdien 2 - vil cellen dette er satt på, oppta to rader i tabellens høyde. Samtidig vil celler fra raden under ikke forsvinne, vår utvidede celle vil fortrengse dem og tabellen vil falle sammen. For å forhindre dette, må man fjerne en av cellene fra raden under. Se eksemplene for bedre forståelse.

Eksempel . Tabell uten sammenslåinger

La oss se på en tabell uten sammenslåinger, som vi skal jobbe videre med:

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

Eksempel . Utvider cellen til to rader

Og la oss nå utvide celle 1 til to rader, ved å sette dens attributt rowspan til verdien 2. Vi vil se at den fortrenger celler fra raden under den og tabellen faller sammen:

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

Eksempel . Utvider cellen uten at tabellen faller sammen

For å rette opp problemet med at tabellen faller sammen fra forrige eksempel, la oss prøve å fjerne en av cellene fra den andre raden (og det er ikke nødvendigvis celle 4 som er rett under vår celle 1, man kan fjerne hvilken som helst, vi fjerner cellen 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;
}

Eksempel . Utvider cellen til `3` rader

Og her la oss utvide vår celle ikke til to rader, men til 3, sette dens rowspan til verdien 3. Samtidig fjerner vi en av cellene fra den tredje raden (celle 7, 8 eller 9 - det spiller ingen rolle), slik at tabellen ikke faller sammen:

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

Eksempel . Utvider med `2` kolonner til

La oss utvide også celle 2 med 2 kolonner i tillegg til den første cellen. For å gjøre dette legger vi til colspan på celle 2 med verdien 2. Samtidig fjerner vi celle 3, slik at tabellen ikke faller sammen:

<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 også

attributtet colspan,
som slår sammen tabellkolonner