Знакомство с таблицами / Комбо: colspan + rowspan [16/23]
×

Комбо: colspan + rowspan [16/23]

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

Этот случай из тех, которые легче объяснить на примере, чем на словах. В этом задании вы растянете ячейку на два столбца и две строки и сами увидите, как поведёт себя таблица. В результате получится:

Объединение нескольких ячеек в таблице


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Комбо: colspan + rowspan</title> </head> <body> <table> <tr> <td>1.1</td> <td class="pink">1.2</td> <td>1.3</td> </tr> <tr> <td class="pink">2.1</td> <td class="pink">2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> </body> </html>
CSS
table { border-collapse: separate; border: 2px solid black; border-spacing: 4px; } td { padding: 5px; padding-right: 30px; border: 1px solid lightgray; } .pink { background-color: pink; }
HTML Academy
  1. Добавьте ячейке 1.1 атрибуты colspan="2" и rowspan="2".
  2. Удалите ячейки с классом pink (розовые).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.