Atribút rowspan

Atribút rowspan riadi zlučovanie riadkov v HTML tabuľke. Aplikuje sa na tagy th a td.

Akceptovaná hodnota: celé číslo začínajúce od 1.

Ako používať: pridáme tento atribút k ľubovoľnej bunke td alebo th. Ak, napríklad, nastavíme rowspan na hodnotu 2 - potom bunka, ktorej sme to nastavili, zaberie dva riadky na výšku tabuľky. Pritom bunky z riadku pod ním nezmiznú, naša rozšírená bunka ich vytlačí a tabuľka sa rozpadne. Aby sa to nestalo, je potrebné odstrániť jednu z buniek z riadku pod ním. Pozrite si príklady pre lepšie pochopenie.

Príklad . Tabuľka bez zlučovania

Pozrime sa na tabuľku bez zlučovania, s ktorou budeme pracovať ďalej:

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

Príklad . Rozšírme bunku na dva riadky

A teraz rozšírme bunku 1 na dva riadky, nastavením atribútu rowspan na hodnotu 2. Uvidíme, že vytláča bunky z riadku pod ňou a tabuľka sa rozpadá:

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

Príklad . Rozšírme bunku bez rozpadnutia tabuľky

Aby sme napravili problém s rozpadnutím tabuľky z predchádzajúceho príkladu, skúsme odstrániť jednu z buniek z druhého riadku (a nie je to nevyhnutne bunka 4, ktorá sa nachádza priamo pod našou bunkou 1, je možné odstrániť ľubovoľnú, odstránime bunku s číslom 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;
}

Príklad . Rozšírme bunku na `3` riadky

A tu rozšírme našu bunku nie na dva riadky, ale na 3, nastavíme jej rowspan na hodnotu 3. Pritom odstránime jednu z buniek z tretieho riadku (bunku 7, 8 alebo 9 - bez rozdielu), aby tabuľka sa nerozpadla:

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

Príklad . Rozšírme ešte na `2` stĺpce

Rozšírme ešte aj bunku 2 na 2 stĺpce navyše k prvej bunke. Pre to bunke 2 pridáme colspan v hodnote 2. Pritom odstránime bunku 3, aby tabuľka sa nerozpadla:

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

Pozri tiež

atribút colspan,
ktorý zlučuje stĺpce tabuľky