Atribut rowspan

Atribut rowspan upravlja spajanjem redova u HTML tabeli. Primenjuje se na tagove th i td.

Prihvaćena vrednost: ceo broj počev od 1.

Kako se koristi: dodajemo ovaj atribut bilo kojoj ćeliji td ili th. Ako, na primer, postavimo rowspan na vrednost 2 - onda će ćelija kojoj je ovo postavljeno zauzeti dva reda u visini tabele. Pri tome ćelije iz reda ispod neće nigde nestati, naša proširena ćelija će ih izgurati i tabela će se raspasti. Da se to ne bi dogodilo, potrebno je obrisati jednu od ćelija iz reda ispod. Pogledajte primere za bolje razumevanje.

Primer . Tabela bez spajanja

Hajde da pogledamo tabelu bez spajanja, sa kojom ćemo dalje raditi:

<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 . Proširimo ćeliju na dva reda

A sada hajde da proširimo ćeliju 1 na dva reda, postavljajući joj atribut rowspan na vrednost 2. Videćemo da ona izguruje ćelije iz reda ispod nje i tabela se raspada:

<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 . Proširimo ćeliju bez raspadanja tabele

Da bismo popravili problem raspadanja tabele iz prethodnog primera, hajde da probamo obrisati jednu od ćelija iz drugog reda (i to ne obavezno ćeliju 4, koja se nalazi neposredno ispod naše ćelije 1, moguće je brisati bilo koju, obrisaćemo ćeliju broj 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 . Proširimo ćeliju na `3` reda

A ovde hajde da proširimo našu ćeliju ne na dva reda, već na 3, postavimo joj rowspan u vrednosti 3. Pri tome obrisaćemo jednu od ćelija iz trećeg reda (ćeliju 7, 8 ili 9 - nema veze), kako bi tabela ne bi raspala:

<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 . Proširimo još na `2` kolone

Hajde da proširimo još i ćeliju 2 na 2 kolone uz prvu ćeliju. Za to ćeliji 2 dodajemo colspan u vrednosti 2. Pri tome obrisaćemo ćeliju 3, kako bi tabela ne bi raspala:

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

Pogledajte takođe

atribut colspan,
koji spaja kolone tabele