17 Таблицы

17.1 Введение

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

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

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

<TABLE>
<CAPTION>Это простая таблица 3x3</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>

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

TH { vertical-align: baseline }
TD { vertical-align: middle }

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 }

CAPTION { caption-side: top }

TH { speak-header: once }

TH { speak-header: always }

Этот пример показал, как 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 }

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

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' элемента 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'.

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

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

<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 не требуется создавать неизвестные объекты в соответствии с вышеприведёнными правилами.

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

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

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

'border'

Различные свойства рамки используются к столбцам только тогда, когда 'border-collapse' в элементе таблицы установлен в 'collapse'. В таком случае, рамки, установленные для столбца и группы столбцов, являются источником алгоритма разрешения конфликтов, тот, что выбирает жанры рамки для всякого края ячейки.

'background'

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

'width'

Свойство 'width' задаёт минимальную ширину столбца.

'visibility'

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

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 Таблицы в модели визуального форматирования

В терминах модели визуального форматирования поведение таблицы может быть схожим на элемент уровня блока либо замещаемый элемент инлайн-уровня. У таблиц есть содержимое, заполнение, рамки и поля.

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

17.4.1 Позиция и выравнивание заголовка

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

top

Позиционирует бокс заголовка над боксом таблицы.

bottom

Позиционирует бокс заголовка под боксом таблицы.

left

Позиционирует бокс заголовка слева от бокса таблицы.

right

Позиционирует бокс заголовка справа от бокса таблицы.

Заголовки сверху либо снизу от элемента 'table' форматируются абсолютно так же, как если бы они были элементами блока до и позже таблицы, за исключением того, что (1) они наследуют наследуемые свойства таблицы и (2) они не рассматриваются как бокс блока для целей элементов 'compact' либо 'run-in', которые могут предшествовать таблице.

Заголовок сверху либо снизу от бокса таблицы ведёт себя аналогично боксу блока и при расчётах ширины; ширина вычисляется касательно ширины бокса таблицы содержащего блока.

Для заголовков слева либо справа от бокса таблицы значение, хорошее от 'auto' для 'width', устанавливает ширину очевидно, но 'auto' уведомляет ПА, что надобно предпочесть "приемлемую ширину". Она может варьироваться от "самого тесного допустимого бокса" до "строки", следственно мы рекомендуем, дабы пользователи не специфицировали 'auto' для ширины левых и правых заголовков.

Чтобы выровнять содержимое заголовка по горизонтали внутри бокса заголовка, используйте качество 'text-align'.
Для вертикального выравнивания левых и правых боксов заголовка касательно бокса таблицы используйте качество 'vertical-align'. В этом случае допустимы только значения 'top', 'middle' и 'bottom'. Все другие значения рассматриваются как 'top'.

CAPTION { caption-side: bottom; 
          width: auto;
          text-align: left }

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

17.5 Вид содержимого таблицы

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

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

1. Каждый бокс ряда занимает один ряд ячеек сетки. Все совместно боксы рядов заполняют таблицу сверху вниз в том порядке, в котором они возникают в документе-источнике (т.е. таблица занимает ровно столько рядов сетки, сколько имеется элементов рядов).
2. Группа рядов занимает те же ячейки, что и составляющие её ряды.
3. Бокс столбца занимает один либо больше столбцов сетки. Боксы столбцов размещаются друг за ином в том порядке, в котором они вводятся. Бокс первого столбца может находиться слева либо справа, в зависимости от значения свойства 'direction' таблицы.
4. Бокс группы столбцов занимает те же ячейки сетки, что и содержащиеся в нём столбцы.
5. Ячейки могут захватывать несколько рядов и столбцов. (Правда CSS2 не определяет, как вычисляется число захваченных рядов либо столбцов, ПА может иметь особые данные о документе-источнике; грядущая версия CSS может предоставить метод выражения этих сведений в синтаксисе CSS.) Вся ячейка, следственно, это прямоугольный бокс шириной и высотой в одну либо больше ячеек сетки. Верхний ряд этого прямоугольника находится в ряду, специфицированном родителем ячейки. Прямоугольник обязан находиться как дозволено левее, но не может перекрывать всякий иной бокс ячейки и обязан находиться справа от всех ячеек в том же ряду, определённых ранее в документе-источнике. (Это лимитация остаётся в силе, если качество 'direction' таблицы - 'ltr'; если же 'direction' - 'rtl', "лево" и "право" в предыдущем предложении меняются местами.)
6. Бокс ячейки не может продолжаться за пределы бокса последнего ряда либо группы рядов таблицы; ПА обязан уменьшить его (бокс ячейки) до вмещения.

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

17.5.1 Слои и прозрачность таблицы

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

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

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

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

4. Следом идёт слой групп рядов. Вся группа рядов - такой же ширины, как таблица. Все совместно группы рядов всецело перекрывают таблицу сверху вниз.

