Порядок наложения элементов

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

Порядок наложения слоев с табличными элементами «сверху вниз» следующий: ячейка, строка, группа строк, столбец, группа столбцов, таблица.

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

Границы

В CSS 2.1 имеются две модели управления границами, выбор которых определяется свойством:

border-collapse

Значения: collapse | separate | inherit

Начальное значение: collapse

Модель раздельных границ (border-collapse: separate)

Граница отображается со всех четырех сторон каждой из ячеек таблицы, а с помощью border-spacing можно добавить дополнительный межъячеечный промежуток.

border-spacing

Значения: <длина1> <длина2> | inherit

<длина1> - горизонтальный промежуток между ячейками в каждой строке таблицы.

<длина2> - значение промежутка по вертикали.

Если задается только одно значение, то оно действует в обоих направлениях одновременно. Например:

table {

border-collapse:separate;

border-spacing:10px 3 px;

border:none;}

td { border: 1px solid black;}

Рис 3. 2. Таблица с промежутком между ячейками

Если значение border-spacing равно нулю, это вызывает касание смежных границ ячеек, а значит, и «удвоение» таковых во внутренней части сетки.

Модель сжимающихся границ (border-collapse: collapse)

В модели сжимающихся границ границы смежных ячеек «сжимаются», так что видна одна-единственная граница, а дополнительный промежуток между границами удаляется. Рис. 3 показывает таблицу из предыдущего примера:

table {

border-collapse: collapse;

border:none;}

td {

border: 1px solid black;}

Рис 3. 3. Таблица со сжатыми межъячеечными границами

Границы между ячейками центруются по линиям межъячеечной сетки. Поэтому если пара смежных ячеек имеет границу толщиной 8 пикселей, на область каждой ячейки придутся по четыре из них. Если граница занимает нечетное число пикселей, то выбрать, где вывести «лишний» пиксель, должен пользовательский агент. Широкие границы по внешним краям таблицы могут выходить в зону отступа.

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

Расчет размеров таблицы (ширина, высота)

Браузер может использовать один из двух алгоритмов расчета значения ширины таблицы: с фиксированной и автоматически определяемой шириной. Конкретный способ расчета для соответствующей таблицы создатели Web-страниц могут указывать посредством выбора значения table-layout.

table-layout

Значения: auto | fixed | inherit

Начальное значение: auto

Алгоритм с фиксированной шириной

Значение table-layout: fixed говорит браузеру, что находить размеры таблицы нужно, используя «фиксированный» алгоритм вычислений. Подобный способ расчета требует от агента наименьших усилий, так как искомую ширину определяют значения свойства width таблицы, ее столбцов и ячеек.

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

Итоговой шириной таблицы становится сумма ширин столбцов или значение width табличного элемента table, точнее большее из значений.

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

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

table-layout: fixed поможет уменьшить время вывода приложения. Достаточно убедиться, что задана конкретная ширина всех столбцов или ячеек первой строки таблицы.