Евгений Резниченко - Спецификация CSS2
Следующее правило CSS центрирует текст по горизонтали в заголовочных ячейках и выводит данные шрифтом, имеющим вес bold:
TH { text-align: center; font-weight: bold }
Следующее правило выравнивает текст заголовочных ячеек по их базовой линии и центрирует текст по вертикали в каждой ячейке данных:
TH { vertical-align: baseline } TD { vertical-align: middle }
Следующие правила специфицируют, что верхний ряд будет окружён сплошной голубой рамкой толщиной 3px и каждый из других рядов будет окружён сплошной чёрной рамкой толщиной 1px:
TABLE { border-collapse: collapse } TR#row1 { border-top: 3px solid blue } TR#row2 { border-top: 1px solid black } TR#row3 { border-top: 1px solid black }
Заметьте, однако, что рамки вокруг рядов перекрываются там, где ряды смыкаются. Какого цвета (чёрного или голубого) и толщины (1px или 3px) будет рамка между рядами row1 и row2? Мы обсудим это в разделе о разрешении конфликтов рамок.
Следующее правило помещает заголовок таблицы над таблицей:
CAPTION { caption-side: top }
Наконец, следующее правило специфицирует, что при звуковом выводе каждый ряд данных произносится как "Заголовок, Данные, Данные":
TH { speak-header: once }
Например, первый ряд будет произнесён "Заголовок1 Ячейка1 Ячейка2". С другой стороны, со следующим правилом:
TH { speak-header: always }
будет звучать "Заголовок1 Ячейка1 Заголовок1 Ячейка2".
Этот пример показал, как CSS работает с элементами HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) основательно проработана. В других языках документов (таких как приложения XML) может не быть предопределённых элементов таблицы. Поэтому CSS2 позволяет авторам "map/отображать" элементы языка документа в элементы таблицы через свойство 'display'. Например, следующее правило заставляет элемент FOO работать как элемент TABLE в HTML, а элемент BAR - как элемент CAPTION:
FOO { display : table } BAR { display : table-caption }
Мы обсудим различные элементы таблицы в следующем разделе. В данной спецификации термин элемент таблицы относится к любому элементу, участвующему в создании таблицы. "Внутренний" элемент таблицы это тот, который производит ряд, группу рядов, столбец, группу столбцов или ячейку.
Табличная модель 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, поскольку авторы не должны изменять ожидаемое поведение элемента.
Языки документов, кроме HTML, могут не иметь всех элементов табличной модели CSS2. В таких случаях "отсутствующие" элементы обязаны учитываться, для того чтобы табличная модель работала. Отсутствующие элементы генерируют анонимные объекты (например, анонимные боксы при визуальном выводе таблицы) в соответствии со следующими правилами:
1Любой элемент таблицы автоматически будет генерировать вокруг себя необходимые объекты таблицы, состоящие не менее чем из трёх вложенных объектов, соответствующих элементу 'table'/'inline-table', элементу 'table-row' и элементу 'table-cell'.
2Если родительский P в 'table-cell' элемента T - не 'table-row', объект, соответствующий 'table-row', будет генерироваться между P и T. Этот объект будет занимать все последовательные родственные (смежные) 'table-cell' (в дереве документа) в T.
3Если родительский P в 'table-row' элемента T - не элемент 'table', 'inline-table' или 'table-row-group', объект, соответствующий элементу 'table', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников (смежных) (в дереве документа) в 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') элемента T - не 'table' или 'inline-table', объект, соответствующий элементу 'table', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников (смежных) (в дереве документа) в T, требующем 'table'-родителя: 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group', и 'caption'.
5Если дочерний T от 'table-row' элемента P - не элемент 'table-cell', объект, соответствующий элементу 'table-cell', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников T, не являющихся элементами 'table-cell'.
В этом примере XML принимается, что элемент 'table' содержит элемент HBOX:
<HBOX> <VBOX>George</VBOX> <VBOX>4287</VBOX> <VBOX>1998</VBOX> </HBOX>
поскольку ассоциированная таблица стилей:
HBOX { display: table-row } VBOX { display: table-cell }
В этом примере три элемента 'table-cell' содержат текст в ROWs/рядах. Заметьте, что текст далее инкапсулируется в анонимные инлайн-боксы, как разъясняется в модели визуального форматирования:
<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 не требуется создавать анонимные объекты в соответствии с вышеприведёнными правилами.
Ячейки таблиц могут принадлежать к двум контекстам: рядам и столбцам. Однако в документе-источнике ячейки являются потомками рядов и никогда - столбцов. Несмотря на это, некоторые аспекты ячеек могут вводиться установкой свойств столбцов.
