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

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

Мы подобрались к одному из самых сложных вопросов по работе с таблицами. Это объединение ячеек.

Когда вы объединяете ячейки в текстовом редакторе, например, Word, то программа многое делает за вас. В чистом HTML задача объединения сложнее, однако, не стоит пугаться, сам принцип объединения ячеек не так уж сложен, просто нужно больше внимательности.

Исходная таблица в примере не очень красива, но с помощью объединения ячеек мы сделаем сложный заголовок таблицы, вот такой:

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

Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Легче сделать и посмотреть, чем объяснять. Приступим.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Объединяем ячейки в строках</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th>Браузер</th> <th>Посещения</th> <th class="pink"></th> </tr> <tr> <th></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. Добавьте ячейке с надписью Посещения атрибут colspan="2". Обратите внимание, что в таблице добавился лишний столбец.
  2. Затем удалите пустую ячейку с розовым фоном сразу после ячейки Посещения. Лишний столбец должен исчезнуть.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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