Знакомство с таблицами / Раскрашиваем строки [20/23]
×

Раскрашиваем строки [20/23]

В предыдущем задании вы раскрасили ячейки и ячейки-заголовки с помощью CSS. Если задавать стили для тега, например, th или td, то они применятся ко всем тегам. В нашем примере все ячейки окрасились в светло-жёлтый, а все ячейки-заголовки в светло-голубой.

Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? Можно использовать классы и применять стили для этих классов. Например, вот так:

.my-class {
  стили
}

В этом задании мы раскрасим в разные цвета строки таблицы. Для этого воспользуемся классами, которые уже заданы для строк в примере.


Выполнить задание
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 class="row-1"> <td>Mozilla Firefox</td> <td>126</td> <td>59%</td> </tr> <tr class="row-2"> <td>Google Chrome</td> <td>78</td> <td>28%</td> </tr> <tr class="row-3"> <td>Safari</td> <td>34</td> <td>13%</td> </tr> </table> </body> </html>
CSS
.row-1 { } .row-2 { } .row-3 { } 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 для .row-1 добавьте свойство background-color: pink;.
  2. Для .row-2 добавьте background-color: lightgreen;.
  3. Для .row-3 добавьте background-color: lightblue;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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