Глава 2.10. Таблицы

2.10.1. Общее описание

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

Визуальное отображение таблиц состоит в задании правил отображения заголовков и ячеек таблицы, их выравнивания относительно друг друга, изображения рамок вокруг них и т. д. При звуковом отображении таблицы задаются правила того, как должны произноситься заголовки и содержимое ячеек.

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

CSS не требует, чтобы язык документа включал в себя элементы для каждой из перечисленных составляющих таблиц. Например, XML-приложения не содержат предопределенных табличных структур. Тем не менее, авторы могут отобразить элементы на таблицы с помощью свойства display. Для присвоения табличной семантики произвольным элементам языка документа используются следующие значения этого свойства:

Таблица стилей для HTML по умолчанию задает следующие свойства элементов:

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 }

Поддержка:   Поддерживаются только table-header-group и table-footer-group (5.0+)
             Не поддерживаются

2.10.2. Селекторы столбцов

Ячейки таблиц принадлежат одновременно к двум контекстам: строкам и столбцам. При этом в тексте документа ячейки являются потомками строк, но не столбцов. Тем не менее, задание определенных свойств столбцов или их групп влияет на отображение ячеек. Такими свойствами являются:

border

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

background

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

width

Это свойство задает минимальную ширину столбца.

visibility

Если это свойство для столбца имеет значение collapse, то ячейки этого столбца не отображаются, а те ячейки, которые распространяются на несколько столбцов, обрезаются. Кроме того, ширина таблицы уменьшается на ширину данного столбца. Подробности см. ниже в описании динамических эффектов. Другие значения этого свойства игнорируются.

Приведем два примера:

TABLE { border-style: hidden }
COL { border-style: none solid }

TABLE { table-layout: fixed }
COL.total { width: 5em }

В первом примере показано, как реализовать на языке CSS значение cols атрибута rules таблиц HTML (выделение рамкой только границ столбцов). Второй пример показывает, как задать фиксированную ширину столбца.

2.10.3. Визуальное отображение таблиц

2.10.3.1. Расположение заголовка таблицы: свойство caption-side

Синтаксис:  caption-side: top | bottom | left | right | inherit
Начально:   top
Применимо:  к элементам типа table-caption
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Не поддерживается
             Не поддерживается

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

Отображение заголовка над или под телом таблицы производится так же, как отображение двух последовательно расположенных блочных элементов. При отображении заголовка слева или справа от тела таблицы следует явно задавать его ширину свойством width, т. к. не ясно, что в данном случае означает значение auto, принятое по умолчанию. Горизонтальное выравнивание заголовка задается свойством text-align, а вертикальное — свойством vertical-align, которое должно иметь значение top, middle или bottom.

В следующем примере заголовок таблицы размещается слева от нее, сама таблица центрируется (заданием левой и правой границам значения auto), и весь прямоугольник, объемлющий заголовок и тело таблицы, сдвигается влево на ширину заголовка.

BODY {
  margin-left: 10em
}
TABLE {
  margin-left: auto;
  margin-right: auto
}
CAPTION {
  caption-side: left;
  margin-left: -10em;
  width: 10em;
  text-align: right;
  vertical-align: bottom
}

2.10.3.2. Задание ширины столбцов: свойство table-layout

Синтаксис:  table-layout: auto | fixed | inherit
Начально:   auto
Применимо:  к элементам типа table и inline-table
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные

Поддержка:   Соответствует стандарту (5.0+)
             Не поддерживается

Свойство table-layout определяет способ вычисления ширины столбцов таблицы при ее отображении. Оно может принимать следующие значения:

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

1. Если для столбца задано свойство width и его значение отлично от auto, то оно задает ширину столбца.
2. В противном случае, если для ячейки в первой строке таблицы задано свойство width и его значение отлично от auto, то оно задает ширину столбца.
3. Между оставшимися столбцами поровну делится оставшееся пространство таблицы по горизонтали.

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

Автоматическое вычисление ширины столбцов занимает больше времени, так как требует просмотра всей таблицы, но дает более аккуратные результаты. Оно основано на том, что для каждого столбца просматриваются все его ячейки, и ширина столбца определяется шириной наибольшей части ячейки, которая не может быть разорвана переходом на новую строку. Если при этом для столбца задано свойство width и его значение отлично от auto, то оно задает минимальную ширину столбца. Задание этого значения в процентах означает процент от ширины всей таблицы.

В следующем примере ширина столбцов таблицы фиксирована и равна 100px, 300px и 200px соответственно:

<TABLE style="table-layout:fixed; width: 600px>
<COL style="width: 100px"><COL style="width: 300px"><COL style="width: 200px">
...
</TABLE>

2.10.3.3. Динамические эффекты при отображении таблиц

