<html>
<head>
<style type="text/css">
table { background: #ff0; border-collapse: collapse }
td { background: red; border: double black }
</style>
</head>
<body>
<p>
<table>
<tr>
<td> 1
<td rowspan="2"> 2
<td> 3
<td> 4
</tr>
<tr><td></td></tr>
</table>
</body>
</html>
Документ, представленный в листинге 9.13, будет выглядеть, как показано на рис. 9.4.
Рис. 9.4. Таблица с тремя пустыми ячейками в нижней строке
Теперь рассмотрим, как можно изменять ширину таблицы свойствами CSS.
Ширина таблицы
Для управления отображением ширины таблицы при размещении ее ячеек, строк и столбцов используется свойство table-layout. Оно может принимать следующие значения.
• fixed – горизонтальное положение таблицы не зависит от содержимого ячеек; оно зависит только от ширины таблицы, ширины столбцов и расстояния между границами или ячейками. Ширина таблицы может указываться явным образом с помощью свойства width либо может быть равной auto.
• auto – браузер автоматически размещает таблицу. Ширина таблицы задается шириной столбцов и расстоянием между границами.
Высота таблицы
Высоту таблицы можно задать, используя свойство height для элемента TABLE. Как и для ширины, вы можете оставить выбор высоты браузеру, используя значение auto, либо задать значение числом и указать единицу измерения.
Используя свойство height, вы также можете задавать высоту поля элемента table-row, то есть высоту строк.
Вертикальное выравнивание
Свойство vertical-align каждой ячейки таблицы определяет вертикальное выравнивание ее содержимого. Содержимое каждой ячейки имеет базовую линию, верх, середину и низ. В контексте таблиц свойство vertical-align может принимать следующие значения.
• baseline – базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой.
• top – верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.
• bottom – низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.
• middle – середина ячейки совпадает с серединой строк, занимаемых ячейкой.
• sub, super, text-top, text-bottom – эти значения не применяются к ячейкам. В случае их использования ячейка выравнивается по базовой линии.
Горизонтальное выравнивание
Горизонтальное выравнивание содержимого ячейки устанавливается свойством text-align. Если в качестве значения свойства text-align для нескольких ячеек в столбце задана строка текста, то содержимое этих ячеек выравнивается относительно вертикальной оси. Начало строки соприкасается с этой осью. Расположение строки слева или справа относительно оси определяется направлением текста. Если значением свойства text-align для ячейки таблицы является строка, но этой строки нет в содержимом ячейки, то конец содержимого соприкасается с вертикальной осью выравнивания.
Это станет понятно из примера. Создадим следующую таблицу стиля:
td { text-align: "." }
td:before { content: "$" }
Создадим также HTML-документ, который имеет следующий фрагмент кода:
<table>
<col width="40">
<tr> <th>Плата за междугородние звонки
<tr> <td> 1.30
<tr> <td> 2.50
<tr> <td> 10.80
<tr> <td> 111.01
<tr> <td> 85.
<tr> <td> 90
<tr> <td> .05
<tr> <td> .06
</table>
Тогда согласно этой таблице стилей цифры, обозначающие доллары, будут выровнены относительно десятичной точки. Здесь также используется псевдоэлемент: before для вставки значка доллара перед каждой цифрой в строке.
Браузер клиента представит на странице эту таблицу следующим образом:
Плата за междугородние звонки
$1.30
$2.50
$10.80
$111.01
$85.
$90
$.05
$.06
Динамические эффекты строк и столбцов
Свойство visibility для элементов строк, групп строк, столбцов и групп столбцов может принимать значение collapse. В результате вся строка или весь столбец не будет отображаться и место, которое бы он занимал, будет доступно для размещения содержимого. Это позволяет динамически удалять строки или столбцы, не меняя расположения таблицы.
Данное свойство удобно использовать, если приходится добавлять на страницу некий блок, который должен, во-первых, обтекаться текстом, а во-вторых, быть выделенным фоном и границей.
Границы
Для задания границ вы можете использовать следующие свойства: border, border-collapse и border-spacing.
Свойство border задает стиль границы и размер. Стили границ будут подробно рассмотрены в следующих разделах. Размер границы задается целым числом и с указанием единицы измерения.
Свойство border-collapse позволяет выбрать модель границ таблицы. Значение separate задает модель с отдельными границами. Значение collapse задает модель с пересекающимися границами.
Свойство border-spacing может принимать сразу два значения длины. Заданная длина обозначает расстояние между границами соседних ячеек. Если указана одна длина, то она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, то первое определяет расстояние по горизонтали, а второе – по вертикали. Естественно, длины не могут быть отрицательными.
Рассмотрим простой пример задания границы для таблиц на странице:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
Этот CSS-код создаст вокруг таблицы выпуклую границу размером 10 пунктов. Поскольку задано значение separate свойства border-collapse, то для ячеек будут созданы вдавленные границы размером 5 пунктов. Расстояние между ячейками будет составлять 15 пунктов.
Стили границ
Помимо размера, CSS предоставляет возможность задавать стиль границ таблицы. Для этого используется свойство border-style. Рассмотрим список значений данного свойства и их описания.
• none – граница отсутствует.
• hidden – аналогично значению none, но в модели с пересекающимися границами имеет приоритет над любыми другими границами.
• dotted – граница представляется рядом точек.
• dashed – граница представляется рядом коротких линейных сегментов.
• solid – граница представляется единым сегментом линии.
• double – граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равна значению border-width.
• groove – граница выглядит вдавленной.
• ridge – в противоположность groove, граница выглядит выпуклой.
• inset – в модели с отдельными границами весь блок выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение groove.
• outset – в модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ridge.
Вы можете поэкспериментировать с различными значениями и посмотреть, как их отобразит ваш браузер. Подробнее про границы будет рассказано в разд. 9.7.
Пустые ячейки
CSS позволяет определить, отображать ли границы пустых ячеек. Вы можете задать отображение пустых ячеек, используя свойство CSS empty-cells. Это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству visibility присвоено значение hidden.
Чтобы все ячейки таблицы (в том числе и пустые) имели границы, можно использовать следующий CSS-код:
table { empty-cells: show }
9.5. Интерфейс пользователя
Таблицы стилей позволяют управлять и интерфейсом пользователя, то есть, например, задавать вид указателя мыши или определять стили шрифта и оформления, установленные по умолчанию на компьютере клиента.
Указатели мыши
Средства CSS позволяют задавать указатель мыши свойством cursor. Данное свойство может принимать следующие значения.
• auto – браузер определяет отображаемый указатель исходя из контекста.
• crosshair – простое перекрестие (напоминающее символ +).
• default – указатель, используемый в данной операционной системе по умолчанию. Зачастую представляется в виде стрелки.
• pointer – указатель, обозначающий ссылку.
• move – указатель, определяющий объект, который можно переместить.
• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – указатель, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла блока, используется указатель se-resize. Первые буквы в этом значении – это первые буквы частей света South и East.
• text – указатель, используемый при выделении текста. Зачастую представляется в виде вертикальной линии |.
• wait – указатель, показывающий занятость программы, когда пользователю необходимо подождать. Зачастую представляется в виде циферблата или песочных часов.
• help – указатель, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.