Значения свойства display для таблиц

В HTML нетрудно понять, какие элементы являются частями таблицы, поскольку в броузеры встроена обработка таких элементов, как tr и td. В XML, напротив, по сути невозможно знать, какие элементы могут быть частью таблицы. Вот где в игру вступает полный набор значений свойства display. Остальные (block, inline, inline-block, run-in и list-item) обсуждаются в других главах. Касающиеся таблиц значения можно охарактеризовать следующим образом:

table
Это значение показывает, что элемент определяет таблицу уровня блока. Таким образом, оно определяет прямоугольный блок, который обрабатывается как блочный элемент. Соответствующий HTML-элемент, что не удивительно, – table.

inline-table
Это значение показывает, что элемент определяет таблицу строкового уровня. Следовательно, элемент определяет прямоугольный блок, который генерирует строковый блок. Ближайший аналог – значение inline-block. Ближайший HTML-элемент – table, хотя по умолчанию HTML-таблицы не являются строковыми элементами.

table-row
Это значение определяет, что элемент является строкой ячеек. Соответствующий HTML-элемент – tr.

table-row-group
Это значение определяет, что элемент объединяет одну или несколько строк.


Соответствующее HTML-значение – tbody.

table-header-group
Это значение очень похоже на table-row-group, за исключением того, что при визуальном форматировании группа заголовков таблицы всегда отображается перед всеми остальными строками и группами строк и после всех основных заголовков. При печати агент пользователя может повторять строки заголовков в начале каждой страницы, если для распечатки таблицы необходимо несколько страниц. Спецификация не определяет, что происходит, если table-header-group задано для нескольких элементов. Группа заголовков может включать несколько строк. Эквивалент HTML – thead.

table-footer-group
Это значение во многом похоже на table-header-group, за исключением того, что группа строк нижнего заголовка всегда отображается после всех остальных строк и групп строк и перед любыми нижними основными заголовками. При печати агент пользователя может повторять строки нижних заголовков внизу каждой страницы, если для распечатки таблицы требуется несколько страниц. Спецификация не определяет, что происходит, если задать table-footer-group для нескольких элементов. Аналогичен HTML-элементу tfoot.

table-column
Означает, что элемент описывает столбец ячеек.


С точки зрения CSS для элемента с таким значением свойства display не генерируется визуальное представление, как будто он имеет значение none. Они вводятся в основном во вспомогательных целях, чтобы определить представление ячеек в столбце. Аналог HTML-элемента col.

table-column-group
Означает, что элемент объединяет один или несколько столбцов. Как и для элементов table-column, для элементов table-column-group визуальное представление не генерируется, но это значение полезно для определения представления элементов группы столбцов. Аналогичен HTML-элементу colgroup.

table-cell
Это значение определяет, что элемент представляет отдельную ячейку таблицы. В качестве примеров элементов table-cell можно назвать элементы HTML th и td.

table-caption
Это значение определяет основной заголовок таблицы. CSS не оговаривает, что должно произойти, если значение caption имеют несколько элементов, но предупреждает: «…авторы не должны помещать более одного элемента со значением display: caption в таблицу или элемент таблицы строкового уровня».

Краткий обзор основных эффектов от применения этих значений можно найти в приложении C, рассмотрев приведенный там фрагмент примера таблицы стилей HTML 4.0.

table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}

В XML, где элементы не имеют семантики отображения по умолчанию, эти значения становятся крайне полезными.


Рассмотрим следующую разметку:







Красные
8


Кабс
5




Эту разметку можно отформатировать в виде таблицы с помощью следующих стилей:

scores {display: table;}
headers {display: table-header-group;}
game {display: table-row-group;}
team {display: table-row;}
label, name, score {display: table-cell;}

Затем различные ячейки можно было бы отформатировать, например, выделить полужирным шрифтом элементы label и выровнять по правому краю scores. Теоретически можно присвоить табличные значения свойства display любому HTML-элементу, но Internet Explorer вплоть до версии IE7 не поддерживает эту возможность.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц