17.1. Введение в таблицы.

Таблицы выражают взаимосвязи между данными. Авторы определяют эти связи в языке документа и устанавливают их презентацию в CSS двумя способами: визуальным и озвученным.

Авторы могут определять визуальное форматирование таблицы, как прямоугольную решетку ячеек. Ряды и колонки ячеек могут организовываться в группы рядов и группы колонок. Ряды, колонки, группы рядов, группы колонок и ячейки могут иметь границы (существует две модели границ в CSS2). Авторы могут выравнивать данные вертикально или горизонтально внутри одной ячейки и/или во всех ячейках ряда или колонках одновременно.

Авторы могут определять озвучивание таблицы, т.е. каким образом произносятся заголовки и данные. В языке документа авторы могут помечать ячейки и группы ячеек таким образом, что, когда происходит озвучивание, то заголовки ячеек произносятся перед их данными. В действительности, этот метод "преобразовывает в последовательную форму" таблицу: пользователи, прослушивающие таблицу, услышат заголовки в сопровождении с данными.

Ниже дана таблица с тремя рядами и тремя колонками, описанная языком HTML 4.0:

<TABLE>
<CAPTION>This is a simple 3x3 table</CAPTION>
<TR id="row1">
   <TH>Header 1      <TD>Cell 1        <TD>Cell 2
<TR id="row2">
   <TH>Header 2      <TD>Cell 3        <TD>Cell 4
<TR id="row3">
   <TH>Header 3      <TD>Cell 5        <TD>Cell 6
</TABLE>

Этот код создает одну таблицу (элемент TABLE), три ряда (элементы TR), три ячейки заголовков (элементы TH) и шесть ячеек с данными (элементы TD). Обратите внимание, что три колонки этого примера определены неявно: есть столько колонок в таблице, сколько требуют ячейки заголовков и данных.

Следующее правило CSS размещает текст в ячейках заголовков горизонтально по центру и устанавливает жирный шрифт:

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) будет граница между 1 и 2 рядами? Мы обсудим это ниже в разделе по разрешению граничных конфликтов.

Следующее правило размещает название таблицы наверху:

CAPTION { caption-side: top }

В заключении, следующее правило устанавливает случай, когда происходит озвучивание, то каждый ряд данных произносится, как "Header, Data, Data" ("Заголовок, данные, данные"):

TH { speak-header: once }

Например, первый ряд произносится: "Header1 Cell1 Cell2" ("Заголовок ячейка1 ячейка2"). С другой стороны, для следующего правила:

TH { speak-header: always }

будет произноситься: "Header1 Cell1 Header1 Cell2" ("Заголовок1 ячейка1 заголовок1 ячейка2").

Предшествующий пример показывает, как работают CSS с элементами HTML 4.0; в HTML 4.0 семантика различных табличных элементов (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) хорошо определена. В других языках (таких как XML) может не быть заранее определенных табличных элементов. Поэтому, CSS2 позволяют авторам "преобразовывать" элементы языка документа к табличным элементам через свойство 'display'. Например, следующее правило делает элемент FOO, действующим как элемент TABLE языка HTML, а элемент BAR, как CAPTION:

FOO { display : table }
BAR { display : table-caption }

Мы обсудим различные табличные элементы в следующем разделе. В этих спецификациях термин табличный элемент относится к любому элементу, вовлеченному в создание таблицы. "Внутренний" табличный элемент – это тот, который производит ряд, группу рядов, колонку, группу колонок или ячейку.