17 Таблицы

Содержание

17.1 Введение в таблицы

Данная глава описывает модель обработки таблиц в 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 }

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

17.2 Модель таблиц CSS

Модель таблиц CSS основана на модели таблиц HTML4, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается "ориентированной на строки", так как в языке документа явным образом определяются строки, а не столбцы. Столбцы определяются только после указания всех строк – первая ячейка каждой строки относится к первому столбцу, вторая – ко второму и так далее). Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться граница).

Таким образом, модель таблицы состоит из таблиц, заголовков, строк, групп срок, столбцов, групп столбцов и ячеек.

Для модели 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', но для визуального форматирования эта группа строк всегда отображается перед всеми другими строками и группами строк, после любого главного заголовка. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки заголовка на каждой странице, занимаемой таблицей. В таблице, содержащей несколько элементов со свойством 'display: table-header-group', только первый будет представляться как заголовок; остальные будут обрабатываться так, как будто они имеют свойство 'display: table-row-group'.
table-footer-group (В HTML: TFOOT)
Работает аналогично 'table-row-group', но для визуального форматирования эта группа строк всегда отображается после всех строк и групп строк, перед любыми нижними заголовками. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей. В таблице, содержащей несколько элементов со свойством 'display: table-footer-group', только первый будет представляться как нижний заголовок; остальные будут обрабатываться так, как будто они имеют свойство 'display: table-row-group'.
table-column (В HTML: COL)
Указывает, что элемент определяет столбец ячеек.
table-column-group (В HTML: COLGROUP)
Указывает, что элемент объединяет один или несколько столбцов.
table-cell (В HTML: TD, TH)
Указывает, что элемент представляет собой ячейку таблицы.
table-caption (В HTML: CAPTION)
Задает заголовок таблицы. Все элементы со свойством 'display: table-caption' должны представляться как описано в разделе 17.4.

Перемещаемые элементы с этим значением свойства '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, не являющихся элементами таблицы.

17.2.1 Безымянные объекты таблицы

Языки документов, отличные от HTML, могут не включать все элементы из модели таблиц CSS 2.1. В этом случае для работы модели таблиц должно считаться, что "отсутствующие" элементы существуют. Все элементы таблицы будут автоматически генерировать вокруг себя необходимые безымянные объекты таблицы, состоящие по меньшей мере из трех вложенных объектов, соответствующих элементам 'table'/'inline-table', 'table-row' и 'table-cell'. Отсутствующие элементы генерируют безымянные объекты (например, безымянные блоки в визуальное схеме таблицы) согласно следующим правилам:

  1. Если родительский элемент P блока 'table-cell' элемента Т не является 'table-row', то блок, соответствующий 'table-row', будет сгенерирован между элементами P и T. Этот объект будет охватывать все смежные блоки 'table-cell' элемента T.
  2. Если родительский элемент P блока 'table-row' элемента Т не является блоком 'table', 'inline-table', 'table-header-group', 'table-footer-group' или 'table-row-group', то блок, соответствующий элементу 'table', будет сгенерирован между элементами P и T. Если Р является блоком 'inline', тогда генерируемый блок должен быть блоком 'inline-table' вместо блока 'table'. Этот блок будет охватывать все смежные блоки элемента T, которым требуется родительский блок 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'table-caption'. Элемент T и смежные с ним элементы могут также быть безымянными блоками 'table-row', сгенерированными в соответствии с правилом 1.
  3. Если родительский элемент P блока 'table-column' элемента Т не является блоком 'table', 'inline-table' или 'table-column-group', то блок, соответствующий элементу 'table', будет сгенерирован между элементами P и T. Если Р является блоком 'inline', тогда генерируемый блок должен быть блоком 'inline-table' вместо блока 'table'. Этот блок будет охватывать все смежные блоки элемента T, которым требуется родительский блок 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'table-caption', включая любой безымянный блок 'table-row', сгенерированный в соответствии с правилом 1.
  4. Если родительский элемент P блока 'table-row-group' (или 'table-header-group', 'table-footer-group' или 'table-column-group' или 'table-caption') элемента Т не является блоком 'table' или 'inline-table', то блок, соответствующий элементу 'table', будет сгенерирован между элементами P и T. Если Р является блоком 'inline', тогда генерируемый блок должен быть блоком 'inline-table' вместо блока 'table'. Этот блок будет охватывать все смежные блоки элемента T, которым требуется родительский блок 'table': 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'table-caption', включая любой безымянный блок 'table-row', сгенерированный в соответствии с правилом 1.
  5. Если дочерний элемент T блока 'table' (или 'inline-table') элемента P не является блоком 'table-row-group', 'table-header-group', 'table-footer-group', 'table-caption', 'table-column', 'table-column-group' или 'table-row', то блок, соответствующий элементу 'table-row', будет сгенерирован между элементами P и T. Этот блок охватывает все смежные блоки элемента T, которые не являются блоками 'table-row-group', 'table-header-group', 'table-footer-group', 'table-caption', 'table-column', 'table-column-group' или 'table-row'.
  6. Если дочерний элемент T блока 'table-row-group' (или 'table-header-group' или 'table-footer-group') элемента P не является блоком 'table-row', то блок, соответствующий элементу 'table-row', будет сгенерирован между элементами P и T. Этот блок охватывает все смежные блоки элемента T, которые не являются блоками 'table-row'.
  7. Если дочерний элемент T блока 'table-row' элемента P не является 'table-cell', то блок, соответствующий 'table-cell', будет сгенерирован между элементами P и T. Этот блок охватывает все смежные блоки элемента T, которые не являются блоками '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 }

