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

Отступы внутри ячеек [7/23]

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега <table>. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

  • padding-top,

  • padding-right,

  • padding-bottom,

  • padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td {
  padding: 10px;
  padding-left: 20px;
}

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

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

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

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

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