Как вы уже поняли, мы можем одновременно и иметь семантическую разметку, и отображать её таблицей, если захотим. А в случае необходимости, можно просто отменить display: table, назначив другое подходящее значение display: например, block. Это ключевое преимущество перед HTML-таблицами, у которых изменить отображение на «нетабличное» нельзя.

Давайте продолжим разбираться с таблицей и полками. У HTML-таблиц есть ряды <tr> и ячейки <td>. Их аналоги в мире CSS-таблиц — значения свойства display: table-row и table-cell.

.this-is-table-row {
  display: table-row;
}

.this-is-table-cell {
  display: table-cell;
}

Ячейки включаются в ряды, ряды в саму таблицу. Давайте сделаем из содержимого нашей таблицы ряды и ячейки. Выстроим полки в ряд.