Таблицы на CSS / Заголовок таблицы [3/18]
×

Заголовок таблицы [3/18]

Следующий элемент мира HTML-таблиц — табличный заголовок <caption>. Его представление в CSS:

.this-is-caption {
    display: table-caption;
}

В HTML-таблице тег заголовка располагается внутри неё, в CSS-таблице это так же.

Также к заголовкам CSS-таблиц применимо свойство для вертикального позиционирования заголовка таблицы caption-side. Подробно о нём рассказывается в задании «Заголовок таблицы» курса «Знакомство с таблицами».

Создадим заголовок нашей CSS-таблицы.

Для удобства восприятия мы визуально объединили несколько полок в одну.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <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"> <!-- заголовок добавить сюда --> <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> </article> </body> </html>
CSS
.checklist { display: table; } .checklist ul { display: table-row; } .checklist li { display: table-cell; }
HTML Academy
  1. В блок .checklist первым элементом добавьте заголовок h1 с текстом Вещи в дорогу,
  2. задайте заголовку свойство display: table-caption,
  3. а затем задайте свойство caption-side: bottom.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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