Графические браузеры по умолчанию выравнивают содержимое
подобных ячеек по центру и применяют к содержащемуся в них тексту
полужирное начертание. Эти параметры, разумеется, можно переопределить при
помощи CSS — но здесь важен не столько внешний вид, сколько семантика.
Помимо всего перечисленного, HTML предусматривает возможность
определять те или иные параметры для отдельных столбцов и для групп столбцов
таблицы.
Для этих целей предназначены теги и . Они должны
размещаться в самом начале описания таблицы, но после элемента
.
Нижеследующий пример позволяет установить для первого столбца таблицы
(вне зависимости от их общего количества) ширину 25% от горизонтального
размера всей таблицы и желтоватый цвет фона, а для второго — ширину 35%
и голубоватый фоновый цвет:
Предположим теперь, что мы хотим три первых столбца таблицы залить
желтоватым фоном и сделать одинаковыми по ширине. В этом случае надлежит
использовать тег с атрибутом span, содержащим количество столбцов,
для которых применяются те или иные свойства:
А теперь допустим, что за этим тегом следует такая конструкция:
Свойства, заданные в значении атрибута style, будут в таком случае
применяться к четвертому столбцу таблицы.
Глава 5. Таблицы в HTML
265
Тег преследует, прежде всего, цели логического объединения тех
или иных столбцов. Если первые три столбца таблицы следует сгруппировать
из соображений логики, то вместо конструкции
следует, по идее, использовать такую:
Подобную конструкцию все распространенные графические браузеры,
включая IE, будут интерпретировать корректно.
Если в таблице определен хотя бы один элемент .. ., то
элементы не могут располагаться на одном уровне с ним — все такие
элементы должны быть заключены в контейнеры .. .,
иначе документ не будет признан соответствующим стандарту.
Нижеследующий пример демонстрирует использование тегов и CSS-свойств,
о которых шла речь в этом разделе.
^> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>
^
Глава 5. Таблицы в HTML
267
| Texнoлoгии | rofl утверждения в качестве рекомендации W3C | |
|---|---|---|
| Языки pasMeTKH | HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 | |
| XHTML 1. K/td> | 200K/td> | |
| XHTML 2.0 | Oблaдaeт статусом Working Draft | |
| KacKaflHbie листы cmneM | CSS2 | 1998 |
| CSS2. K/td> | Oблaдaeт статусом Candidate Recoramendation | |
На рис. 5.7 показано, как описанная в листинге 5.6 веб-страница будет
отображаться браузером Mozilla Firefox, исправно поддерживающим свойство
caption-side. В Internet Explorer и Opera (даже восьмой версии) заголовок
таблицы будет сверху.
Все конструкции вышеприведенного кода читателю известны — мы до сих
пор ничего не сказали лишь о CSS-свойстве table-layout.
Это свойство позволяет задать один из двух возможных алгоритмов
рендеринга таблицы. Согласно сценарию, определяемому при помощи ключевого
слова auto (значение по умолчанию), ширина таблицы в целом и каждого из
столбцов по отдельности определяется в результате полного анализа всего
содержимого таблицы с учетом объема и специфики контента в каждой ячейке.
Значение fixed свойства table-layout, в свою очередь, назначает более
быстрый (и предпочтительный в случае необходимости контроля ширины
таблицы и ее столбцов с точностью до пиксела) алгоритм отображения таблицы, не
зависящий от особенностей содержимого ячеек, а принимающий в расчет
ЛИШЬ значения СВОЙСТВ, аналогичных width, border-width, border-spacing
268 Часть II.
|
5th Фев 2011
|
Теги:
|