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

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

Авторы могут определять визуальное форматирование таблиц в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк и группы столбцов. Вокруг строк, столбцов, групп строк, групп строк и ячеек могут быть видимые границы (в спецификации CSS2 представлено две модели границ). Внутри ячейки данные могут выравниваться по вертикали или по горизонтали. Кроме того, данные могут выравниваться во всех ячейках или столбцах.

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

Пример(ы):

Далее представлена таблица из трех строк и трех абзацев, описанная на языке HTML 4.0:

<TABLE>

<CAPTION>Обычная таблица размером 3x3</CAPTION>

<TR id="row1">

<TH>Заголовок 1 <TD>Ячейка 1 <TD>Ячейка 2

<TR id="row2">

<TH>Заголовок 2 <TD>Ячейка 3 <TD>Ячейка 4

<TR id="row3">

<TH>Заголовок 3 <TD>Ячейка 5 <TD>Ячейка 6

</TABLE>

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

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

TH { text-align: center; font-weight: bold }

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

TH { vertical-align: baseline }

TD { vertical-align: middle }

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

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 }

Следует помнить, однако, что границы вокруг строк могут перекрываться в местах пересечения строк. Какого цвета (черная или синяя) и толщины (1 пиксел или 3 пиксела) будет граница между строкой 1 и 2? Это обсуждается в разделе об устранении конфликтов между границами.

Согласно следующему правилу заголовок таблицы помещается над самой таблицей:

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 позволяет авторам "отображать" элементы языка документа на элементы таблицы с помощью свойства 'display'. Например, за счет следующего правила элемент FOO действует как элемент HTML TABLE, а элемент BAR работает как элемент CAPTION:

FOO { display : table }

BAR { display : table-caption }

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