Атрибут colspan

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

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

Как се използва: добавяме този атрибут към която и да е клетка td или th. Ако, например, зададем colspan със стойност 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 в две колони, като ѝ зададем атрибут colspan със стойност 2. В този случай тя ще изтисне клетките отдясно и таблицата ще се разпадне:

<table>
	<tr>
		<td colspan="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;
}

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

А сега нека се опитаме да поправим проблема с разпадането на таблицата от предишния пример, като премахнем една от клетките отдясно на нашата (това е клетка 2 или 3 - без значение):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</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 в 3 колони и ѝ зададем атрибут colspan със стойност 3. В този случай ще премахнем още една клетка отдясно, за да не се разпадне таблицата:

<table>
	<tr>
		<td colspan="3">cell1</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;
}

Пример . Едновременно colspan и rowspan

Нека опитаме да обединим клетки с номер 4, 5, 7 и 8, като използваме атрибутите colspan и rowspan (предишните обединявания ще премахнем от таблицата):

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell9</td>
	</tr>
</table>

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

Вижте също

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