Атрибут rowspan

Атрибутът rowspan управлява обединяването редове в HTML таблица. Прилага се към таговете th и td.

Приемана стойност: цяло число започващо от 1.

Как се използва: добавяме този атрибут към която и да е клетка td или th. Ако, например, зададем rowspan със стойност 2 - тогава клетката, към която е зададено, ще заеме два реда във височина на таблицата. В този случай клетките от реда по-долу няма да изчезнат, нашата разширена клетка ще ги изтласка и таблицата ще се разпадне. За да не се случи това, трябва да се премахне една от клетките от реда по-долу. Вижте примерите за по-добро разбиране.

Пример . Таблица без обединявания

Нека разгледаме таблица без обединявания, с която ще работим по-нататък:

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

Пример . Разширяваме клетка на два реда

А сега нека разширим клетка 1 на два реда, като й зададем атрибут rowspan със стойност 2. Ще видим, че тя изтласква клетките от реда под нея и таблицата се разпада:

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

Пример . Разширяваме клетка без разпадане на таблицата

За да поправим проблема с разпадането на таблицата от предишния пример, нека опитаме да премахнем една от клетките от втория ред (и това не е задължително клетка 4, която се намира непосредствено под нашата клетка 1, може да се премахне всяка, ние ще премахнем клетка с номер 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;
}

Пример . Разширяваме клетка на `3` реда

А тук нека разширим нашата клетка не на два реда, а на 3, задаваме й rowspan със стойност 3. В този случай премахваме една от клетките от третия ред (клетка 7, 8 или 9 - без значение), за да таблицата не се разпадне:

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

Пример . Разширяваме още на `2` колони

Нека разширим и клетка 2 на 2 колони в допълнение към първата клетка. За това на клетка 2 добавяме colspan със стойност 2. В този случай премахваме клетка 3, за да таблицата не се разпадне:

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

Вижте също

атрибут colspan,
който обединява колони на таблицата