5. Предпоследний слой содержит ряды. Ряды также покрывают всю таблицу.

6. Самый верхний слой содержит ячейки. Как показано на рисунке, правда все ряды имеют идентичное число ячеек, не всякая ячейка может иметь специфицированное содержимое. Эти "пустые" ячейки прозрачны, что дозволят нижележащим слоям просвечивать.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1 
        <TD rowspan="2"> 2
        <TD> 3 
        <TD> 4 
      </TR>
      <TR><TD></TD></TR>
    </TABLE> 
  </BODY>
</HTML>

17.5.2  Алгоритмы ширины таблицы: свойство  'table-layout'

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

Свойство 'table-layout' контролирует алгорифм, применяемый для итога ячеек, рядов и столбцов таблицы.
Значения имеют дальнейший толк:

fixed

Алгоритм фиксированного итога таблицы;

auto

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

Эти два алгорифма описаны ниже.

Алгоритм фиксированного вывода

В этом (стремительном) алгорифме горизонтальный итог таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.

Ширина таблицы может быть специфицирована очевидно свойством 'width'. Значение 'auto' (и для 'display: table', и для 'display: inline-table') обозначает применение алгорифма автоматического итога таблицы.

В алгорифме фиксированного итога ширина всякого столбца определяется так:

1. Элемент столбца со значением свойства 'width', хорошим от 'auto', устанавливает ширину этого столбца.
2. Иначе, ячейка в первом ряду со значением свойства 'width', чудесным от 'auto', устанавливает ширину этого столбца. Если ячейка занимает больше одного столбца, ширина разделяется на эти столбцы.
3. Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).

Ширина таблицы будет тогда огромнее значения свойства 'width' для элемента таблицы и суммарной ширины столбцов (плюс заполнение ячеек либо рамки). Если таблица шире, чем столбцы, оставшееся пространство должно быть равномерно распределено между столбцами.

При таком способе ПА может начать итог таблицы сразу, как только будет получен каждый 1-й ряд. Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует качество 'overflow' для определения того, сжимать ли переполняющее содержимое.

Автоматический итог таблицы

В этом алгорифме (требующем традиционно не больше 2-х шагов), ширина таблицы определяется шириной её столбцов (и промежуточных рамок). Данный алгорифм отражает поведение некоторых знаменитых ПА HTML на момент написания данной спецификации. От ПА не требуется исполнять данный алгорифм для определения конструкции таблицы в случае, если 'table-layout' - 'auto'. Они могут применять всякий иной алгорифм.

Этого алгорифма может оказаться неудовлетворительно, от того что он требует, дабы ПА имел доступ ко каждому содержимому таблицы до определения окончательной конструкции, и может затребовать больше одного шага.

Ширина столбцов определяется так:

1. Вычисляется минимальная ширина содержимого (MCW) всей ячейки: форматированное содержимое может занимать всякое число строк, но не может переполнять бокс ячейки. Если специфицированная 'width' (W) ячейки огромнее, чем MCW, W является минимальной шириной ячейки. Значение 'auto' указывает, что MCW это минимальная ширина ячейки.

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

2. Для всего столбца определяется максимальная и минимальная ширина столбца из тех ячеек, которые занимают только данный столбец. Минимум - это та ширина, которая требуется для ячейки с самой крупной минимальной шириной (либо 'width' столбца, в зависимости от того, что огромнее). Максимум - это максимальная ширина, которая требуется для ячейки с самой крупной максимальной шириной  (либо 'width' столбца, в зависимости от того, что огромнее).
3. Для всей ячейки, занимающей больше одного столбца, возрастает минимальная ширина тех столбцов, которые она захватывает, так что совместно они не теснее, чем ячейка. То же самое делается и для максимальной ширины. Если допустимо, расширяются все захваченные ряды на примерно то же значение.

Это задаёт максимальную и минимальную ширину всякого столбца. Ширина столбцов влияет на окончательную ширину таблицы так:

1. Если качество 'width' элементов 'table' либо 'inline-table' имеет специфицированное значение (W), хорошее от 'auto', вычисленное значение свойства будет огромнее W и минимальной ширины, требующейся для всех столбцов плюс заполнение и рамки ячеек (MIN). Если W огромнее, чем MIN, излишняя ширина должна быть распределена между столбцами.
2. Если элементы 'table' либо 'inline-table' имеют 'width: auto', вычисленная ширина таблицы будет огромнее ширины самого большого из содержащих блоков таблицы и MIN. Впрочем, если максимальная ширина, желательная для столбцов плюс заполнение ячеек либо рамки (MAX) поменьше, чем ширина содержащего блока, применяется MAX.

