Схема таблицы, над которой находится заголовок; нижнее поле заголовка перекрывается с верхним полем таблицы.
Содержание
Данная глава описывает модель обработки таблиц в CSS. Частью этой модели обработки является расположение. Для расположения в данной главе предусмотрено два алгоритма; первый – это алгоритм фиксированного положения таблицы, который описан четко, но второй – алгоритм автоматического положения таблицы, полностью не определен в данной спецификации.
Для алгоритма автоматического положения таблицы, некоторые широко распространенные реализации достигли относительно близкой функциональной совместимости.
Положение таблицы может использоваться чтобы представить табличные отношения между данными. Авторы определяют эти отношения в языке документа и указывают способ их представления в CSS 2.1.
В визуальной среде, таблицы CSS могут также использоваться для достижения определенного размещения. В этом случае, авторам не следует использовать в языке документа элементы, связанные с таблицей, но следует применять CSS к соответствующим структурным элементам для достижения необходимого расположения.
Авторы могут определять визуальное форматирование таблиц в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк и группы столбцов. Вокруг строк, столбцов, групп строк, групп колонок и ячеек могут быть видимые границы (в спецификации CSS 2.1 представлено две модели границ). Внутри ячейки данные могут выравниваться по вертикали или по горизонтали, и кроме того, данные могут выравниваться во всех ячейках строки или столбца.
Далее представлена таблица из трех строк и трех столбцов, описанная на языке HTML 4:
<TABLE> <CAPTION>Обычная таблица размером 3x3</CAPTION> <TR id="row1"> <TH>Заголовок 1 <TD>Ячейка 1 <TD>Ячейка 2 <TR id="row2"> <TH>Заголовок 2 <TD>Ячейка 3 <TD>Ячейка 4 <TR id="row3"> <TH>Заголовок 3 <TD>Ячейка 5 <TD>Ячейка 6 </TABLE>
В этом коде создается одна таблица (элемент TABLE), три строки (элементы TR), три ячейки заголовков (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере указаны неявно: в таблице столько столбцов, сколько понадобится для ячеек заголовков и данных.
С помощью следующего правила CSS текст в ячейках заголовка выравнивается горизонтально по центру, а текст в ячейках заголовка отображаются жирным шрифтом:
th { text-align: center; font-weight: bold }
Следующие правила позволяют выровнять текст ячеек заголовков по базовой линии, а текст каждой ячейки данных – вертикально по центру:
th { vertical-align: baseline }
td { vertical-align: middle }
Следующие правила определяют наличие сплошной линии границы синего цвета толщиной 3 пиксела вокруг верхней строки и сплошной границы черного цвета толщиной в 1 пиксел вокруг каждой из последующих строк:
table { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 1px solid black }
Следует помнить, однако, что границы вокруг строк могут перекрываться в местах пересечения строк. Какого цвета (черная или синяя) и толщины (1px или 3px) будет граница между строкой row1 и row2? Это обсуждается в разделе об устранении конфликтов между границами.
Согласно следующему правилу заголовок таблицы помещается над самой таблицей:
caption { caption-side: top }
В предыдущих примерах показано, как CSS влияет на элементы HTML 4; в HTML 4 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) определена строго. В других языках документов (например, в приложениях XML) элементы таблицы могут быть не определены заранее. Таким образом, спецификация CSS 2.1 позволяет авторам "сопоставлять" элементы языка документа элементам таблицы с помощью свойства 'display'. Например, за счет следующего правила элемент FOO действует как элемент HTML TABLE, а элемент BAR работает как элемент CAPTION:
FOO { display : table }
BAR { display : table-caption }
В следующих разделах обсуждаются различные элементы таблицы. В данной спецификации термин элемент таблицы относится к любому элементу, вовлеченному в создание таблицы.. "Встроенный" элемент таблицы – это элемент, который создает строку, группу строк, столбец, группу столбцов или ячейку.
Модель таблиц CSS основана на модели таблиц HTML4, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается "ориентированной на строки", так как в языке документа явным образом определяются строки, а не столбцы. Столбцы определяются только после указания всех строк – первая ячейка каждой строки относится к первому столбцу, вторая – ко второму и так далее). Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться граница).
Таким образом, модель таблицы состоит из таблиц, заголовков, строк, групп срок, столбцов, групп столбцов и ячеек.
Для модели CSS не обязательно, чтобы язык документа включал элементы, соответствующие каждому из этих компонентов. Для языков документов (таких как приложения XML), не имеющих заранее определенных элементов таблиц, авторы могут сопоставлять элементы языка документа элементам таблицы; такая процедура осуществляется с помощью свойства 'display'. Следующие значения 'display' связывают правила форматирования таблицы с произвольным элементом:
Перемещаемые элементы с этим значением свойства 'display' обрабатываются как они заданы с типом отображения в процессе размещения. Например, изображение, имеющее свойство 'display: table-cell', заполнит доступное пространство ячейки, а его размеры могут повлиять на алгоритм определения размеров таблицы, как и в случае с обычной ячейкой.
Элементы, у которых для свойства 'display' установлено значение 'table-column' или 'table-column-group', не представляются (как если было указано значение 'display: none'), но они могут быть полезны, поскольку могут иметь атрибуты для создания определенного стиля для представляемых столбцов.
Использовании этих значений в HTML 4 показано в стандартной таблице стилей для HTML 4, приведенной в приложении:
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, так как таблицы HTML могут быть предоставлены с использованием других алгоритмов, предназначенных для обратно совместимого представления. Однако, это не препятствует использованию свойства 'display: table' для других элементов HTML, не являющихся элементами таблицы.
Языки документов, отличные от HTML, могут не включать все элементы из модели таблиц CSS 2.1. В этом случае для работы модели таблиц должно считаться, что "отсутствующие" элементы существуют. Все элементы таблицы будут автоматически генерировать вокруг себя необходимые безымянные объекты таблицы, состоящие по меньшей мере из трех вложенных объектов, соответствующих элементам 'table'/'inline-table', 'table-row' и 'table-cell'. Отсутствующие элементы генерируют безымянные объекты (например, безымянные блоки в визуальное схеме таблицы) согласно следующим правилам:
В этом примере для XML подразумевается, что элемент 'table' содержит элемент HBOX:
<HBOX> <VBOX>George</VBOX> <VBOX>4287</VBOX> <VBOX>1998</VBOX> </HBOX>
так как с ним связана следующая таблица стилей:
HBOX { display: table-row }
VBOX { display: table-cell }
В данном примере предполагается, что три элемента 'table-cell' в элементах ROW содержат текст. Обратите внимание, что далее текст помещается в безымянные строковые блоки, как описано в модели визуального форматирования:
<STACK> <ROW>Это <D>верхняя</D> строка.</ROW> <ROW>Это <D>средняя</D> строка.</ROW> <ROW>Это <D>нижняя</D> строка.</ROW> </STACK>
Таблица стилей:
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
Ячейки таблицы могут принадлежать двум контекстам: строкам и столбцам. Однако в исходном документе ячейки являются потомками строк, а не столбцов. Тем ни менее, на некоторые свойства ячеек можно повлиять установкой свойств столбцов.
Следующие свойства применяются к элементам столбцов и групп столбцов:
Далее приведено несколько примеров правил стилей, которые устанавливают свойства столбцов. Первые два правила вместе реализуют атрибут "rules" HTML 4, имеющий значение "cols". Третье правил выделяет столбец "totals" синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя алгоритм фиксированного расположения.
col { border-style: none solid }
table { border-style: hidden }
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
В терминах модели визуального форматирования таблица может работать как элемент уровня блока (для 'display: table') или как элемент уровня строки (для 'display: inline-table').
В обоих случаях блок таблицы генерирует безымянный блок, который содержит сам блок таблицы и любые блоки заголовков (в порядке их следования в документе). Блоки заголовков являются блоками структурного уровня, которые сохраняют свои собственные области содержимого, отступов, полей и границ, и представляются как обычные блоки внутри безымянных блоков. Помещаются ли блоки заголовков после или до блока таблицы определяется свойством 'caption-side', как описано ниже.
Безымянный блок является блоком 'block' если таблица уровня блока, и блоком 'inline-block' – если таблица уровня строки, за исключением того, что этот блок никогда не сопоставляется как блок для взаимодействия 'run-in', и что блок таблицы (не являющийся безымянным блоком) используется при вертикальном выравнивании по базовой линии для 'inline-table'. Ширина безымянного блока – это ширина между краями границ блока таблицы внутри него, как описано в разделе 17.5.2. Процентное соотношение значения свойства 'width' в таблице определяется относительно контейнера безымянного блока, а не самого безымянного блока.
Вычисляемые значения свойств 'position', 'float', 'margin-*', 'top', 'right', 'bottom' и 'left' в блоке таблицы используются в безымянном блоке вместо блока таблицы. Блок таблицы использует начальные значения для этих свойств.
Схема таблицы, над которой находится заголовок; нижнее поле заголовка перекрывается с верхним полем таблицы.
| Значение: | top | bottom | inherit |
| Начальное значение: | top |
| Область применения: | элементы 'table-caption' |
| Наследование: | да |
| Процентное задание: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Это свойство определяет положение поля заголовка относительно поля таблицы. Значения имеют следующий смысл:
Примечание: В CSS2 описано различное поведение ширины и горизонтального выравнивания. Такое поведение будет представлено в CSS3 с использованием значений 'top-outside' и 'bottom-outside' для этого свойства.
Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используется свойство 'text-align'.
В этом примере свойство 'caption-side' определяет расположение заголовков под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.
caption { caption-side: bottom;
width: auto;
text-align: left }
Внутренние элементы таблицы генерируют прямоугольные блоки с содержимым и границами. Ячейки так же имеют отступы. Внутренние элементы таблицы не имеют полей.
Расположение этих блоков при визуальном представлении регулируется прямоугольной неравномерной сеткой строк и столбцов. Каждый блок занимает определенное количество ячеек сетки, определяемое согласно следующим правилам. Эти правила не применяются в HTML 4 и в более ранних версиях HTML; язык HTML устанавливает собственные ограничения для строк и столбцов.
Края строк, столбцов, групп строк и групп столбцов в модели с пересекающимися границами совпадают с гипотетическими линиями сетки по которым центрируются границы ячеек. (И таким образом, в этой модели, строки вместе точно охватывают таблицу, не оставляя промежутков; так же и для столбцов.) В модели с отдельными границами, края совпадают с краями границ ячеек. (И таким образом, в этой модели, могут быть промежутки между строками, столбцами, группами строк или группами столбцов, в соответствии со значением свойства 'border-spacing'.)
Примечание. Согласно правилам, изложенным в разделе 9.7, позиционирование и перемещение ячеек таблицы может привести к тому, что они больше не будут ячейками таблицы. При использовании перемещения, правила, применяемые к безымянным объектам таблицы, могут также привести к созданию безымянного объекта ячейки.
Здесь приведено два примера. Первый относится к документу HTML, второй – к документу XHTML:
<TABLE> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4 <TR><TD colspan="2">5 </TABLE>
<table> <tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr> <tr><td colspan="2">5 </td></tr> </table>
Форматирование второй таблицы показано на рисунке справа. Однако представление таблицы HTML не определено явным образом средствами HTML, и CSS также не определяет его. Агенты пользователей могут представлять таблицы на свое усмотрение, например, так, как показано на рисунке слева.
Слева – один из вариантов представления некорректной таблицы HTML 4; справа – единственный возможный вариант форматирования аналогичной таблицы XHTML.
Для поиска фона каждой ячейки таблицы можно считать, что различные элементы таблицы состоят из шести слоев. Фон элемента, установленный в одном из слоев, будет видим, только если у расположенных выше слоев фон прозрачный.
Схема слоев таблицы.
"Недостающая ячейка" – это ячейка в строке/столбце сетки, которая не занята элементом или псевдоэлементом. Недостающие ячейки представляются так, как если бы они были безымянными блоками ячеек таблицы, занимающие свое положение в сетке.
В следующем примере первая строка содержит четыре непустые ячейки, но вторая строка содержит только одну непустую ячейку, поэтому сквозь нее просвечивает фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и эту строку. Следующий код HTML и правила стиля
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Пример таблицы</TITLE>
<STYLE type="text/css">
TABLE { background: #ff0; border: solid black;
empty-cells: hide }
TR.top { background: red }
TD { border: solid black }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR CLASS="top">
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
<TR>
<TD> 5
<TD>
</TABLE>
</BODY>
</HTML>
может форматироваться так:
Таблица с пустыми ячейками в нижней строке.
Примите во внимание, что если у таблицы есть свойство 'border-collapse: separate', то фон области, заданной свойством 'border-spacing' является всегда фоном элемента таблицы. См. модель с отдельными границами.
В CSS не определяется "оптимальная" компоновка таблиц, так как в большинстве случаев оптимальное является делом вкуса. В CSS не определяются ограничения, которые агенты пользователей должны учитывать при построении таблицы. Агенты пользователей могут использовать любой алгоритм и выбирать скорость представления, кроме случаев, когда выбран "алгоритм фиксированного положения".
Примите во внимание, что этот раздел заменяет правила, применяемые для вычисления ширины, которые были приведены в разделе 10.3. В частности, если поля таблицы установлены равными '0', а ширина равна 'auto', то размер таблицы не будет автоматически подгоняться для того, чтобы вместить ее контейнер. Однако, как только расчетное значение 'width' найдено (используя алгоритмы, приведенные ниже или, когда соответствует, некоторый другой алгоритм, определенный агентом пользователя) тогда применяются остальные части раздела 10.3. Поэтому таблица может быть отцентрирована с использованием, например, левого и правого полей со свойством 'auto'.
Будущие обновления CSS могут предоставить способы заставить таблицы автоматически соответствовать их контейнерам.
| Значение: | auto | fixed | inherit |
| Начальное значение: | auto |
| Область применения: | элементы 'table' и 'inline-table' |
| Наследование: | нет |
| Процентное задание: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Свойство 'table-layout' управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы. Значения имеют следующий смысл:
Ниже представлен описания обоих алгоритмов.
При использовании данного (быстрого) алгоритма горизонтальное положение таблицы не зависит от содержимого ячеек; оно зависит только от ширины таблицы, ширины столбцов и расстояния между границами или ячейками.
Ширина таблицы может указываться явным образом с помощью свойства 'width'. Значение 'auto' (и для свойства 'display: table' и для 'display: inline-table') предполагает использование алгоритма автоматического размещения таблицы. Однако, если таблица является таблицей уровня блока ('display: table') в нормальном потоке, то агент пользователя может (но не должен) использовать алгоритм, описанный в 10.3.3, для вычисления ширины и применить фиксированное расположение таблицы даже если ширина определена как 'auto'.
Если агент пользователя поддерживает фиксированное расположение таблицы при значении свойства 'width' равном 'auto', то для следующего примера будет создана таблица, которая на 4em будет уже, чем ее контейнер:
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
При использовании алгоритма фиксированного расположения таблицы ширина каждого столбца определяется следующим образом:
Таким образом ширина таблицы становится равной наибольшему из значений свойства 'width' для элемента таблицы и суммы ширины столбцов (плюс расстояние между ячейками и границами). Если ширина таблицы превышает ширину столбцов, свободное пространство должно быть распределено между столбцами.
Если в следующей строке количество столбцов больше количества, определенного элементами столбцов таблицы, и количества, определенного первой строкой, то дополнительные столбцы не представляются. При использовании объявления 'table-layout: fixed', авторам не следует пропускать столбцы в первой строке.
При таком алгоритме агент пользователя может начать компоновку таблицы после того, как полностью получена первая строка. Ячейки в последующих строках не влияют на ширину столбцов. Любая ячейка, чье содержимое переполняется, использует свойство 'overflow' для определения того, как сократить переполняемое содержимое.
В данном алгоритме (который обычно требует не более двух проходов) ширина таблицы задается шириной ее столбцов (и расстоянием между границами). Этот алгоритм отражает поведение некоторых популярных на момент написания данной спецификации агентов пользователей HTML. От агентов пользователей не требуется реализации данного алгоритма для определения расположения таблицы в случае если значение свойства 'table-layout' равно 'auto'; они могут использовать любой другой алгоритм, даже если он в результате будет иметь другое поведение.
Входные данные для автоматического расположения таблицы должны включать только ширину контейнера и его содержимое, и любые свойства CSS, установленные для таблицы и любого из ее потомков.
Примечание. Более детально это может быть определено в CSS3.
Дальнейшая часть данного раздела не является нормативной.
Данный алгоритм может быть неэффективным, поскольку агент пользователя должен иметь доступ ко всему содержимому таблицы, прежде чем сможет определить конечное положение таблицы, и поскольку может потребоваться несколько проходов.
Ширина столбцов определяется следующим образом:
Вычисляется минимальная ширина содержимого (МШС) каждой ячейки: форматированное содержимое может занимать любое число строк, но не может выходить за пределы блока ячейки. Если указанная в свойстве 'width' ширина (Ш) ячейки превышает МШС, Ш является минимальной шириной ячейки. Значение 'auto' означает, что минимальной шириной ячейки является МШС.
Также подсчитывается "максимальная" ширина каждой ячейки: форматирование содержимого без разрыва строк за исключением разрывов, указанных явным образом.
Для каждого столбца определяется максимальная и минимальная ширина ячеек, занимающих только этот столбец. Минимальная ширина — это ширина, необходимая для ячейки с самым большим значением минимальной ширины (или значением свойства 'width' столбца, в зависимости от того, какое значение больше). Максимальная ширина — это ширина, необходимая для ячейки с самым большим значением максимальной ширины (или значением свойства 'width' столбца, в зависимости от того, какое значение больше).
Для каждой ячейки, которая занимает несколько столбцов, необходимо увеличить минимальную ширину занимаемых ею столбцов таким образом, чтобы их общая ширина равнялась ширине ячейки. То же самое делается и для максимальной ширины. Если возможно, то все занимаемые ячейкой столбцы расширяются на приблизительно одинаковую величину.
Для каждого элемента группы столбцов со значением свойства 'width' отличным от 'auto', увеличивается минимальная ширина занимаемых ею столбцов таким образом, чтобы их общая ширина равнялась значению свойства 'width' группы столбцов.
Результатом будет максимальная и минимальная ширина каждого столбца. Ширина столбцов влияет на ширину конечной таблицы следующим образом:
Процентное значение ширины столбца определяется относительно ширины таблицы. Если для таблицы установлено значение 'width: auto', процентное значение показывает ограничение на ширину столбца, которое агенту пользователя следует постараться соблюдать при создании таблицы. (Очевидно, это не всегда возможно: если ширина столбца равна '110%', ограничение не будет соблюдено.)
Примечание. В этом алгоритме строки (и группы строк) и столбцы (и группы столбцов) как ограничивают, так и сами ограничены размерами ячеек, из которых они состоят. Установка ширины столбца может косвенно влиять на высоту строки и наоборот.
Высота таблицы задается свойством 'height' для элемента 'table' или 'inline-table'. Значение 'auto' обозначает, что высота равна сумме высот строк плюс любые расстояния между ячейками или границы. Любые другие значения обрабатываются как минимальная высота. CSS 2.1 не определяет то как распределяется оставшееся пространство когда свойство 'height' заставляет таблицу быть более высокой, чем она была бы в противном случае. Примечание. Возможно, в будущих обновлениях CSS это будет определено.
Высота блока элемента 'table-row' подсчитывается после того, как агенту пользователя будут доступны все ячейки строки: это будет наибольшее из значений высоты строки, определенной свойством 'height', и минимальной высоты (МИН), необходимой для ячеек. Значение свойства 'height' равное 'auto' для элемента 'table-row' означает, что высота строки, используемая для размещения, равна МИН. МИН зависит от высоты блока ячейки и выравнивания в блоке ячейки (аналогично вычислению высоты линейного блока). Процентно заданная высота ячеек таблицы, строк таблицы и групп строк таблицы вычисляется как 'auto'.
В CSS 2.1 высота блока ячейки является наибольшим из значений свойства 'height' ячейки таблицы и минимальной высотой, необходимой для содержимого (МИН). Значение 'auto' для свойства 'height' означает, что для расположения будет использоваться значение МИН. В CSS 2.1 не определяется, относительно чего подсчитываются процентные значения свойства 'height', когда оно определено для ячеек таблицы.
В CSS 2.1 не определяется, как влияют на подсчет высоты строки ячейки, занимающие несколько строк, за исключением того, что сумма высот строк, составляющих ячейку, должна быть достаточно большой, чтобы вместить такую ячейку.
Свойство 'vertical-align' каждой ячейки таблицы определяет ее выравнивание в строке. Содержимое каждой ячейки имеет базовую линию, верх, средину и низ, так же как и сама строка. В контексте таблиц значения свойства 'vertical-align' имеют следующий смысл:
Базовая линия ячейки — это базовая линия первого in-flow линейного блока в ячейке, или первого in-flow элемента table-row в ячейке, в зависимости от того, что из них следует первым. Если таких линейных блоков или элементов table-row нет, то базовая линия – это низ края содержимого блока ячейки. Для поиска базовой линии, in-flow блоки с механизмом прокручивания (см. свойство 'overflow') должны обрабатываться так, как будто они прокручены в их оригинальное положение. Примите во внимание, что базовая линия ячейки может располагаться ниже ее нижней границы, см. пример, приведенный ниже.
Максимальное расстояние между верхней частью блока ячейки и базовой линией всех ячеек, для которых установлено выравнивание 'vertical-align: baseline', используется для установки базовой линии строки. Здесь приведен пример:
На рисунке показано влияние различных значений свойства 'vertical-align' на ячейки таблицы.
Блоки ячеек 1 и 2 выровнены по их базовой линии. Блока ячеек 2 имеет наибольшую высоту до базовой линии, поэтому он определяет базовую линию строки.
Если строка не содержит блоки ячеек, выровненные по их базовой линии, то базовой линией такой строки является нижний край содержимого самой нижней ячейки в строке.
Во избежание конфликтных ситуаций выравнивание ячеек производится в следующем порядке:
Блокам ячеек, которые меньше высоты строки, добавляется дополнительный верхний или нижний отступ внутри ячейки.
Ячейка в данном примере имеет базовую линию, расположенную ниже ее нижней границы:
div { height: 0; overflow: hidden; }
<table>
<tr>
<td>
<div> Тест </div>
</td>
</tr>
</table>
Горизонтальное выравнивание содержимого ячейки внутри блока ячейки задается свойством 'text-align'.
Свойство 'visibility' для элементов строк, групп строк, столбцов и групп столбцов принимает значение 'collapse'. В результате применения данного значения вся строка или весь столбец не будет отображаться, и место, которое бы они занимали, будет доступно для размещения содержимого. Содержимое ячеек, занимающих несколько строк и столбцов, которое пересекает перекрывающиеся столбцы или строки — усекается. Подавление строк или столбцов, однако, не оказывает на размещение таблицы другого влияния. Это позволяет динамически удалять строки или столбцы, не меняя расположения таблицы с учетом возможного изменения ограничений столбцов.
Для установки границ ячеек таблицы в CSS используются две модели. Первая модель больше всего подходит для так называемых отдельных границ вокруг определенных ячеек, другая применяется к границам, проходящим от одного края таблицы до другого. Любая из этих моделей позволяет создать множество различных стилей границ, поэтому выбор модели определяется исключительно вкусом создателя таблицы.
| Значение: | collapse | separate | inherit |
| Начальное значение: | separate |
| Область применения: | элементы 'table' и 'inline-table' |
| Наследование: | да |
| Процентное задание: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
Это свойство позволяет выбрать модель границ таблицы. Значение 'separate' означает модель с отдельными границами. Значение 'collapse' задает модель с пересекающимися границами. Эти модели описаны ниже.
| Значение: | <длина> <длина>? | inherit |
| Начальное значение: | 0 |
| Область применения: | элементы 'table' и 'inline-table'* |
| Наследование: | да |
| Процентное задание: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | две абсолютные длины |
*) Примечание: агент пользователя может так же применить свойство 'border-spacing' к элементам 'frameset'. Какой из элементов является элементом 'frameset' не определяется данной спецификацией, а зависит от языка документа. Например, HTML4 определяет элемент <FRAMESET>, а XHTML 1.0 определяет элемент <frameset>. Таким образом свойство 'border-spacing' для элементов 'frameset' может быть использовано как корректная подстановка для нестандартного атрибута 'framespacing'.
Если задана длина, то она обозначает расстояние между границами смежных ячеек. Если задана одна длина, она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, первое определяет расстояние по горизонтали, а вторая — по вертикали. Длины не могут быть отрицательными.
Расстояние между границей таблицы и границей ячейки с краю таблицы равно отступу таблицы для этой стороны, плюс соответствующее расстояние между границами. Например, с правой стороны расстояние равно отступ справа (padding-right) + горизонтальное расстояние между границами (border-spacing).
Ширина таблицы равна расстоянию от левого внутреннего края отступа до правого внутреннего края отступа (включая расстояние между границами, но исключая отступ и границу).
Однако, в HTML и XHTML1, ширина элемента <table> равна расстоянию от края левой границы до края правой границы.
Примечание: В CSS3 это оригинальное требование будет изменено применительно к таблице стилей агента пользователя и свойству 'box-sizing'.
В этой модели каждая ячейка имеет собственные границы. Свойство 'border-spacing' определяет расстояние между границами смежных ячеек. В этой области фон строк, столбцов, групп строк и групп столбцов становится невидимым так, что сквозь него отображается фон таблицы. Строки, столбцы, группы строк и группы столбцов не могут иметь границ (т.е., агент пользователя должен игнорировать свойства границ для этих элементов).
Таблицу, представленную на рисунке ниже, можно создать с помощью следующей таблицы стилей:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
td.special { border: inset 10pt } /* Верхняя левая ячейка */
Таблица, в которой для свойства 'border-spacing' установлено значение длины. Обратите внимание, что у каждой ячейки имеется собственная граница, а таблица так же имеет отдельную границу.
| Значение: | show | hide | inherit |
| Начальное значение: | show |
| Область применения: | элементы 'table-cell' |
| Наследование: | да |
| Процентное задание: | Н/Д |
| Устройства: | визуальные |
| Вычисляемое значение: | как определено |
В модели с отдельными границами это свойство управляет представлением границ и фона вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству 'visibility' присвоено значение 'hidden'. Ячейки являются пустыми если они содержат один или несколько следующих элементов:
Если для этого свойства установлено значение 'show', то вокруг/позади пустых ячеек отображаются границы и фон (как вокруг обычных ячеек).
Значение 'hide' означает, что вокруг/позади пустых ячеек не отображаются границы или фон (см. пункт 6 в 17.5.1). Более того, если у всех ячеек в строке это свойство имеет значение 'hide', и ячейки не имеют видимого содержимого, то строка имеет нулевую высоту а вертикальное расстояние между границами применяется только с одной стороны строки.
Согласно следующему правилу границы и фон будут прорисовываться вокруг всех ячеек:
table { empty-cells: show }
В модели с пересекающимися границами возможно указывать границы, которые окружают ячейку, строку, группу строк, столбец или группу столбцов полностью или частично. Таким образом можно установить границы для атрибута HTML "rule".
Границы выровнены по центру сетки между ячейками. В случае нечетного числа или дискретных единиц (экранные пикселы, точки принтера) агенты пользователей должны выбрать подходящую линию границы.
На рисунке ниже показана взаимосвязь ширины таблицы, ширины границ, отступа внутри ячеек и ширины ячейки. Эта взаимосвязь представляется следующим уравнением, которое применимо к каждой строке таблицы:
ширина строки = (0.5 * ширина границы0) + левый отступ1 + ширина1 + правый отступ1 + ширина границы1 + левый отступ2 +...+ правый отступn + (0.5 * ширина границыn)
Здесь n — количество ячеек в строке, левый отступi и правый отступi относится к левому (соотв., правому) отступу ячейки i, и ширина границыi относится к границе между ячейками i и i + 1.
Агенты пользователей должны рассчитывать начальное значение ширины левой и правой границ для таблицы анализируя первую и последнюю ячейки в первой строке таблицы. Ширина левой границы таблицы равна половине перекрывающейся левой границы первой ячейки, а ширина правой границы таблицы равна половине перекрывающейся правой границы последней ячейки. Если последующие строки имеют большие перекрывающиеся левые и правые границы, тогда любая дополнительная часть прорисовывается внутри области поля таблицы.
Ширина верхней границы таблицы вычисляется путем анализа всех ячеек, верхние границы которых перекрываются с верхней границей таблицы. Ширина верхней границы таблицы равна половине максимального значения ширины перекрывающейся верхней границы. Ширина нижней границы таблицы вычисляется путем анализа всех ячеек, нижние границы которых перекрываются с низом таблицы. Ширина нижней границы таблицы равна половине максимального значения ширины перекрывающейся нижней границы.
Если таблица переполняет какого-либо предка, то при вычислениях принимаются во внимание любые границы, выступающие внутрь поля (см. свойство 'overflow').
Схема показывает ширину ячеек и границ, отступы ячеек.
Примите во внимание, что в этой модели ширина таблицы включает половину границы таблицы. Кроме того, в этой модели у таблицы нет отступов (но имеются поля).
CSS 2.1 не определяет то, где находится край фона в элементе таблицы.
В модели с пересекающимися границами, границы с каждого края ячейки могут задаваться свойствами различных элементов, располагающихся у края (ячейки, строки, группы строк, столбцов, группы столбцов и самой таблицы), и эти границы могут различаться по ширине, стилю и цвету. Эмпирическое правило — для каждого края используется стиль границы более "приковывающий взгляд", за исключением того, что любое возникновение стиля 'hidden' безоговорочно отключает границу.
Какой тип границы "выиграет" в случае конфликта, определяется следующими правилами:
В следующем примере показано применение этих правил иерархии. Эта таблица стилей:
table { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
td { border: 1px solid red; padding: 1em; }
td.cell5 { border: 5px dashed blue; }
td.cell6 { border: 5px solid green; }
с таким исходным текстом HTML:
<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="cell5"> 5
<TD class="cell6"> 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>
будет представлена примерно как следующая таблица:
Пример таблицы с перекрывающимися границами.
Вот пример скрытия пересекающихся границ:
Таблица с двумя отсутствующими внутренними границами.
Исходный текст HTML:
<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>
Смысл некоторых значений свойства 'border-style' применительно к таблице имеет иное значение, чем к другим элементам. В приведенном ниже списке такие значения помечены звездочкой.