17.5. Визуальная разметка содержания таблицы.

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

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

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

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

Ниже приведено два примера. Первый – для HTML-документа:

<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>

Вторая таблица форматируется, как на рисунке справа. Но, визуализация HTML-таблицы точно не определена в HTML, а CSS не пытается определить ее. Устройства вывода свободны в ее визуализации, например, на рисунке слева.

[D]

Слева - возможная визуализация неправильной таблицы HTML 4.0; справа - возможное форматирование похожей таблице, описанной не на языке HTML.

17.5.1. Табличные слои и прозрачность.

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

[D]

Схема табличных слоев.

1. Самый нижний слой – это плоскость, представляющая сам табличный блок. Подобно всем блокам, он может быть прозрачным.
2. Следующий слой содержит группу колонок. Группы колонок такой же высоты, как и таблица, но им не нужно покрывать всю таблицу горизонтально.
3. На вершине группы колонок находятся области, представляющие блоки колонок. Подобно группам колонок, колонки такой же высоты, как и таблица, но им не нужно покрывать всю таблицу горизонтально.
4. Следующий – это слой, содержащий группу рядов. Каждая группа рядов имеет такую же ширину, что и таблица. Вместе группы рядов полностью покрывают таблицу сверху до дна.
5. Следующий слой содержит ряды до самого последнего слоя. Ряды тоже покрывают всю таблицу.
6. Самый верхний слой содержит сами ячейки. Как показывает рисунок, хотя все ряды содержат одинаковое количество ячеек, но не каждая ячейка имеет содержание. Эти "пустые" ячейки прозрачные, и позволяют нижним слоям просвечиваться через них.

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

<!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>

должны форматироваться следующим образом:

[D]

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

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

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

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

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

fixed

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

auto

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

Оба алгоритма описаны ниже.

Фиксированная разметка таблицы.

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

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

В алгоритме фиксированной разметки ширина каждой колонки определяется следующим образом:

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

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

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

Автоматическая разметка таблицы.

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

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

Ширина колонок определяется следующим образом:

1. Рассчитывают минимальную ширину содержания (МШС) для каждой ячейки: отформатированное содержание может простираться на любое количество строк, но не может переходить за блок ячейки. Если определенная ширина 'width' (Ш) ячейки больше, чем МШС, то Ш является минимальной шириной ячейки. Значение 'auto' означает, что МШС является минимальной шириной ячейки. Кроме этого, рассчитывают "максимальную" ширину ячейки каждой ячейки: форматируется содержание без разрыва строк, в отличие от мест, где строки обрываются.
2. Для каждой колонки определяют максимальную и минимальную ширину для ячеек, которые имеются только в этой колонке. Минимальная – это та, которая требуется ячейкой с самой большой минимальной шириной ячейки (или ширина колонки 'width', которая больше). Максимальная – это та, которая требуется ячейкой с самой большой максимальной шириной ячейки (или ширина колонки 'width', которая больше).
3. Для каждой ячейки, которая простирается более чем на одну колонку, увеличивают минимальную ширину, на размер, который она занимает в колонках. Делают то же самое, что и для максимальных ширин. Если возможно, расширяются все занятые колонки примерно на одинаковое значение.

Все это дает максимальную или минимальную ширину для каждой колонки. Ширина колонки влияет на окончательную ширину таблицы:

1. Если свойство 'width' элемента 'table' или 'inline-table' имеет определенное значение (Ш) и отличается от 'auto', то рассчитанное значение свойства больше Ш и минимальной ширины, требуемой всеми колонками плюс интервалы между ячейками или границы (МИН). Если Ш больше, чем МИН, то дополнительная ширина должна распределяться по колонкам.
2. Если элемент 'table' или 'inline-table' имеет 'width: auto', то рассчитанная ширина таблицы больше ширины объемлющего блока таблицы и МИН. Но, если максимальная ширина, требующаяся колонками, плюс интервал между ячейками или границы (МАХ) меньше, чем ширина объемлющего блока, то используют МАХ.

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

Обратите внимание. В этом алгоритме ряды (и группы рядов) и колонки (и группы колонок) все ограничивают и ограничиваются размерами ячеек, которые они содержат. Установка ширины колонки может косвенно влиять на высоту ряда и наоборот.

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

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

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

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

Свойство 'vertical-align' каждой ячейки таблицы определяет ее выравнивание внутри ряда. Каждое содержание ячейки имеет базовую линию: верх, середину и дно, определяемые рядом. В контексте таблиц значения для 'vertical-align' следующие:

baseline

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

top

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

bottom

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

middle

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

sub, super, text-top, text-bottom

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

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

[D]

Диаграмма показывает влияние различных значений 'vertical-align' на ячейки таблицы.

Блоки ячеек 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: "$" }

будет приводить колонку с цифрами долларов в следующей HTML-таблице:

<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>

к выравниванию по десятичной точке. Для развлечения мы использовали псевдо-элемент :before для вставки знака доллара перед каждой цифрой. Таблица может визуализироваться следующим образом:

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

17.5.5. Динамические эффекты для рядов и колонок.

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