Процентные значения ширины столбца являются относительными к ширине таблицы. Если таблица имеет 'width: auto', проценты дают лимитация ширины столбца, которое ПА должен попытаться вынести. (Видимо, это не неизменно допустимо: если ширина столбца '110%', лимитация не может быть исполнено.)

17.5.3 Алгоритмы высоты таблицы

Высота таблицы задаётся свойством 'height' элемента 'table' либо 'inline-table'. Значение 'auto' устанавливает, что высота является суммой высоты рядов плюс заполнение ячеек либо рамки. Всякие другие значения специфицируют высоту очевидно; таблица, таким образом, может быть выше либо короче, чем высота её рядов. CSS2 не специфицирует итог в тех случаях, когда специфицированная высота таблицы отличается от высоты содержимого, исключительно когда высота содержимого может перекрыть специфицированную высоту; либо как излишнее пространство должно распределиться между рядами для заполнения высоты таблицы; либо, если высота содержимого превосходит специфицированную высоту таблицы, должен ли ПА предоставить механизм прокрутки. 

Высота бокса элемента 'table-row' вычисляется однократно сразу позже приобретения ПАгентом всех ячеек ряда: это максимальная специфицированная рядом  'height' и минимальная высота (MIN), затребованная ячейками. Значение 'height'  -  'auto' для 'table-row' обозначает, что вычисленная высота ряда - MIN. MIN зависит от высоты боксов ячеек и выравнивания бокса ячейки (дюже походит на вычисление высоты строчного бокса). CSS2 не определяет, к чему относятся процентные значения 'height', специфицированные для рядов и групп рядов таблицы.

В CSS2 высота бокса ячейки - это наивысшее из свойств 'height' ячеек таблицы и минимальная высота, желательная содержимым (MIN). Значение 'auto' для 'height' подразумевает вычисленное значение MIN. CSS2 не определяет, к чему относятся процентные значения 'height', когда они определены для ячеек таблицы.

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

Свойство 'vertical-align' всей ячейки таблицы определяет её выравнивание в ряду. Содержимое всей ячейки имеет baseline/базовую линию, top/верх, middle/середину и bottom/низ, как и сам ряд.
В контексте таблиц значения 'vertical-align' имеют дальнейший толк:

baseline

Базовая линия ячейки размещена на той же высоте, что и базовая линия первого из рядов, которые она захватывает (см. ниже определение базовой линии ячейки и ряда).

top

Верх бокса ячейки выровнен с верхом первого из рядов, которые она захватывает.

bottom

Низ бокса ячейки выровнен с низом последнего из рядов, которые она захватывает.

middle

Центр ячейки выровнен с центром рядов, которые она захватывает.

sub, super, text-top, text-bottom

Эти значения не используются к ячейкам; взамен этого ячейка выравнивается по базовой линии.

Базовая линия ячейки это базовая линия первого строчного бокса в ячейке. Если никакого текста нет, базовая линия - это базовая линия какого-нибудь объекта, отображаемого в ячейке либо, если такого объекта нет, - низ бокса ячейки. Наивысшее расстояние между верхом бокса ячейки и базовой линией всех ячеек, имеющих 'vertical-align: baseline', применяется для установки базовой линии ряда. Вот пример:

Боксы ячеек 1 и 2 выровнены по их базовым линиям. Бокс ячейки 2 имеет бóльшую высоту касательно базовой линии и следственно определяет базовую линию ряда. Подметьте, что если нет ни одного бокса ячейки, выровненного по базовой линии, у ряда не будет (не надобна) базовой линии.

Чтобы исключить неоднозначные обстановки, выравнивание ячеек происходит в дальнейшем порядке:

1. Сначала позиционируются ячейки, выровненные по их базовым линиям. Это устанавливает базовую линию ряда. После этого позиционируются ячейки с 'vertical-align: top'.
2. Ряд имеет сейчас верх, допустимо - базовую линию и заблаговременную высоту, которая является расстоянием от верха (таблицы) до низа самой нижней ячейки. (См. ниже данные для заполнения ячеек.)
3. Если какая-нибудь из оставшихся ячеек, выровненных по низу либо по середине, имеет высоту огромную, чем нынешняя высота ряда, то высота ряда будет увеличена до максимума этой ячейки путём опускания низа (таблицы).
4. Наконец, позиционируются оставшиеся ячейки.

Боксы ячеек, которые поменьше, чем высота ряда, получают дополнительное заполнение вверху либо внизу.

17.5.4 Горизонтальное выравнивание в столбце

Горизонтальное выравнивание содержимого ячейки в боксе ячейки специфицируется свойством 'text-align'.

Если значение свойства 'text-align' для больше чем одной ячейки в столбце установлено в<string>, содержимое этих ячеек выравнивается по вертикальной оси. Предисловие строки касается этой оси. Направление письма определяет, расположена строка слева либо справа от оси.

