![]() |
||
|
aranea.ru || Спецификация CSS2 | 17.5. Визуальная разметка содержания таблицы.
17.5. Визуальная разметка содержания таблицы.17.5.1. Табличные слои и прозрачность.17.5.2. Алгоритмы для ширины таблицы: свойство 'table-layout'. Фиксированная разметка таблицы. Автоматическая разметка таблицы. 17.5.3. Алгоритмы для высоты таблицы. 17.5.4. Горизонтальное выравнивание в колонке. 17.5.5. Динамические эффекты для рядов и колонок. Подобно другим элементам языка документа, внутренние табличные элементы генерируют прямоугольные блоки с содержанием, отступами и границами. Но, они не имеют полей. Визуальная разметка этих блоков управляется прямоугольником (неравномерной решеткой рядов и колонок). Каждый блок занимает все ячейки решетки, определенные в соответствии со следующими правилами. Эти правила не применяются для HTML 4.0 или более ранних версий; т.к. HTML использует свои собственные ограничения для рядов и колонок.
Обратите внимание. Ячейки таблицы могут позиционироваться относительно и абсолютно. Не рекомендуется позиционировать и смещать блок из его расположения, так как это влияет на выравнивание таблицы. Ниже приведено два примера. Первый – для 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 не пытается определить ее. Устройства вывода свободны в ее визуализации, например, на рисунке слева. ![]() Слева - возможная визуализация неправильной таблицы HTML 4.0; справа - возможное форматирование похожей таблице, описанной не на языке HTML. 17.5.1. Табличные слои и прозрачность.Для нахождения фона каждой ячейки таблицы необходимо знать, что различные табличные элементы могут состоять из шести накладывающихся слоев. Слой, установленный для элемента, будет видимым, только если слои над ним прозрачные. ![]() Схема табличных слоев.
В следующем примере, первый ряд содержит четыре ячейки, но второй ряд не содержит ячеек, и таким образом фон таблицы просвечивает через него, исключая случай, где ячейка из первого ряда продолжается в этом ряду. Следующие 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> должны форматироваться следующим образом: ![]() Таблица с тремя пустыми ячейками в нижнем ряду. 17.5.2. Алгоритмы для ширины таблицы: свойство 'table-layout'.CSS не определяют "оптимальной" разметки для таблиц, поскольку во многих случаях оптимальность – это дело вкуса. CSS не устанавливают ограничения, которые устройства вывода должны учитывать, размечая таблицы. Устройства вывода могут использовать любые алгоритмы, которые они хотят выполнять, и они свободны в выборе быстрой визуализации над точностью, исключая случай, когда выбран "алгоритм фиксированной разметки". 'table-layout' Тип значения: auto | fixed | inherit Начальная величина: auto Применяется: к элементам 'table' и 'inline-table' Наследование: нет Процентная база: нет Медиа: визуальные Свойство 'table-layout' контролирует алгоритм, используемый для разметки табличных ячеек, рядов и колонок. Значения свойства следующие:
Оба алгоритма описаны ниже. Фиксированная разметка таблицы.С этим быстрым алгоритмом, горизонтальная разметка таблицы не зависит от содержания ячеек; она зависит только от ширины таблицы, ширины колонок и границ или интервала между ячейками. Ширина таблицы может определяться свойством 'width' точно. Значение 'auto' (для обоих свойств 'display:table' и 'display:inline-table') означает использование алгоритма автоматической разметки таблицы. В алгоритме фиксированной разметки ширина каждой колонки определяется следующим образом:
Ширина таблицы становится больше значения свойства 'width' для табличного элемента и суммы ширин колонок (плюс интервал между ячейками или границы). Если таблица шире, чем колонки, то это дополнительное пространство распределяется по колонкам. Таким же образом, устройство вывода может начать разметку таблицы сразу, как только будет выведен весь первый ряд. Ячейки в последовательных рядах не влияют на ширину колонок. Любая ячейка, которая имеет содержание, выходящее за пределы, использует свойство 'overflow' для определения: вырезается ли такое содержание. Автоматическая разметка таблицы.В этом алгоритме (который обычно требует не более двух прогонов) ширина таблицы дана по ширине ее колонок (и промежуточных границ). Этот алгоритм отображает поведение нескольких популярных устройств вывода HTML при написании спецификаций. Для выполнения этого алгоритма не требуется устройство вывода при определении табличной разметки в случае, при котором 'table-layout' установлено как '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' следующие:
Базовая линия – это базовая линия первого строчного блока в ячейке. Если нет текста, то базовая линия определяется базовой линией вводимого в ячейку объекта, а если его нет, то дном блока ячеек. Максимальное расстояние между верхом блока ячейки и базовой линией всех ячеек, которые имеют 'vertical-align: baseline', используется для установки базовой линии ряда. Ниже приведен пример: ![]() Диаграмма показывает влияние различных значений 'vertical-align' на ячейки таблицы. Блоки ячеек 1 и 2 выравниваются по своим базовым линиям. Блок ячеек 2 имеет самую большую высоту (выше базовой линии), поэтому он определяет базовую линию ряда. Обратите внимание на то, что если нет блока ячеек, выровненных по его базовой линии, то ряд не будет иметь (или она не нужна) базовой линии. Для избегания двусмысленных ситуаций, выравнивание ячеек выполняется в следующем порядке:
Блоки ячеек, которые меньше, чем высота ряда, получают дополнительные отступы вверху и внизу. 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' для элементов ряда, группы рядов, колонки и группы колонок. Это значение приводит к полному исчезновению ряда или колонки с экрана, а пространство, занимаемое этим рядом или колонкой, становится доступным для другого содержания. Сжатие ряда или колонки, однако, не влияет на раскладку таблицы. Это позволяет осуществлять динамический эффект сокрытия табличных рядов или колонок без вынужденной переразметки таблицы для учета потенциального изменения в ограничениях для колонок. |