Атрибут rowspan

Атрибут rowspan управља спајањем редова у HTML табели. Примењује се на тагове th и td.

Прихватљива вредност: цели број почевши од 1.

Како се користи: додајемо овај атрибут било ком ћелији td или th. Ако, на пример, поставимо rowspan на вредност 2 - ћелија којој је то задато, заузеће два реда по висини табеле. При томе ћелије из реда испод неће нестати, наша проширена ћелија ће их померити и табела ће се распасти. Да се то не деси, потребно је обрисати једну од ћелија из реда испод. Погледајте примере за боље разумевање.

Пример . Табела без спајања

Хајде да погледамо табелу без спајања, са којом ћемо радити даље:

<table>
	<tr>
		<td>ћелија1</td>
		<td>ћелија2</td>
		<td>ћелија3</td>
	</tr>
	<tr>
		<td>ћелија4</td>
		<td>ћелија5</td>
		<td>ћелија6</td>
	</tr>
	<tr>
		<td>ћелија7</td>
		<td>ћелија8</td>
		<td>ћелија9</td>
	</tr>
</table>

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

Пример . Проширићемо ћелију на два реда

А сада хајде да проширимо ћелију 1 на два реда, задавши јој атрибут rowspan у вредности 2. Видећемо да она помера ћелије из реда испод ње и табела се распада:

<table>
	<tr>
		<td rowspan="2">ћелија1</td>
		<td>ћелија2</td>
		<td>ћелија3</td>
	</tr>
	<tr>
		<td>ћелија4</td>
		<td>ћелија5</td>
		<td>ћелија6</td>
	</tr>
	<tr>
		<td>ћелија7</td>
		<td>ћелија8</td>
		<td>ћелија9</td>
	</tr>
</table>

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

Пример . Проширићемо ћелију без распадања табеле

Да поправимо проблем са распадањем табеле из претходног примера, хајде да покушамо обрисати једну од ћелија из другог реда (и то није обавезно ћелија 4, која се налази директно испод наше ћелије 1, може се обрисати било која, обрисаћемо ћелију са бројем 5):

<table>
	<tr>
		<td rowspan="2">ћелија1</td>
		<td>ћелија2</td>
		<td>ћелија3</td>
	</tr>
	<tr>
		<td>ћелија4</td>
		<td>ћелија6</td>
	</tr>
	<tr>
		<td>ћелија7</td>
		<td>ћелија8</td>
		<td>ћелија9</td>
	</tr>
</table>

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

Пример . Проширићемо ћелију на `3` реда

А овде хајде да проширимо нашу ћелију не на два реда, већ на 3, задајмо јој rowspan у вредности 3. При томе обришимо једну од ћелија из трећег реда (ћелију 7, 8 или 9 - свеједно), да се табела не распадне:

<table>
	<tr>
		<td rowspan="3">ћелија1</td>
		<td>ћелија2</td>
		<td>ћелија3</td>
	</tr>
	<tr>
		<td>ћелија4</td>
		<td>ћелија6</td>
	</tr>
	<tr>
		<td>ћелија7</td>
		<td>ћелија9</td>
	</tr>
</table>

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

Пример . Проширићемо још на `2` колоне

Хајде да проширимо још и ћелију 2 на 2 колоне уз прву ћелију. За то ћелији 2 додајемо colspan у вредности 2. При томе обришимо ћелију 3, да се табела не распадне:

<table>
	<tr>
		<td rowspan="3">ћелија1</td>
		<td colspan="2">ћелија2</td>
	</tr>
	<tr>
		<td>ћелија4</td>
		<td>ћелија6</td>
	</tr>
	<tr>
		<td>ћелија7</td>
		<td>ћелија9</td>
	</tr>
</table>

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

Погледајте такође

атрибут colspan,
који спаја колоне табеле