CSS свойство display: table для оформления таблиц без тегов

Доступно в Baseline в статусе «Widely Available» с 2019-10-05

Display: table — это CSS-свойство, которое превращает обычный элемент в таблицу, не создавая реально тега <table>. Это удобно, когда нужно структурировать информацию в виде таблицы, но без лишних тегов, например, для адаптивных или специально оформленных макетов. Внутренние элементы можно оформлять как <tr>, <td> и <th> через display: table-row, display: table-cell и display: table-header-group соответственно — так визуально всё будет похоже на таблицу.

Пример:

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell; border: 1px solid black; padding: 5px;">Ячейка 1</div>
    <div style="display: table-cell; border: 1px solid black; padding: 5px;">Ячейка 2</div>
  </div>
  <div style="display: table-row;">
    <div style="display: table-cell; border: 1px solid black; padding: 5px;">Ячейка 3</div>
    <div style="display: table-cell; border: 1px solid black; padding: 5px;">Ячейка 4</div>
  </div>
</div>

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

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.