×

display: table-row [20/23]

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

Любая таблица содержит элементы строка таблицы, внутри которых должны содержаться элементы ячейка таблицы. Соответствие тегов таблицы значениям display:

<table> — display:table;

<tr> — display:table-row;

<td> — display:table-cell;

В этом задании вы создадите строки таблицы с помощью display:table-row;. Строка — необычный элемент. Она является контейнером для ячеек и практически не имеет собственного отображения. Для нее можно только задавать цвет фона.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display: table-row</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 { background: #f2dede; border-color: #b94a48; } .cell { background: #fbeed5; border-color: #c09853; }
HTML Academy
  1. Измените тип элемента с классом row на тип строка таблицы.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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