×

display: table [19/23]

Дальнейшие несколько заданий будут посвящены табличным типам элементов.

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

Однако, семантически таблицы не предназначены для разметки сеток и постепенно от них отказались. Но память об их удобстве жила.

Позднее было разработано семейство значений свойства display, которое позволяет задать табличное поведение любым элементам.

Первое значение — display:table задает элементу тип таблица. Особенности табличных элементов:

  1. можно задавать ширину, высоту, рамки, отступы;
  2. по умолчанию ширина зависит от содержания;
  3. переносы строки до и после элемента.

Табличные элементы похожи на блочные за исключением ширины по умолчанию.


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

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

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

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

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