У таблиц в истории развития HTML непростая судьба. Они, можно сказать, оказались не в то время, не в том месте: таблицы долгое время использовали не по назначению для разметки каркаса страниц. Но так как таблица — это довольно «тяжёлый» инструмент и предназначена для других целей, табличной разметкой страниц было сложно управлять. Ситуация осложнялась тем, что на заре эпохи интернета, браузеры могли отображать таблицы совсем по-разному, что также усложняло контроль разметки.

С тех пор за таблицами закрепилась нехорошая репутация. Некоторые разработчики до сих пор боятся использовать таблицы в разметке, даже там, где они вполне уместны. Самое время избавляться от этой пагубной привычки. Тем более, что сейчас таблицы можно использовать не только в HTML, но и в CSS. Кстати, с HTML-таблицами познакомиться можно в части «Знакомство с таблицами». А о CSS-таблицах пойдёт речь в этой части. Мы разберём по косточкам все части CSS-таблиц, а также соберём вещи в поход за Святым Граалем. Но об этом позднее.

Чтобы из любого элемента сделать таблицу в CSS, нужно его свойству display присвоить значение table. Всё просто:

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

В этом случае блок .this-is-table станет отображаться равнозначно тегу <table>.

Испробуем это на практике. Представим таблицу и её ячейки стеллажом и полками, чтобы во всём наглядно разобраться.