Знакомство с таблицами / Отступы между ячейками [8/23]
×

Отступы между ячейками [8/23]

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

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

Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

  • с помощью атрибута cellspacing тега <table>

  • или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Отступы между ячейками</title> </head> <body> <h1>Распределение браузеров</h1> <table cellspacing="3"> <tr> <td>Браузер</td> <td>Посещения</td> <td>Доля</td> </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: 3px solid black; } td { border: 2px solid lightgray; padding: 5px; }
HTML Academy
  1. В HTML-редакторе измените значение атрибута cellspacing на 5.
  2. Затем удалите этот атрибут.
  3. В CSS-редакторе для table добавьте свойство border-spacing: 5px;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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