Выравнивание текста таким методом допустимо только тогда, когда текст входит на одну строку. Итог не определён, если содержимое ячейки занимает больше одной строки.

Если значение 'text-align' ячейки таблицы это строка, но строка не возникает в содержимом ячейки, то конец содержимого ячейки соприкасается с вертикальной осью выравнивания.

Заметьте, что строки не обязаны быть теми же самыми для всякой ячейки, правда, как водится, это и так.

CSS не предоставляет метода специфицировать смещение оси вертикального выравнивания касательно края бокса столбца.

   TD { text-align: "." }
   TD:before { content: "$" }

  <TABLE>
  <COL width="40">
  <TR> <TH>Long distance calls
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

Long distance calls
              $1.30      
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Динамические результаты рядов и столбцов

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

17.6  Рамки

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

Это качество выбирает модель рамки таблицы. Значение 'separate' выбирает модель раздельных рамок. Значение 'collapse' выбирает модель сжимающихся рамок. Эти модели описаны ниже.

17.6.1 Модель раздельных рамок

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

В этой модели вся ячейка имеет собственную рамку. Качество 'border-spacing' специфицирует расстояние между рамками смежных ячеек. Это пространство заполняется фоном элемента таблицы. Ряды, группы рядов, столбцы и группы столбцов не могут иметь рамок (т.е. ПА обязаны игнорировать свойства рамки в таких элементах).

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* Верхняя левая ячейка */

Обрамление пустых ячеек: качество 'empty-cells'

В модели раздельных рамок данное качество управляет представлением рамок вокруг ячеек, не имеющих видимого содержимого. Пустые ячейки и ячейки со свойством 'visibility', установленным в 'hidden', рассматриваются как не имеющие видимого содержимого. Видимое содержимое включает "&nbsp;" и другие пробелы, за исключением ASCII-символов CR ("\0D"), LF ("\0A"), tab ("\09"), и space ("\20").

Если это качество имеет значение 'show', рамки прорисовываются вокруг пустых ячеек (как вокруг типичных ячеек).

Значение 'hide' указывает, что рамки вокруг пустых ячеек не будут прорисованы. Следственно, если все ячейки в ряду имеют значение 'hide' и не имеют видимого содержимого, каждый ряд ведёт себя так, как если бы он имел 'display: none'.

TABLE { empty-cells: show }

17.6.2 Модель сжимающихся рамок

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

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

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

row-width = (0.5 * border-width₀) + padding-left₁ + width₁ + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

Здесь n это число ячеек в ряду, а border-width_i относится к рамке между ячейками i и i + 1. Учтите только, что лишь половина из 2-х внешних рамок учитывается в ширине таблицы; иная половина этих 2-х рамок находится в области полей.

Обратите внимание, что в этой модели ширина таблицы включает половину ширины рамки таблицы. Также в этой модели таблица не имеет заполнения (но имеет поля).

Разрешение раздоров рамок

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

Следующие правила определяют, какой жанр рамки "побеждает" в случае раздора:

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

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

TR:first-child { border-top: none }
TR { border-top: solid }

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3  Жанры рамок

Некоторые значения 'border-style' имеют в таблице другой толк в сопоставлении с другими элементами. В дальнейшем списке они помечены звёздочкой.

none

Нет рамки.

*hidden

То же, что 'none', но в модели сжимающихся рамок также унимает всякие другие рамки (см. раздел Конфликты рамок).

dotted

Рамка из точек .

dashed

Пунктир.

solid

Сплошная линия.

double

Двойная сплошная линия. Сумма 2-х линий и пространства между ними равна значению 'border-width'.

groove

Вырезана в канве.

ridge

Противоположно 'groove': выступает над канвой.

*inset

В модели раздельных рамок рамка выглядит как целый бокс, как словно он внедрён в канву. В модели сжимающихся рамок - то же, что 'groove'.

*outset

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

17.7  Звуковое представление таблиц

Когда таблица читается синтезатором речи, отношения между ячейками данных и заголовочными ячейками обязаны быть выражены напротив, чем отношения вертикального и горизонтального выравнивания. Некоторые синтезаторы речи могут разрешать пользователям "перемещаться" в 2-мерном пространстве, давая таким образом возможность отображения пространственных соотношений. Если это нереально, таблица жанров обязана специфицировать, с какого места произносятся заголовки.

17.7.1  Говорящие заголовки: качество 'speak-header'

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

once

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

always

Заголовок произносится перед всякой подходящей ячейкой.

Каждый язык документов может иметь разные механизмы спецификации заголовков. Скажем, в HTML 4.0 ([HTML40]) дозволено специфицировать заголовочную информацию тремя разными признаками ("headers", "scope" и "axis"), и спецификация предоставляет алгорифм для определения заголовочной информации, когда эти признаки не специфицированы.

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...