Таблицы на CSS / Группировка верхних рядов и ячеек [4/18]
×

Группировка верхних рядов и ячеек [4/18]

В HTML-таблицах можно группировать табличные ряды «шапки», основного содержания и «подвала».

Для группировки верхних рядов используется тег <thead>. В него включаются один или несколько рядов. Можно использовать несколько элементов <thead> одновременно.

Аналог группировки верхних рядов в CSS — свойство display: table-header-group. Отметим, что блок, которому задано это свойство, всегда отображается вверху CSS-таблицы, даже если в разметке он идёт не первым. Это поведение идентично тегу <thead>.

Давайте создадим «шапку» нашей CSS-таблицы. Это будет такая же полка, но располагающаяся сверху. Положим на неё одежду — не менее важные вещи для далёкого путешествия. Заметьте, как полка переместится вверх при задании ей свойства display: table-header-group.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Группировка верхних рядов и ячеек</title> <meta charset="utf-8"> <base href="/assets/course86/"> <link href="course.css" rel="stylesheet"> </head> <body class="wood"> <article class="checklist united"> <h1>Вещи в дорогу</h1> <ul> <li><img src="img/sword.svg" alt=""></li> <li><img src="img/shield.svg" alt=""></li> <li><img src="img/stick.svg" alt=""></li> <li><img src="img/bow.svg" alt=""></li> </ul> <!-- <header> <ul> <li><img src="img/magic-hat.svg" alt=""></li> <li><img src="img/hunter-hat.svg" alt=""></li> <li><img src="img/boot.svg" alt=""></li> <li><img src="img/badge.svg" alt=""></li> </ul> </header> --> </article> </body> </html>
CSS
.checklist { display: table; } .checklist ul { display: table-row; } .checklist li { display: table-cell; } .checklist h1 { display: table-caption; }
HTML Academy
  1. Раскомментируйте блок header в разметке,
  2. задайте ему свойство display: table-header-group,
  3. а затем задайте li внутри .checklist header цвет рамки border-color: #3d9970.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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