Знакомство с таблицами / Закрепление rowspan [15/23]
×

Закрепление rowspan [15/23]

Объединение нескольких ячеек по вертикали тоже возможно. Как вы помните, при вертикальном объединении вытесняются ячейки, которые находятся в строках под «растягиваемой» ячейкой. И эти ячейки вытесняются справа в своих строках.

В этом задании вы потренируетесь объединять по вертикали разное число ячеек. Для удобства восприятия ячейки, которые будут вытесняться в каждом из столбцов, помечены разными цветами. Вам нужно будет устанавливать свойство rowspan у нужных ячеек и удалять ячейки соответствующего цвета. Получиться должно следующее:

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


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Закрепление rowspan</title> </head> <body> <table> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> </tr> <tr> <td class="pink">2.1</td> <td>2.2</td> <td class="blue">2.3</td> <td>2.4</td> </tr> <tr> <td class="pink">3.1</td> <td class="green">3.2</td> <td class="blue">3.3</td> <td>3.4</td> </tr> <tr> <td class="pink">4.1</td> <td>4.2</td> <td>4.3</td> <td>4.4</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; } .green { background-color: lightgreen; } .blue { background-color: lightblue; }
HTML Academy
  1. Добавьте ячейке 1.1 атрибут rowspan="4", удалите ячейки с классом pink (розовые).
  2. Ячейке 2.2 атрибут rowspan="2", удалите ячейку с классом green (зелёную).
  3. Ячейке 1.3 атрибут rowspan="3", удалите ячейки с классом blue (синие).
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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