HTML\CSS → Таблицы на CSS

Из любого элемента можно сделать таблицу в CSS, для нужно ему присвоить свойство display: table. При этом элемент будет вести себя в потоке документа как блок. Если задать свойство display: inline-table — табилца будет располагатьсяв одной строке с другими строчными элементами.

.table { display: table; }
.inline-table { display: inline-table; }
.row { display: table-row; }
.cell { display: table-cell; }
.caption { display: table-caption; caption-side: bottom; }
.colgroup { display: table-column-group; }
.col { display: table-column; }
.thead { display: table-header-group; }
.tbody { display: table-row-group; }
.tfoot { display: table-footer-group; }

Cвойство border-spacing определяет расстояние между ячейками внутри таблицы (только для border-collapse: separate). Отличительная особенность: свойство border-spacing задается для всей таблицы, в отличие от padding, которое задается для конкретных ячеек.

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 5px 10px;
}