CSS / 11. Верстка таблиц

Взглянув на название этой главы, вы, наверное, удивились: «Верстка таблиц? Разве не этого мы пытаемся избежать?» Да, пытаемся, но эта глава не о применении таблиц для верстки. Она о том, как в CSS планируются сами таблицы, и эта задача намного сложнее, чем может показаться на первый взгляд. Таблицы, по сравнению с остальным макетом документа, уникальны. В CSS2.1 только таблицы обладают способностью увязывать размеры элементов с другими элементами. Например, все ячейки строки имеют одинаковую высоту независимо от того, какое количество содержимого находится в каждой отдельной ячейке. То же справедливо и для ширины ячеек одного столбца. В верстке больше нет других таких примеров, когда элементы различных частей дерева документа оказывают влияние на размеры и компоновку друг друга столь непосредственно.
Статьи раздела '11. Верстка таблиц':
Автоматическая компоновка
Модель автоматической компоновки не так быстра, как фиксированная, но, вероятно, намного лучше знакома вам, потому что, по существу, аналогична модели, давно используемой HTML-таблицами. В большинстве современных агентов пользоват...
Анонимные объекты таблицы
Может случиться, что в языке разметки реализованы не все элементы, которые необходимы для полного соответствия представления таблиц их описанию в CSS, или автор забудет включить все необходимые элементы. Рассмотрим следующий HTML:...
Визуальная организация таблицы
Первое, что надо понять, – как CSS определяет организацию таблиц. Хотя эти сведения могут показаться элементарными, они имеют ключевое значение для овладения мастерством стилевого оформления таблиц. CSS различает элементы таблиц и...
Выравнивание
Совершенно непонятно почему, но выравнивание содержимого в ячейках описано намного лучше, чем высоты ячеек и строк. Это справедливо даже для вертикального выравнивания, которое может влиять на высоту строки. Самым простым является...
Высота
После всех этих усилий, затраченных на определение ширины таблицы, вы, вероятно, задаетесь вопросом, насколько же более сложным будет вычисление высоты. На самом деле с точки зрения CSS все совершенно просто, хотя разработчики бро...
Значения свойства display для таблиц
В HTML нетрудно понять, какие элементы являются частями таблицы, поскольку в броузеры встроена обработка таких элементов, как tr и td. В XML, напротив, по сути невозможно знать, какие элементы могут быть частью таблицы. Вот где в ...
Компоновка со сливающимися рамками
Для каждой ячейки отступы и содержимое располагаются внутри рамок, как и ожидалось. Что касается рамок между ячейками, то одна половина рамки располагается с одной стороны линии сетки, разделяющей ячейки, а вторая половина – с дру...
Обработка пустых ячеек
Поскольку каждая ячейка в визуальном смысле отделена от всех остальных ячеек таблицы, что делать с пустыми ячейками (т. е. не имеющими содержимого)? Тут есть две возможности, отраженные в значениях свойства empty-cells. Если свойс...
Основные заголовки
Основной заголовок таблицы представляет собой, как и можно ожидать, короткий фрагмент текста, описывающий суть содержимого таблицы. Следовательно, диаграмма биржевых котировок за четвертый квартал 2003 года могла бы иметь элемент ...
Отдельные рамки ячеек
В этой модели каждая ячейка таблицы отстоит от других на некоторое расстояние и рамки ячеек не сливаются друг с другом: table {border-collapse: separate;} td {border: 3px double black; padding: 3px;} cell one cell two ...
Первичность строк
CSS определяет свою модель таблицы как модель «первичности строк». Иначе говоря, модель предполагает, что авторы будут создавать языки разметки, в которых строки объявляются прямо. В то же время столбцы представляют собой производ...
Правила введения объектов
1. Если родителем элемента table-cell не является элемент table-row, то между элементом table-cell и его родителем вставляется анонимный объект table-row. Введенный объект будет охватывать все последующие сестринские элементы элем...
Правила организации таблиц
• Каждый блок строки включает одну строку ячеек сетки. Все блоки строк таблицы заполняют ее сверху вниз в порядке их размещения в исходном документе (за исключением блоков строк заголовка или нижнего заголовка, которые располагают...
Промежуток между рамками
Иногда требуется, чтобы рамки ячеек таблиц отстояли друг от друга на некоторое расстояние. Это легко осуществляется с помощью свойства border-spacing, предоставляющего более мощную замену HTML-атрибута cellspacing. В качестве знач...
Рамки ячеек таблицы
На самом деле в CSS определены две совершенно разные модели рамок. Модель отдельных рамок действует, когда ячейки отделены друг от друга с точки зрения компоновки. Другой вариант – модель сливающихся рамок, в которой между ячейкам...
Сливающиеся рамки ячеек
Модель сливающихся ячеек почти полностью соответствует традиционной верстке HTML-таблиц, когда никакого разделения ячеек не было, но она немного сложнее, чем модель отдельных рамок. Здесь также действуют некоторые правила, которые...
Слияние рамок
Когда рядом располагаются две или более рамки, они сливаются. Кстати, этот процесс не происходит случайным образом. Здесь действуют строгие правила, которые определяют, какие рамки одержат верх: • Если свойство border-style одн...
Слои таблицы
Для сборки представления таблицы CSS определяет шесть отдельных слоев, в которых размещаются различные части таблицы. В сущности, стили каждой части таблицы применяются к отдельным слоям. Таким образом, если элемент table имеет з...
Столбцы
Хотя модель таблиц CSS ориентирована на строки, столбцы все-таки играют важную роль в макете. Ячейка может принадлежать обоим контекстам (строки и столбца), даже если в исходном файле документа они происходят от элементов строк. ...
Фиксированная компоновка
Основная причина такой быстроты модели фиксированной компоновки в том, что в этом случае компоновка не зависит от содержимого ячеек таблицы. Она определяется значениями свойства width таблицы, столбцов и ячеек этой таблицы. Работу...

Страницы: 1 2