Знакомство с таблицами / Добавим цвета [19/23]
×

Добавим цвета [19/23]

В этом задании мы раскрасим нашу скучную чёрно-белую таблицу. Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. Можно задавать и фоновые изображения, но это мы разберём в последующих курсах.

Цветами можно управлять с помощью этих свойств:

  • background-color — задаёт цвет фона,

  • color — цвет текста,

  • border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок: border: 1px solid lightgray. В этой записи цвет задаёт третья часть — lightgray.

Значения цветов в CSS задаются разными способами. Мы будем использовать ключевые слова для описания цвета.

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:

td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

Конечно, раскрашивать можно и td, и th, и даже table. Приступим!


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Добавим цвета</title> </head> <body> <table> <caption>Распределение браузеров</caption> <tr> <th rowspan="2">Браузер</th> <th colspan="2">Посещения</th> </tr> <tr> <th>Количество</th> <th>В процентах</th> </tr> <tr> <td>Mozilla Firefox</td> <td>126</td> <td>59%</td> </tr> <tr> <td>Google Chrome</td> <td>78</td> <td>30%</td> </tr> <tr> <td>Safari</td> <td>34</td> <td>11%</td> </tr> </table> </body> </html>
CSS
table { border-collapse: collapse; border: 2px solid black; } td { padding: 5px; padding-right: 10px; border: 1px solid lightgray; } th { padding: 10px; border: 1px solid black; } caption { margin-bottom: 10px; font-size: 18px; }
HTML Academy
  1. В CSS для td добавьте свойства color: brown; и background-color: lightyellow;.
  2. Для th добавьте свойства color: darkblue; и background-color: lightcyan;.

При желании поэкспериментируйте с цветом границ.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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