# Атрибут 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`,
  который объединяет ряды таблицы

←→
↑