HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).
Рис. 12.2. Таблица, в которой рисуются только рамки, разделяющие ячейки
Атрибут стиля border-collapse указывает Web-обозревателю, как будут рисоваться рамки ячеек в таблице:
border-collapse: collapse|separate|inherit
— separate —
— 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-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-сайта, часть 7
Вот, собственно, и все атрибуты стиля, задающие параметры таблиц. Теоретическая часть данной главы оказалась совсем короткой…
В качестве практики давайте поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.
Сначала, как обычно, сформулируем перечень ее параметров.
— Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от "соседей".
— Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.
— Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.
— Внутренние отступы в ячейках — 2 пиксела.
— Рамки ячеек — тонкие, точечные, цвет #B1BEC6.
— Выравнивание текста заголовка таблицы — по левому краю.
Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.
Листинг 12.4
TABLE { font-size: 10pt; margin: 10px 0px; border: thin solid #B1BEC6; border-collapse: collapse }
.
TD, TH { padding: 2px; border: thin dotted #B1BEC6 }
CAPTION { text-align: left }
Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.