17.3 Столбцы

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

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

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

Пример(ы):

Далее приведено несколько примеров правил стилей, которые устанавливают свойства столбцов. Первые два правила вместе реализуют атрибут "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 }

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

В терминах модели визуального форматирования таблица может работать как элемент уровня блока (для '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' в блоке таблицы используются в безымянном блоке вместо блока таблицы. Блок таблицы использует начальные значения для этих свойств.

Таблица с заголовком над ней   [D]

Схема таблицы, над которой находится заголовок; нижнее поле заголовка перекрывается с верхним полем таблицы.

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

'caption-side'
Значение:  top | bottom | inherit
Начальное значение:  top
Область применения:  элементы 'table-caption'
Наследование:  да
Процентное задание:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

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

Примечание: В CSS2 описано различное поведение ширины и горизонтального выравнивания. Такое поведение будет представлено в CSS3 с использованием значений 'top-outside' и 'bottom-outside' для этого свойства.

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

Пример(ы):

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

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

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

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

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

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

Края строк, столбцов, групп строк и групп столбцов в модели с пересекающимися границами совпадают с гипотетическими линиями сетки по которым центрируются границы ячеек. (И таким образом, в этой модели, строки вместе точно охватывают таблицу, не оставляя промежутков; так же и для столбцов.) В модели с отдельными границами, края совпадают с краями границ ячеек. (И таким образом, в этой модели, могут быть промежутки между строками, столбцами, группами строк или группами столбцов, в соответствии со значением свойства '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 также не определяет его. Агенты пользователей могут представлять таблицы на свое усмотрение, например, так, как показано на рисунке слева.

Одна таблица с наложением ячеек и одна без наложения   [D]

Слева – один из вариантов представления некорректной таблицы HTML 4; справа – единственный возможный вариант форматирования аналогичной таблицы XHTML.

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

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

схема слоев таблицы   [D]

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

  1. Самый нижний слой представляет собой одну плоскость, представляющую сам блок таблицы. Как и все блоки, он может быть прозрачным.
  2. Следующий слой содержит группы столбцов. Каждая группа столбцов простирается от верха ячеек верхней строки до низа ячеек нижней строки и от левого края их крайнего левого столбца до правого края их крайнего правого столбца. Фон охватывает целиком полную область всех ячеек, которые входят в группу столбцов, даже если они находятся вне группы столбцов, но эти различия в области не затрагивает позиционирование фонового рисунка.
  3. В верхней части групп столбцов находятся области, представляющие блоки столбцов. Столбцы по высоте такие же, как и группы столбцов, а по ширине такие же, как и обычные (занимающие один столбец) ячейки в столбце. Фон охватывает целиком полную область всех ячеек, которые входят в столбец, даже если они находятся вне столбца, но эти различия в области не затрагивает позиционирование фонового рисунка.
  4. Далее следует слой, содержащий группы строк. Каждая группа строк простирается от верхнего левого угла их самой верхней ячейки первого столбца до нижнего правого угла их самой нижней ячейки последнего столбца.
  5. Предпоследний слой содержит строки. Строки по ширине такие же, как и группы строк, а по высоте такие же, как и обычные (занимающие одну строку) ячейки в строке. Как и в случае со столбцами, фон охватывает целиком полную область всех ячеек, которые входят в строку, даже если они находятся вне строки, но эти различия в области не затрагивает позиционирование фонового рисунка.
  6. Самый верхний слой содержит собственно ячейки. Как показано на рисунке, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. В модели с отдельными границами (свойство 'border-collapse' имеет значение 'separate'), если значение их свойства 'empty-cells' равно 'hide', то эти "пустые" ячейки прозрачны для фонов ячейки, строки, группы строк, столбца, группы столбцов, и сквозь них виден фон таблицы.

"Недостающая ячейка" – это ячейка в строке/столбце сетки, которая не занята элементом или псевдоэлементом. Недостающие ячейки представляются так, как если бы они были безымянными блоками ячеек таблицы, занимающие свое положение в сетке.

В следующем примере первая строка содержит четыре непустые ячейки, но вторая строка содержит только одну непустую ячейку, поэтому сквозь нее просвечивает фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и эту строку. Следующий код 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>

может форматироваться так:

Таблица с тремя пустыми ячейками в нижней строке   [D]

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

Примите во внимание, что если у таблицы есть свойство 'border-collapse: separate', то фон области, заданной свойством 'border-spacing' является всегда фоном элемента таблицы. См. модель с отдельными границами.

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

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

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

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

'table-layout'
Значение:  auto | fixed | inherit
Начальное значение:  auto
Область применения:  элементы 'table' и 'inline-table'
Наследование:  нет
Процентное задание:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

fixed
Используется алгоритм фиксированного положения таблицы
auto
Используется любой алгоритм автоматического размещения таблицы

Ниже представлен описания обоих алгоритмов.

17.5.2.1 Фиксированное расположение таблицы

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

Ширина таблицы может указываться явным образом с помощью свойства '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 }

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

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

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

Если в следующей строке количество столбцов больше количества, определенного элементами столбцов таблицы, и количества, определенного первой строкой, то дополнительные столбцы не представляются. При использовании объявления 'table-layout: fixed', авторам не следует пропускать столбцы в первой строке.

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

17.5.2.2 Автоматическое расположение таблицы

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

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

Примечание. Более детально это может быть определено в CSS3.

Дальнейшая часть данного раздела не является нормативной.

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

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

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

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

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

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

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

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

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

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

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

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

Высота таблицы задается свойством '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' имеют следующий смысл:

baseline
Базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой (определение базовой линии ячеек и строк см. ниже).
top
Верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.
bottom
Низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.
middle
Середина ячейки совпадает с серединой строк, занимаемых ячейкой.
sub, super, text-top, text-bottom, <длина>, <проценты>
Эти значения не применяются к ячейкам; вместо них ячейка выравнивается по базовой линии.

Базовая линия ячейки — это базовая линия первого in-flow линейного блока в ячейке, или первого in-flow элемента table-row в ячейке, в зависимости от того, что из них следует первым. Если таких линейных блоков или элементов table-row нет, то базовая линия – это низ края содержимого блока ячейки. Для поиска базовой линии, in-flow блоки с механизмом прокручивания (см. свойство 'overflow') должны обрабатываться так, как будто они прокручены в их оригинальное положение. Примите во внимание, что базовая линия ячейки может располагаться ниже ее нижней границы, см. пример, приведенный ниже.

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

Пример вертикального выравнивания ячеек   [D]

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

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

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

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

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

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

Ячейка в данном примере имеет базовую линию, расположенную ниже ее нижней границы:

div { height: 0; overflow: hidden; }

<table>
 <tr>
  <td>
   <div> Тест </div>
  </td>
 </tr>
</table>

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

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

17.5.5 Динамические эффекты строк и столбцов

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

17.6 Границы

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

'border-collapse'
Значение:  collapse | separate | inherit
Начальное значение:  separate
Область применения:  элементы 'table' и 'inline-table'
Наследование:  да
Процентное задание:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

17.6.1 Модель отдельных границ

'border-spacing'
Значение:  <длина> <длина>? | 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)   [D]

Таблица, в которой для свойства 'border-spacing' установлено значение длины. Обратите внимание, что у каждой ячейки имеется собственная граница, а таблица так же имеет отдельную границу.

17.6.1.1 Границы и фон вокруг пустых ячеек: свойство 'empty-cells'

'empty-cells'
Значение:  show | hide | inherit
Начальное значение:  show
Область применения:  элементы 'table-cell'
Наследование:  да
Процентное задание:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

Если для этого свойства установлено значение 'show', то вокруг/позади пустых ячеек отображаются границы и фон (как вокруг обычных ячеек).

Значение 'hide' означает, что вокруг/позади пустых ячеек не отображаются границы или фон (см. пункт 6 в 17.5.1). Более того, если у всех ячеек в строке это свойство имеет значение 'hide', и ячейки не имеют видимого содержимого, то строка имеет нулевую высоту а вертикальное расстояние между границами применяется только с одной стороны строки.

Пример(ы):

Согласно следующему правилу границы и фон будут прорисовываться вокруг всех ячеек:

table { empty-cells: show }

17.6.2 Модель с перекрывающимися границами

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

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

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

ширина строки = (0.5 * ширина границы0) + левый отступ1 + ширина1 + правый отступ1 + ширина границы1 + левый отступ2 +...+ правый отступn + (0.5 * ширина границыn)

Здесь n — количество ячеек в строке, левый отступi и правый отступi относится к левому (соотв., правому) отступу ячейки i, и ширина границыi относится к границе между ячейками i и i + 1.

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

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

Если таблица переполняет какого-либо предка, то при вычислениях принимаются во внимание любые границы, выступающие внутрь поля (см. свойство 'overflow').

Схема отображающая ширину ячеек и границ, отступы ячеек   [D]

Схема показывает ширину ячеек и границ, отступы ячеек.

Примите во внимание, что в этой модели ширина таблицы включает половину границы таблицы. Кроме того, в этой модели у таблицы нет отступов (но имеются поля).

CSS 2.1 не определяет то, где находится край фона в элементе таблицы.

17.6.2.1 Разрешение конфликтов между границами

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

Какой тип границы "выиграет" в случае конфликта, определяется следующими правилами:

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

Пример(ы):

В следующем примере показано применение этих правил иерархии. Эта таблица стилей:

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>

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

Пример таблицы с перекрывающимися границами   [D]

Пример таблицы с перекрывающимися границами.

Пример(ы):

Вот пример скрытия пересекающихся границ:

Таблица с двумя отсутствующими границами   [D]

Таблица с двумя отсутствующими внутренними границами.

Исходный текст 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>

17.6.3 Стили границ

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

none
Границ нет.
*hidden
Аналогично значению 'none', но в модели с перекрывающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).
dotted
Граница в виде ряда точек.
dashed
Граница представляется рядом коротких отрезков.
solid
Граница представляется сплошной линией.
double
Граница представляется двумя сплошными линиями. Сумма ширин двух линий и расстояния между ними равна значению свойства 'border-width'.
groove
Граница отображается вдавленной линией.
ridge
Противоположно значению 'groove': граница отображается выпуклой линией.
*inset
В модели с отдельными границами весь блок выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'ridge'.
*outset
В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'groove'.