Чтение онлайн

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

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

• border – задает различные свойства границы столбцам, но работает, только если для свойства border-collapse в элементе таблицы установлено значение collapse.

• background – определяет фон для ячеек в столбце.

• width – определяет ширину столбца.

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

Рассмотрим несколько строк CSS-кода, определяющих свойства столбцов:

col.totals { background: blue }

table { table-layout: fixed }

col.totals { width: 5em }

Первое правило выделяет столбец класса totals синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя фиксированное расположение.

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

• top – над полем таблицы;

• bottom – ниже поля таблицы;

• left – слева от поля таблицы;

• right – справа от поля таблицы.

Заголовки, расположенные ниже или выше элемента TABLE, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они:

• наследуют наследуемые свойства таблицы;

• не считаются блоками для элементов compact или run-in, которые могут предшествовать таблице.

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

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

Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство text-align. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство vertical-align. В этом случае смысл имеют только значения top, middle и bottom. Все другие значения данного свойства будут трактоваться браузером как top.

Чтобы лучше разобраться с данным свойством, рассмотрим пример.

caption {

caption-side: bottom;

width: auto;

text-align: left

}

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

Теперь рассмотрим более сложный пример.

body {

margin-left: 8em

}

table {

margin-left: auto;

margin-right: auto

}

caption {

caption-side: left;

margin-left: -8em;

width: 8em;

text-align: right;

vertical-align: bottom

}

В этом примере показан способ помещения заголовка в левое поле. Таблица выровнена по центру за счет задания для левого и правого полей значения auto, а весь блок с таблицей и заголовком сдвинут в левое поле на расстояние, равное ширине заголовка.

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

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

Рассмотрим каждый слой таблицы подробно снизу вверх.

1. Самый нижний слой представляет собой одну плоскость и сам блок таблицы. Как и все блоки, он может быть прозрачным.

2. Следующий слой содержит группы столбцов. Они по высоте равны самой таблице, но не обязательно занимают всю ее ширину.

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

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

5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.

6. Самый верхний слой содержит собственно ячейки. Как показано на рис. 9.3, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. «Пустые» ячейки считаются прозрачными, поэтому через них будут видны нижние слои.

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