- •Введение в таблицы css
- •17.2 Модель таблиц css
- •17.2.1 Анонимные объекты таблицы
- •17.3 Селекторы столбцов
- •17.4 Таблицы в модели визуального форматирования
- •17.4.1 Положение и выравнивание заголовка
- •17.5 Визуальное расположение содержимого таблицы
- •17.5.1 Слои и прозрачность таблицы
- •17.5.2 Алгоритмы определения ширины таблицы: свойство 'table-layout'
- •Фиксированное расположение таблицы
- •Автоматическое расположение таблицы
- •17.5.3 Алгоритмы определения высоты таблицы
- •17.5.4 Горизонтальное выравнивание в столбце
- •17.5.5 Динамические эффекты строк и столбцов
- •17.6 Границы
- •17.6.1 Модель отдельных границ
- •Границы вокруг пустых ячеек: свойство 'empty-cells'
- •17.6.2 Модель с пересекающимися границами
- •Разрешение конфликтов между границами
- •17.6.3 Стили границ
- •17.7 Автоматическое представление таблиц
- •17.7.1 Произносимые заголовки: свойство 'speak-header'
17.5.1 Слои и прозрачность таблицы
Для поиска фона каждой ячейки таблицы можно считать, что различные элементы таблицы состоят из шести слоев. Фон элемента, установленный в одном из слоев, будет видим, только если у расположенных выше слоев фон прозрачный.
[D]
Схема слоев таблицы.
Самый нижний слой представляет собой одну плоскость, представляющую сам блок таблицы. Как и все блоки, он может быть прозрачным.
Следующий слой содержит группы столбцов. Группы столбцов по высоте равны самой таблице, но не обязательно занимают всю ее ширину.
В верхней части групп столбцов находятся области, представляющие блоки столбцов. Как и группы столбцов, столбцы по высоте равны самой таблице, но не всегда занимают всю ширину таблицы.
Далее следует слой, содержащий группы строк. Каждая группа строк имеет ширину, равную ширине таблицы. Вместе взятые, группы полностью занимают таблицу сверху вниз.
Предпоследний слой содержит строки. Строки также занимают всю таблицу.
Самый верхний слой содержит собственно ячейки. Как показано на рисунке, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. "Пустые" ячейки считаются прозрачными, поэтому через них будут видны нижние слои.
В следующем примере первая строка содержит четыре ячейки, вторая - ни одной, поэтому через нее виден фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и вторую строку. Следующий код HTML и правила стиля
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
TABLE { фон: #ff0; border-collapse: collapse }
TD { фон: 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
Используется любой алгоритм автоматического размещения таблицы
Ниже представлены описания обоих алгоритмов.