HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
В этой главе мы разберемся с атрибутами стиля CSS для задания различных параметров таблиц. Часть из них мы уже изучили в предыдущих главах, а с некоторыми познакомимся только сейчас.
Параметры выравнивания
Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:
TD, TH { text-align: center }
Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):
CAPTION { text-align: left }
Содержимое
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
TABLE { align: center; border: medium solid black; border-spacing: 1px }
TD, TH { border: thin dotted black; padding: 2px }
В листинге 12.1 мы назначили для самой таблицы тонкую сплошную черную рамку и отступ между ячейками, равный одному пикселу, а для ячеек этой таблицы — тонкую точечную черную рамку и отступ между границей ячейки и ее содержимым, равный двум пикселам.
Если мы зададим рамки вокруг ячеек таблицы, Web-обозреватель нарисует рамку вокруг каждой ячейки. Такая таблица будет выглядеть как набор прямоугольников- ячеек, заключенный в большой прямоугольник-таблицу (рис. 12.1).
Рис. 12.1. Обычное поведение Web-обозревателя — рамки рисуются вокруг каждой ячейки таблицы
Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).
Рис. 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).
Листинг 12.2
<TABLE>
<TR>
<TH>Первый столбец</TH>
<TH STYLE="width: 40px">Второй столбец шириной в 40 пикселов</TH>
<TH>Третий столбец</TH>
</TR>
.
</TABLE>
— Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).
Листинг 12.3
<TABLE>
.
<TR>
<TD STYLE="height: 30px">Строка высотой в 30 пикселов</TD>
.
</TR>
.
</TABLE>
Обычно все размеры, которые мы зададим для таблицы и ее ячеек, — не более чем рекомендация для 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 — заголовок располагается под таблицей.