Atributul rowspan

Atributul rowspan gestionează unirea rândurilor în tabelul HTML. Se aplică tagurilor th și td.

Valoare acceptată: număr întreg începând de la 1.

Cum se utilizează: adăugăm acest atribut la orice celulă td sau th. Dacă, de exemplu, setăm rowspan la valoarea 2 - atunci celula căreia i s-a setat, va ocupa două rânduri în înălțimea tabelului. În acest caz, celulele din rândul de dedesubt nu dispar nicăieri, celula noastră extinsă le va înlocui și tabelul se va destrăma. Pentru a preveni acest lucru, este necesar să ștergem una dintre celulele din rândul de dedesubt. Consultați exemplele pentru o mai bună înțelegere.

Exemplul . Tabel fără uniri

Să analizăm un tabel fără uniri, cu care vom lucra în continuare:

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

Exemplul . Să extindem celula pe două rânduri

Acum să extindem celula 1 pe două rânduri, setând atributul rowspan la valoarea 2. Vom vedea că ea înlocuiește celulele din rândul de dedesubt și tabelul se destramă:

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

Exemplul . Să extindem celula fără a destrama tabelul

Pentru a rezolva problema destramării tabelului din exemplul anterior, să încercăm să ștergem una dintre celulele din al doilea rând (și nu neapărat celula 4, care se află direct sub celula noastră 1, se poate șterge oricare, vom șterge celula cu numărul 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;
}

Exemplul . Să extindem celula pe `3` rânduri

Aici să extindem celula noastră nu pe două rânduri, ci pe 3, să îi setăm rowspan la valoarea 3. În acest caz, vom șterge una dintre celulele din al treilea rând (celula 7, 8 sau 9 - nu are importanță), pentru ca tabelul să nu se destrame:

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

Exemplul . Să extindem și pe `2` coloane

Să extindem și celula 2 pe 2 coloane în plus față de prima celulă. Pentru aceasta, celulei 2 îi adăugăm colspan în valoarea 2. În acest caz, vom șterge celula 3, pentru ca tabelul să nu se destrame:

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

Vezi și

atributul colspan,
care unește coloanele tabelului