Таблицы на CSS / Ряды и ячейки таблицы [2/18]
×

Ряды и ячейки таблицы [2/18]

Как вы уже поняли, мы можем одновременно и иметь семантическую разметку, и отображать её таблицей, если захотим. А в случае необходимости, можно просто отменить display: table, назначив другое подходящее значение display: например, block. Это ключевое преимущество перед HTML-таблицами, у которых изменить отображение на «нетабличное» нельзя.

Давайте продолжим разбираться с таблицей и полками. У HTML-таблиц есть ряды <tr> и ячейки <td>. Их аналоги в мире CSS-таблиц — значения свойства display: table-row и table-cell.

.this-is-table-row {
    display: table-row;
}
.this-is-table-cell {
    display: table-cell;
}

Ячейки включаются в ряды, ряды в саму таблицу. Давайте сделаем из содержимого нашей таблицы ряды и ячейки. Выстроим полки в ряд.


Выполнить задание
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"> <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; }
HTML Academy
  1. Неупорядоченному списку .checklist ul задайте свойство display: table-row,
  2. а элементам списка — свойство display: table-cell.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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