Создание таблиц средствами CSS
В спецификации CSS2 существует несколько значений свойства display, которые позволяют реализовывать таблицы. На практике это выглядит следующим образом. В html-документе создаётся структура вложенных блоков, для которых в таблице стилей задаются соответствующие значения свойства display. Если непонятно написал, то позже рассмотрим пример, в котором всё распишем поподробнее, а пока зададим таблицу значений.
| Значение свойства display | Аналог в html | Зачем используется |
| table | table | Определяет элемент как таблицу блокового уровня |
| inline-table | - | Определяет таблицу как элемент строкового уровня |
| table-row | tr | Определяет элемент как строку таблицы |
| table-row-group | tboby | Определяет элемент как группу строк таблицы |
| table-header-group | thead | Определяет элемент как группу строк верхней шапки таблицы |
| table-footer-group | tfoot | Определяет элемент как группу строк нижней части таблицы |
| table-column | col | Определяет элемент как столбец таблицы |
| table-column-group | colgroup | Определяет элемент как группу столбцов таблицы |
| table-cell | td, th | Определяет элемент как ячейку таблицы |
| table-caption | caption | Определяет элемент как заголовок таблицы |
А теперь обещанный пример.
Первая строка, первый столбец
Первая строка, второй столбец
Вторая строка, первый столбец
Вторая строка, второй столбец
Зададим значения для написанных выше классов.
.table {
display: table;
border:1px solid red;
}
.tr {
display: table-row;
border:1px solid red;
}
.td {
display: table-cell;
border:1px solid red;
}
Результат смотри здесь.