×

display: table-cell [21/23]

С помощью значения table-cell свойства display можно задать элементу тип ячейка таблицы. Конечно, лучше чтобы элементы-ячейки находились внутри элементов-строк, которые находятся внутри элементов-таблиц.

Вы можете просто задать элементу тип ячейка таблицы, не добавляя вокруг него дополнительных элементов-строк и таблиц. В этом случае браузер создаст дополнительные анонимные элементы строки и таблицы. Неудобство заключается в том, что вы не сможете ими управлять.

К таблицам, созданным с помощью CSS, можно применять те же свойства, что и к обычным таблицам. Например, задавать отступы между ячейками или режим схлопывания границ.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display: table-cell</title> </head> <body> <h1>Посещения по городам</h1> <div class="table"> <div class="row"> <div class="cell">Город</div> <div class="cell">Посещения</div> <div class="cell">Страниц</div> <div class="cell">Время</div> </div> <div class="row"> <div class="cell">СПБ</div> <div class="cell">500</div> <div class="cell">6</div> <div class="cell">00:08:05</div> </div> </div> </body> </html>
CSS
div { margin: 5px; padding: 5px; border: 1px dotted white; } .table { display: table; background: #d9edf7; border-color: #3a87ad; } .row { display: table-row; background: #f2dede; border-color: #b94a48; } .cell { background: #fbeed5; border-color: #c09853; }
HTML Academy
  1. Измените тип элемента с классом cell на тип ячейка таблицы.
  2. Добавьте в таблицу еще одну строку с четырьмя ячейками.
  3. Задайте для класса table нулевые внутренние отступы.
  4. Добавьте для класса table свойство border-spacing: 5px;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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