Атрибут 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,
кој ги спојува колоните на табелата