Параметры таблиц

Рассмотрим некоторые параметры таблиц, применяемые при создании таблиц на Web-странице.

Параметры выравнивания

Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:

TD, TH { text-align: center }

Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):

CAPTION { text-align: left }

Содержимое ячеек таблиц по вертикали мы выровняем с помощью атрибута стиля vertical-align:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|

text-bottom|<промежуток между базовыми линиями>|inherit

Применительно к другим элементам Web-страниц он был описан в главе 8, но в случае ячеек таблиц ведет себя несколько по-другому.

- top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).

- middle — выравнивает содержимое ячейки по ее центру.

- bottom — выравнивает содержимое ячейки по ее нижнему краю.

Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц (см. главу 8):

TD, TH { vertical-align: middle }

Параметры отступов и рамок

Параметры таблиц - параметры отступов и рамок.

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

- Для задания внутренних отступов между содержимым ячейки и ее границей — атрибутами стиля padding-left, padding-top, padding-right, padding-bottom и padding.

- Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.

Параметры рамок зададим через соответствующие атрибуты стиля, которые также знакомы нам по главе 11 (листинг 12.1).

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

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

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

Атрибут стиля border-collapse указывает Web-обозревателю, как будут рисоваться рамки ячеек в таблице:

border-collapse: collapse|separate|inherit

- separate — каждая ячейка таблицы заключается в отдельную рамку (см. рис. 12.1). Это обычное поведение.

- collapse — рисуются рамки, разделяющие ячейки таблицы (см. рис. 12.2).

Данный атрибут стиля применяется только к самим таблицам (тегам <TABLE>).

Пример:

TABLE { border-collapse: collapse }

Параметры размеров

К параметрам таблиц относятся и параметры размеров.

Для задания размеров — ширины и высоты — таблиц и их ячеек подойдут атрибуты стиля width и height, описанные в главе 10.

- Если требуется задать ширину или высоту всей таблицы, нужный атрибут стиля указывают именно для нее:

TABLE { width: 100%;
height: 300px }

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

- Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).

Обычно все размеры, которые мы зададим для таблицы и ее ячеек, — не более чем рекомендация для Web-обозревателя. Если содержимое таблицы не будет в ней помещаться, Web-обозреватель увеличит ширину или высоту таблицы. Зачастую это может быть неприемлемо, поэтому стандарт CSS предусматривает средства, позволяющие изменить такое поведение Web-обозревателя.

Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:

table-layout: auto|fixed|inherit

- auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.

- fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { table-layout: fixed;
overflow: auto }

Прочие параметры таблиц

Атрибут стиля caption-side указывает местоположение заголовка таблицы относительно самой таблицы:

caption-side: top|bottom|inherit

- top — заголовок располагается над таблицей (обычное поведение).

- bottom — заголовок располагается под таблицей.

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { caption-side: bottom }

Атрибут стиля empty-cells указывает, как Web-обозреватель должен выводить на экран пустые (не имеющие содержимого) ячейки:

empty-cells: show|hide|inherit

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

- hide — пустые ячейки не будут выводиться на экран.

Обычное поведение зависит от Web-обозревателя, так что, если это критично, лучше явно задать нужное значение атрибута стиля empty-cells.

Атрибут стиля empty-cells также применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { empty-cells: hide }

Представление для нашего Web-сайта

Применим наши знания по параметрам таблиц. Поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.

Сначала, как обычно, сформулируем перечень ее параметров.

- Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от "соседей".

- Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.

- Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.

- Внутренние отступы в ячейках — 2 пиксела.

- Рамки ячеек — тонкие, точечные, цвет #B1BEC6.

- Выравнивание текста заголовка таблицы — по левому краю.

Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.

Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.

Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.

Закончим о параметрах таблиц.