Таблицы на CSS / CSS-таблица [1/18]
×

CSS-таблица [1/18]

У таблиц в истории развития HTML непростая судьба. Они, можно сказать, оказались не в то время, не в том месте: таблицы долгое время использовали не по назначению для разметки каркаса страниц. Но так как таблица — это довольно «тяжёлый» инструмент и предназначена для других целей, табличной разметкой страниц было сложно управлять. Ситуация осложнялась тем, что на заре эпохи интернета, браузеры могли отображать таблицы совсем по-разному, что также усложняло контроль разметки.

С тех пор за таблицами закрепилась нехорошая репутация. Некоторые разработчики до сих пор боятся использовать таблицы в разметке, даже там, где они вполне уместны. Самое время избавляться от этой пагубной привычки. Тем более, что сейчас таблицы можно использовать не только в HTML, но и в CSS. Кстати, с HTML-таблицами познакомиться можно в курсе «Знакомство с таблицами». А о CSS-таблицах пойдёт речь в этом курсе. Мы разберём по косточкам все части CSS-таблиц, а также соберём вещи в поход за Святым Граалем. Но об этом позднее.

Чтобы из любого элемента сделать таблицу в CSS, нужно его свойству display присвоить значение table. Всё просто:

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

В этом случае блок .this-is-table станет отображаться равнозначно тегу <table>.

Испробуем это на практике. Представим таблицу и её ячейки стеллажом и полками, чтобы во всём наглядно разобраться.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>CSS-таблица</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
HTML Academy
  1. Блоку .checklist задайте свойство display: table.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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