Знакомство с таблицами / Ячейки-заголовки [10/23]
×

Ячейки-заголовки [10/23]

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

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

В этом задании мы наконец-то добавим в нашу таблицу ячейки-заголовки и оформим их: добавим увеличенные отступы и более яркие рамки.


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

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

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

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

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