Атрибут colspan

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

Принимаемое значение: целое число начиная с 1.

Как пользоваться: добавляем данный атрибут к любой ячейке td или th. Если, к примеру, задать colspan в значение 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 на два столбца

Давайте попробуем расширить Ячейку1 на два столбца, задав ей атрибут colspan в значении 2. При этом она вытеснит ячейки справа и таблица развалится:

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

Пример . Расширим Ячейку1 на два столбца без разваливания таблицы

А теперь попробуем поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 - без разницы):

<table>
	<tr>
		<td colspan="2">Ячейка 1</td>
		<td>Ячейка 2</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 на `3` столбца без разваливания таблицы

Давайте расширим Ячейку1 на 3 столбца и зададим ей атрибут colspan в значении 3. При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

<table>
	<tr>
		<td colspan="3">Ячейка 1</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;
}

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

Давайте попробуем объединить ячейки с номером 4, 5, 7 и 8, воспользовавшись атрибутами colspan и rowspan (предыдущие объединения уберем из таблицы):

<table>
	<tr>
		<td colspan="3">Ячейка 1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">Ячейка 4</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 9</td>
	</tr>
</table>

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

Смотрите также

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