17.2. Табличная модель CSS.

Табличная модель CSS основана на модели HTML 4.0, в которой структура таблицы очень похожа на ее визуальную разметку. В этой модели таблица состоит из необязательного заголовка и любого количества рядов ячеек. Табличная модель является "первоначально рядной", так как авторы определяют явно ряды, а не колонки, в языке документа. Колонки получаются, как только установлены ряды (первая ячейка каждого ряда принадлежит первой колонке, вторая – ко второй и т.е.). Ряды и колонки могут группироваться структурно, и такая группировка отражается в презентации (например, граница может рисоваться вокруг группы рядов).

Таким образом, табличная модель состоит из таблиц, названий таблиц, рядов, группы рядов, колонок, группы колонок и ячеек.

Модель CSS не требует, чтобы язык документа включал элементы, которые соответствуют каждому из этих компонентов. Для языков документов (подобных XML), которые не имеет заранее определенных табличных элементов, авторы должны преобразовывать элементы языка в табличные; это осуществляется свойством 'display'. Следующие значения 'display' присваивают табличную семантику произвольному элементу:

table (в HTML: TABLE)

Устанавливает, что элемент определяется, как блочная таблица: т.е. он является прямоугольным блоком, который участвует в контексте блочного форматирования.

inline-table (в HTML: TABLE)

Устанавливает, что элемент определяется, как внутристрочная таблица: т.е. он является прямоугольным блоком, который участвует в контексте внутристрочного форматирования.

table-row (в HTML: TR)

Устанавливает, что элемент является рядом ячеек.

table-row-group (в HTML: TBODY)

Устанавливает, что элемент группирует один или более рядов.

table-header-group (в HTML: THEAD)

Похоже на 'table-row-group', но для визуального форматирования, группа рядов всегда показана перед всеми другими рядами и группами рядов, после любого верхнего заголовка таблицы. Печатающие устройства вывода могут повторять колонтитульный ряд на каждой странице с продолжением таблицы.

table-footer-group (в HTML: TFOOT)

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

table-column (в HTML: COL)

Устанавливает, что элемент описывает колонку ячеек.

table-column-group (в HTML: COLGROUP)

Устанавливает, что элемент группирует одну или несколько колонок.

table-cell (в HTML: TD, TH)

Устанавливает, что элемент представляет табличную ячейку.

table-caption (в HTML: CAPTION)

Определяет заголовок для таблицы.

Элементы со свойством 'display', установленном на 'table-column' или 'table-column-group', не визуализируются (точно так же, как если бы они имели 'display: none'), но они полезны, так как могут иметь атрибуты, которые приводят к определенному стилю для колонок, которые они представляют.

Стилевые таблицы по умолчанию для HTML 4.0 в приложении иллюстрируют использование этих значений для 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 }

Устройства вывода могут игнорировать значения свойства 'display' для документов HTML, так как авторам не следует менять ожидаемое поведение элементов.

17.2.1. Анонимные табличные объекты.

Языки документов, которые отличаются от HTML, могут не содержать все элементы в табличной модели CSS2. В таких случаях "недостающие" элементы должны симулироваться для того, чтобы табличная модель работала. Недостающие элементы генерируют анонимные объекты (например, анонимные блоки при визуальной разметке таблицы) в соответствии со следующими правилами:

1. Любой табличный элемент будет автоматически генерировать необходимые анонимные табличные объекты вокруг себя, состоящие из не менее трех вложенных объектов в соответствии с элементом 'table'/'inline-table', элементом 'table-row' и элементом 'table-cell'.
2. Если родительский элемент P для элемента Т 'table-cell' не является 'table-row', то объект, соответствующий 'table-row' будет генерироваться между P и T. Этот объект будет охватывать все следующие друг за другом соседние элементы Т 'table-cell' (в дереве документа).
3. Если родительский элемент P элемента Т 'table-row' не является элементом 'table', 'inline-table' или 'table-row-group', то объект, соответствующий элементу 'table' будет генерироваться между P и T. Этот объект будет охватывать все следующие друг за другом соседние элементы Т (в дереве документа), которые требуют родительского элемента 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'caption'.
4. Если родительский элемент P элемента Т 'table-row-group' (или 'table-header-group', или 'table-footer-group') не является 'table' или 'inline-table', то объект, соответствующий элементу 'table' будет генерироваться между P и T. Этот объект будет охватывать все следующие друг за другом соседние элементы Т (в дереве документа), которые требуют родительский элемент 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'caption'.
5. Если дочерний элемент T элемента Р 'table-row' не является элементом 'table-cell', то объект, соответствующий элементу 'table-cell' будет генерироваться между P и T. Этот объект охватывает все следующие друг за другом соседние элементы T, которые не являются элементами 'table-cell'.

В примере с XML, предполагается, что элемент HBOX содержит элемент 'table':

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

т. к. связанная стилевая таблица:

HBOX { display: table-row }
VBOX { display: table-cell }

три элемента 'table-cell', предполагается, содержат текст в элементах ROW. Обратите внимание на то, что текст заключен в анонимные внутристрочные блоки, как это объясняется в модели визуального форматирования:

<STACK>
  <ROW>This is the <D>top</D> row. </ROW>
  <ROW>This is the <D>middle</D> row. </ROW>
  <ROW>This is the <D>bottom</D> row. </ROW>
</STACK>

Стилевая таблица:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

Устройство вывода для HTML не требует создания анонимных блоков в соответствии с выше указанными правилами.