| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параметры таблиц
|
|
Параметры таблиц
Параметры выравнивания
Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align:
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-страниц, но в случае ячеек таблиц ведет себя несколько по-другому.
top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).
middle — выравнивает содержимое ячейки по ее центру.
bottom — выравнивает содержимое ячейки по ее нижнему краю.
Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц:
td, th { vertical-align: middle }
Параметры отступов и рамок
Для задания отступов мы можем пользоваться атрибутами стиля, нам уже знакомы.
Для задания внутренних отступов между содержимым ячейки и ее границей необходимо воспользоваться атрибутами стиля: padding-left, padding-top, padding-right, padding-bottom и padding.
Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.
Параметры рамок зададим через соответствующие атрибуты стиля (листинг 12.1).
Листинг 12.1
<table>
. . . .
<tr>
<td style="height: 30px">Строка высотой 30 пикселов</td>
. . . .
</tr>
</table>
В листинге 12.1 мы назначили для самой таблицы тонкую сплошную черную рамку и отступ между ячейками, равный одному пикселу, а для ячеек этой таблицы — тонкую точечную черную рамку и отступ между границей ячейки и ее содержимым, равный двум пикселам.
Если мы зададим рамки вокруг ячеек таблицы, Web-обозреватель нарисует рамку вокруг каждой ячейки. Такая таблица будет выглядеть как набор прямоугольников-ячеек, заключенный в большой прямоугольник-таблицу (рис. 12.1).
|
Версия HTML Год выхода
|
Особенности
|
|
1.0
|
1992
|
Официально не была стандартизована!
|
|
2.0
|
199S
|
Первая стандартизованная версия
|
|
3.2
|
1997
|
Поддержка таблиц и графики
|
|
;4.о
|
1997
|
"Очищен" от устаревших тегов
|
|
4.01
|
1999
|
В основном, исправление ошибок
|
|
S.0
|
і! 7
|
В разработке
|
Таблица 12.1
Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).
|
Bерсия HTML Гoд выходa
|
Особенности
|
|
1.0
|
1992
|
Официально не была стандартизована
|
|
2.0
|
11995
|
Первая стандартизованная версия
|
|
3.2
|
1997
|
Поддержка таблиц и графики
|
|
4.0
|
1997
|
"Очищен" от устаревших тегов
|
|
4,01
|
J1999
|
В основного исправление ошибок
|
|
S.0
|
!?
|
В разработке
|
Таблица 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.
Данный атрибут стиля применяется к самой таблице (тегу <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.
Листинг 12.4
table { font-size: 10pt;
margin: 10px 0px;
border: thin solid #B1BEC6;
. . . .
td, th { padding:2px;
border: thin dotted #B1BEC6 }
caption { text-align: left }
Здесь мы дополнили стиль переопределения тега <table>
и создали стили переопределения тегов <td>, <th> и <caption>. Они столь просты, что не требуют комментариев.
Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
