Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Создание таблиц средствами 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 Определяет элемент как заголовок таблицы

А теперь обещанный пример.

<div class="table">
 <div class="tr">
  <div class="td">Первая строка, первый столбец</div>
  <div class="td">Первая строка, второй столбец</div>
 </div>
 <div class="tr">
  <div class="td">Вторая строка, первый столбец</div>
  <div class="td">Вторая строка, второй столбец</div>
 </div>
</div>

Зададим значения для написанных выше классов.

.table {
display: table;
border:1px solid red;
}
.tr {
display: table-row;
border:1px solid red;
}
.td {
display: table-cell;
border:1px solid red;
}

Результат смотри здесь.


<<Предыдущая | В раздел | Следующая>>