Свойство visibility может принимать значение collapse для строк, групп строк, столбцов и групп столбцов. Это значение приводит к тому, что строка или столбец таблицы полностью исчезают с экрана, а пространство, которое они занимали, становится доступным для отображения другого содержания. Однако, подавление отображения срок или столбцов не вызывает перерасчета высот и ширин ячеек таблицы. Благодаря этому становится возможным динамически удалять строки и столбцы таблицы, не изменяя в остальном ее внешнего вида.

2.10.4. Отображение рамок таблиц

2.10.4.1. Задание типа рамок: свойство border-collapse

Синтаксис:  border-collapse: collapse | separate | inherit
Начально:   collapse
Применимо:  к элементам типа table и inline-table
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Соответствует стандарту (5.0+)
             Не поддерживается

Свойство border-collapse задает тип рамок таблицы. CSS поддерживает для таблиц два типа рамок: слившиеся рамки (collapse) и раздельные рамки (separate). Раздельные рамки соответствуют стандарту HTML; слившиеся рамки отличаются тем, что соседние рамки сливаются в единую рамку. Различие между ними наглядно демонстрируется следующим примером (Netscape Navigator отображает его неверно!):

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

В таблице с раздельными рамками каждая ячейка имеет собственную рамку, поэтому задание рамок для строк, столбцов, групп строк и групп столбцов игнорируется обозревателем. К таблице с раздельными рамками применимы свойства border-spacing и empty-cells; для таблиц со слившимися рамками они игнорируются.

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

1. Рамки со значением border-style, равным hidden, имеют приоритет над остальными конфликтующими рамками. Любая рамка этого стиля подавляет все рамки в данном месте таблицы.
2. Рамки со стилем none имеют наименьший приоритет. Рамка не будет отображаться только тогда, когда все элементы, расположенные в данном месте, имеют этот стиль рамки.
3. В остальных случаях более широкие рамки имеют приоритет перед более узкими. Если же несколько рамок имеют одно значение border-width, то стили рамок в порядке убывания приоритетов таковы: double, solid, dashed, dotted, ridge, outset, groove, inset.
4. Если рамки отличаются только цветами, то порядок убывания приоритетов таков: рамка ячейки, рамка строки, рамка группы строк, рамка столбца, рамка группы столбцов, рамка таблицы.

Отображение некоторых стилей рамок для таблиц также зависит от типа рамки и несколько отлично от обычного, а именно:

hidden
  Скрытая рамка. То же, что none, но для слившихся рамок подавляет все остальные рамки.
inset
  Для раздельных рамок изображается в виде трехмерной врезки;
  для слившихся рамок совпадает с groove.
outset
  Для раздельных рамок изображается в виде трехмерной вырезки;
  для слившихся рамок совпадает с ridge.

2.10.4.2. Расстояние между рамками: свойство border-spacing

Синтаксис:  border-spacing: <размер> <размер> ? | inherit
Начально:   0
Применимо:  к элементам типа table и inline-table
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Не поддерживается
             Не поддерживается

Свойство border-spacing задает расстояние между соседними рамками таблицы в том случае, когда таблица имеет раздельные рамки. Если указан только один размер, то он задает расстояние между рамками и по вертикали, и по горизонтали. Если указаны два размера, то первый задает расстояние между рамками по горизонтали, а второй — по вертикали. Расстояния не могут быть отрицательными. Пример:

TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt }

2.10.4.3. Рамки вокруг пустых ячеек: свойство empty-cells

Синтаксис:  empty-cells: show | hide | inherit
Начально:   show
Применимо:  к элементам типа table-cell
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Не поддерживается
             Не поддерживается

Свойство empty-cells управляет отображением рамок вокруг пустых ячеек в том случае, когда таблица имеет раздельные рамки. Ячейка таблицы считается пустой, если не содержит ничего, кроме пробелов ("\20"), табуляций ("\09"), переводов строки ("\0D")и возвратов каретки ("\0A"). Кроме того, пустыми считаются ячейки, у которых значение свойства visibility равно hidden.

Если данное свойство имеет значение show, то рамки вокруг пустых ячеек отображаются обычным образом. Если оно имеет значение hide, то рамки вокруг пустых ячеек не отображаются; более того, если вся строка таблицы состоит из пустых ячеек, то она ведет себя так, как если бы имела свойство display со значением none. Пример:

TABLE { border-collapse: separate; empty-cells: show }

2.10.5. Звуковое отображение таблиц: свойство speak-header

Синтаксис:  speak-header: once | always | inherit
Начально:   once
Применимо:  к элементам, содержащим заголовки таблиц
Наследуемо: да
Проценты:   не используются
Устройства: звуковые

Поддержка:   Не поддерживается
             Не поддерживается

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

once
  Заголовок произносится один раз, перед серией ячеек.
always
  Заголовок произносится перед каждой ячейкой, к которой он относится.

Способ задания заголовков зависит от языка документа. В частности, HTML содержит три атрибута элементов TD и TH  (headers, scope и axis), которые позволяют связать с каждой ячейкой таблицы соответствующий заголовок.

Пример:

TH.totals { speak-header: always }