Atribut rowspan

Atribut rowspan upravlja združevanje vrstic v HTML tabeli. Uporablja se za oznake th in td.

Sprejeta vrednost: celo število začenši z 1.

Kako uporabljati: dodamo ta atribut katerikoli celici td ali th. Če, na primer, nastavimo rowspan na vrednost 2 - bo celica, ki ji je to nastavljeno, zasedla dve vrstici po višini tabele. Pri tem celice iz vrstice pod njo ne izginejo, naša razširjena celica jih bo izrinila in tabela se bo razpadla. Da se to ne zgodi, je treba odstraniti eno izmed celic iz vrstice pod njo. Glejte primere za boljše razumevanje.

Primer . Tabela brez združevanja

Poglejmo si tabelo brez združevanja, s katero bomo delali naprej:

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

Primer . Razširimo celico na dve vrstici

In zdaj razširimo celico 1 na dve vrstici, tako da ji nastavimo atribut rowspan na vrednost 2. Videli bomo, da izriva celice iz vrstice pod njo in tabela se razpada:

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

Primer . Razširimo celico brez razpadanja tabele

Da popravimo težavo z razpadanjem tabele iz prejšnjega primera, poskusimo odstraniti eno od celic iz druge vrstice (in to ni nujno celica 4, ki je neposredno pod našo celico 1, lahko odstranimo katerokoli, odstranili bomo celico s številko 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;
}

Primer . Razširimo celico na `3` vrstice

In tukaj razširimo našo celico ne na dve vrstici, ampak na 3, nastavimo ji rowspan na vrednost 3. Pri tem odstranimo eno od celic iz tretje vrstice (celico 7, 8 ali 9 - ni pomembno), da se tabela ne razpade:

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

Primer . Razširimo še na `2` stolpca

Razširimo še celico 2 na 2 stolpca poleg prve celice. Za to celici 2 dodamo colspan na vrednost 2. Pri tem odstranimo celico 3, da se tabela ne razpade:

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

Glejte tudi

atribut colspan,
ki združuje stolpce tabele