Из любого элемента можно сделать таблицу в 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;
}