мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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