Знакомство с таблицами / Объединяем ячейки в столбцах [13/23]
×

Объединяем ячейки в столбцах [13/23]

Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.

Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.

В задании всё будет очень наглядно. Мы объединим ячейку «Браузер» с ячейкой снизу, а затем поправим CSS-код, чтобы получить тот результат, который изображён на картинке:

Сложный заголовок таблицы


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Объединяем ячейки в столбцах</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th>Браузер</th> <th colspan="2">Посещения</th> </tr> <tr> <th class="pink"></th> <th>Количество</th> <th>В процентах</th> </tr> <tr> <td>Mozilla Firefox</td> <td>163</td> <td>59%</td> </tr> <tr> <td>Google Chrome</td> <td>78</td> <td>28%</td> </tr> <tr> <td>Safari</td> <td>35</td> <td>13%</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; } th { padding: 10px; border: 1px solid black; } caption { margin-bottom: 10px; font-size: 18px; } .pink { background-color: pink; }
HTML Academy
  1. Добавьте ячейке с надписью Браузер атрибут rowspan="2". Смотрите, как сместилась ячейка снизу.
  2. Удалите ячейку c классом pink и розовым фоном во второй строке.
  3. Измените значение свойства border-collapse с separate на collapse.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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