Attributten rowspan

Attributten rowspan styrer sammenlægningen af rækker i en HTML tabel. Anvendes på tagsene th og td.

Accepteret værdi: et helt tal startende fra 1.

Hvordan man bruger det: vi tilføjer denne attribut til enhver celle td eller th. Hvis man for eksempel sætter rowspan til værdien 2 - vil cellen, som denne er sat på, optage to rækker i tabellens højde. Samtidig vil cellerne fra rækken under ikke forsvinde, vores udvidede celle vil fortrænge dem, og tabellen vil gå i stykker. For at forhindre dette, er det nødvendigt at fjerne en af cellerne fra rækken under. Se eksemplerne for bedre at forstå.

Eksempel . Tabel uden sammenlægninger

Lad os se på en tabel uden sammenlægninger, som vi vil arbejde videre med:

<table>
	<tr>
		<td>celle1</td>
		<td>celle2</td>
		<td>celle3</td>
	</tr>
	<tr>
		<td>celle4</td>
		<td>celle5</td>
		<td>celle6</td>
	</tr>
	<tr>
		<td>celle7</td>
		<td>celle8</td>
		<td>celle9</td>
	</tr>
</table>

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

Eksempel . Udvider cellen over to rækker

Lad os nu udvide celle 1 over to rækker ved at give den attributten rowspan med værdien 2. Vi vil se, at den fortrænger cellerne fra rækken under den, og tabellen går i stykker:

<table>
	<tr>
		<td rowspan="2">celle1</td>
		<td>celle2</td>
		<td>celle3</td>
	</tr>
	<tr>
		<td>celle4</td>
		<td>celle5</td>
		<td>celle6</td>
	</tr>
	<tr>
		<td>celle7</td>
		<td>celle8</td>
		<td>celle9</td>
	</tr>
</table>

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

Eksempel . Udvider cellen uden at tabellen går i stykker

For at rette problemet med, at tabellen går i stykker fra det foregående eksempel, lad os prøve at fjerne en af cellerne fra den anden række (og det er ikke nødvendigvis celle 4, som er placeret direkte under vores celle 1, man kan fjerne enhver, vi fjerner cellen med nummer 5):

<table>
	<tr>
		<td rowspan="2">celle1</td>
		<td>celle2</td>
		<td>celle3</td>
	</tr>
	<tr>
		<td>celle4</td>
		<td>celle6</td>
	</tr>
	<tr>
		<td>celle7</td>
		<td>celle8</td>
		<td>celle9</td>
	</tr>
</table>

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

Eksempel . Udvider cellen over `3` rækker

Lad os her udvide vores celle ikke over to rækker, men over 3, ved at give den rowspan med værdien 3. Samtidig fjerner vi en af cellerne fra den tredje række (celle 7, 8 eller 9 - det betyder ikke noget), så tabellen ikke går i stykker:

<table>
	<tr>
		<td rowspan="3">celle1</td>
		<td>celle2</td>
		<td>celle3</td>
	</tr>
	<tr>
		<td>celle4</td>
		<td>celle6</td>
	</tr>
	<tr>
		<td>celle7</td>
		<td>celle9</td>
	</tr>
</table>

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

Eksempel . Udvider yderligere over `2` kolonner

Lad os også udvide celle 2 over 2 kolonner udover den første celle. For at gøre dette tilføjer vi colspan til celle 2 med værdien 2. Samtidig fjerner vi celle 3, så tabellen ikke går i stykker:

<table>
	<tr>
		<td rowspan="3">celle1</td>
		<td colspan="2">celle2</td>
	</tr>
	<tr>
		<td>celle4</td>
		<td>celle6</td>
	</tr>
	<tr>
		<td>celle7</td>
		<td>celle9</td>
	</tr>
</table>

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

Se også

attributten colspan,
som sammenlægger tabelkolonner