17.6. Границы.

Существует две модели для установки границ в ячейках таблицы в CSS. Одна модель подходит для так называемых раздельных границ вокруг индивидуальных ячеек, другая - для границ, непрерывных от одного конца таблицы к другому. Многие стили границ получают с помощью любой модели, так что часто это - дело вкуса, какую модель использовать.

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

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

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

'border-spacing'
Тип значения:       <length> <length>? | inherit
Начальная величина: 0
Применяется:        к элементам 'table' и 'inline-table'
Наследование:       да
Процентная база:    нет
Медиа:              визуальные

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

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

Таблица на рисунке ниже может быть результатом следующей стилевой таблицы:

  TABLE      { border: outset 10pt; 
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* The top-left cell */

[D]

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

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

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

В модели раздельных границ это свойство контролирует визуализацию границ вокруг ячеек, которые не имеют содержания. Пустые ячейки и ячейки со свойством 'visibility', установленного как 'hidden', рассматриваются как имеющие не видимое содержание. Видимое содержание включает " " и другие пробельные символы за исключением ASCII CR ("\0D"), LF ("\0A"), tab ("\09") и пробел ("\20").

Когда это свойство имеет значение 'show', границы рисуются вокруг пустых ячеек (как вокруг нормальных ячеек).

Значение 'hide' означает, что границы не рисуются вокруг пустых ячеек. Более того, если все ячейки в ряду имеют значение 'hide' и не имеют видимого содержания, то весь ряд ведет себя так, как если бы он имел значение 'display: none'.

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

TABLE { empty-cells: show }

17.6.2. Модель сокращающихся границ.

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

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

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

row-width = (0.5 * border-width₀) + padding-left₁ + width1 + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

где

row-width – ширина ряда,

border-width – ширина границы,

padding-left – левый отступ,

width – ширина,

padding-right – правый отступ,

Здесь n – количество ячеек в ряду, и ширина границы (border-width_i) относятся к границе между ячейками i и i+1. Обратите внимание на то, что только половина двух внешних границ подсчитываются в ширине таблицы; другая половина этих двух границ лежат в области полей.

[D]

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

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

Разрешение граничных конфликтов.

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

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

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

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

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

с HTML-источником:

<P>
<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="solid-blue"> 5
    <TD class="solid-green"> 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]

Пример таблицы со сжатыми границами.

Следующий пример показывает таблицу с горизонтальными линиями между рядами. Верхняя граница таблицы установлена как 'hidden' для подавления верхней границы первого ряда. Это выполняется для атрибута HTML 4.0 "rule" (rules="rows").

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse; 
                       border-top: hidden }

[D]

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

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

TR:first-child { border-top: none }
TR { border-top: solid }

Ниже приводится другой пример скрытых сжимающихся границ:

[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

В модели разделенных границ: граница делает весь блок, как если бы он был погружен в каркас. В модели сокращающихся границах, как 'groove'.

*outset

В модели разделенных границ: граница делает весь блок, как если бы он выходит из канвы. В модели сокращающихся границ, как 'ridge'.