Применение веб-технологий стороны клиента для создания сайтов
td {
border: solid lpx #c00;
}
О :ГФ \ fi? # ‘@ |й «еда/*jjj.O п**м Щ
[Город [Население, тыс. чел.
1 Москва 110 383
!Ь~— 1
I |Санкт-Петероург|4 661
I Новосибирск 11 426 j
Рис. 5.2. Отображение таблицы, к которой применен лист стилей,
описанный в листинге 5.2
Результат интерпретации видоизмененного листа стилей представлен на
рис. 5.3.
Рис. 5.3. Отображение таблицы, оформленной при помощи листа стилей
из листинга 5.3
Глава 5. Таблицы в HTML
259
В случае использования модели форматирования с раздельными рамками для
всех ячеек таблицы свойство border-spacing позволяет нам контролировать
расстояния между ее ячейками. В качестве значения этого свойства может
выступать одна или две величины, заданные с использованием линейных
единиц измерения. В том случае, когда определена одна подобная величина,
она определяет расстояния между ячейками как по горизонтали, так и по
вертикали, которые при этом одинаковы. Если же аргумента два, то первый
применяется к горизонтальным расстояниям, а второй— к вертикальным.
К сожалению, Internet Explorer полностью игнорирует данное свойство.
Наш следующий пример немного сложнее рассмотренных выше— мы
назначаем толстую рамку для всей таблицы в целом, ячейки заключаем в
тонкие рамки, заливаем их фоновым цветом и определяем величину полей
вокруг содержимого, а в довершение ко всему определяем расстояния между
ячейками по горизонтали и вертикали.
¦ Листинг 5 А Л ист стилей, определяющий более ел ожное оформление таблиць||
table {
border-collapse: separate;
border: solid 2px #c00;
border-spacing: 5px lOpx;
}
td {
padding: Opx 5px;
border: solid lpx #c00;
background: #fffOcc;
}
Отображение таблицы, описанной в листинге 5.4, браузером Mozilla
Firefox 1.0, исправно поддерживающим свойство border-spacing, и браузером
Microsoft Internet Explorer 6.0, игнорирующим означенное свойство,
проиллюстрировано на рис. 5.4.
Еще одно полезное свойство, тоже, увы, не поддерживаемое браузером от
Microsoft, — empty-cell. Оно применяется при использовании раздельной
модели форматирования ячеек и определяет, будет ли отображаться рамка
вокруг пустой ячейки, не содержащей полезной информации (значение show
должно использоваться по умолчанию) или же не будет (значение hide).
Использование свойства empty-cell демонстрирует рис. 5.5.
Мораль — пустые ячейки при похожем раскладе желательно заполнять
(прочерками, неразрывными пробелами или другими подходящими по случаю
символами).
260 Часть II. Применение веб-технологий стороны клиента для создания сайтов
STrMStf
«^ .«.и.ЧчФчш.
| Город
|| Москва
[Санкт-Петербург
[Новосибирск
Население,
; 10 383
[4661
1416
тыс.
чел»
„iBlxii
Ajpwte Зщ. Иэфанно* Сервис Справка
"¦"¦- " %Л "-" обноеип» дойой | "Журнал
^^^фС^йв^
|Г°р°д. . .1
[Москва |
1 Санкт-Петчцбд)г ]
{Новосибирск ]
Население, тыс. чел. |
10 383 1
4 661 _!
1 426 ]
~3
демоне
|«(!#К
Рис. 5.4. Отображение таблицы из листинга 5.4 браузерами Mozilla Firefox 1.0
и Microsoft Internet Explorer 6.0
#€e$^Sta**d t^i^Heedtoa*
j Москва
j Санкт-Пет^)б>рг 4 661
| Новосибирск 1 426
Население, тыс, чел,
№*sr*r
» * # — ^ чО -.-=• 1 * S 4 ЧЧ-
6*4 m&m am* capa&a*
Нюед
¦*• > 0 a a,
Щтп г..
2 \examples\05\04\mdex.html
[Город
| Москва
| Санкт-Петербург
[Новосибирск
[Население.
[4 661
[1426
тыс.
челГ]
|
zzii
Ж
Рис. 5.5. Отображение таблицы, содержащей пустую ячейку и использующей лист стилей,
описанный в листинге 5.4, в Firefox и IE
Сложные таблицы с объединением ячеек
Таблицы правильной структуры на практике встречаются относительно
редко. Зачастую бывает необходимо растянуть те или иные ячейки на несколько
строк или столбцов.
Глава 5. Таблицы в HTML
261
Для этих целей в HTML предусмотрены атрибуты rowspan и coispan,
применимые к тегам, определяющим ячейки таблицы (
| и |
; о последнем теге
будет сказано чуть ниже). |
|---|---|
|
5th Фев 2011
|
Теги:
|
