• Теория
  • Теория

Свойство display: table

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

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

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

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

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

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

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

Подробно CSS-таблицы рассматриваются в части «Таблицы на CSS».

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Блочная модель документа» тренажёра «Боксовая модель и позиционирование» можно после регистрации и оформления подписки.