Визуальное отображение таблиц Расположение заголовка таблицы: свойство caption-side Синтаксис: caption-side: top | bottom | left | right | inherit Начально: top Применимо: к элементам типа table-caption Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Не поддерживается Не поддерживаeтся Свойство caption-side определяет расположение заголовка таблицы относительно тела таблицы при ее отображении. Оно может принимать следующие значения: top Заголовок отображается над телом таблицы. bottom Заголовок отображается под телом таблицы. left Заголовок отображается слева от тела таблицы. right Заголовок отображается справа от тела таблицы. Отображение заголовка над или под телом таблицы производится так же, как отображение двух последовательно расположенных блочных элементов. При отображении заголовка слева или справа от тела таблицы следует явно задавать его ширину свойством width, т. к. не ясно, что в данном случае означает значение auto, принятое по умолчанию. Горизонтальное выравнивание заголовка задается свойством text-align, а вертикальное - свойством vertical-align, которое должно иметь значение top, middle или bottom. В следующем примере заголовок таблицы размещается слева от нее, сама таблица центрируется (заданием левой и правой границам значения auto), и весь прямоугольник, объемлющий заголовок и тело таблицы, сдвигается влево на ширину заголовка. BODY { margin-left: 10em } TABLE { margin-left: auto; margin-right: auto } CAPTION { caption-side: left; margin-left: -10em; width: 10em; text-align: right; vertical-align: bottom } Задание ширины столбцов: свойство table-layout Синтаксис: table-layout: auto | fixed | inherit Начально: auto Применимо: к элементам типа table и inline-table Наследуемо: нет Проценты: не используются Устройства: визуальные Поддержка : Соответствует стандарту (5.0+) Не поддерживаeтся Свойство table-layout определяет способ вычисления ширины столбцов таблицы при ее отображении. Оно может принимать следующие значения: auto Автоматическое вычисление ширины столбцов. fixed Фиксированная ширина столбцов. Задание фиксированной ширины столбцов означает следующее. Обозреватель анализирует первую строку таблицы, и на основе этого анализа вычисляет ширины всех столбцов (последующие строки не учитываются, поэтому этот алгоритм обеспечивает более быстрое отображение таблицы, чем автоматический расчет ширин столбцов). В этом случае ширина таблицы должна быть задана явно свойством width, иначе производится автоматический расчет ширин. Вычисление фиксированной ширины столбцов производится так: Если для столбца задано свойство width и его значение отлично от auto, то оно задает ширину столбца. В противном случае, если для ячейки в первой строке таблицы задано свойство width и его значение отлично от auto, то оно задает ширину столбца. Между оставшимися столбцами поровну делится оставшееся пространство таблицы по горизонтали. Если при отображении последующих строк таблицы окажется, что содержимое какой-либо ячейки не помещается в столбец, то оно может быть обрезано. Обрезкой содержимого ячеек управляет свойство overflow. Автоматическое вычисление ширины столбцов занимает больше времени, так как требует просмотра всей таблицы, но дает более аккуратные результаты. Оно основано на том, что для каждого столбца просматриваются все его ячейки, и ширина столбца определяется шириной наибольшей части ячейки, которая не может быть разорвана переходом на новую строку. Если при этом для столбца задано свойство width и его значение отлично от auto, то оно задает минимальную ширину столбца. Задание этого значения в процентах означает процент от ширины всей таблицы. В следующем примере ширина столбцов таблицы фиксирована и равна 100px, 300px и 200px соответственно: <TABLE style="table-layout:fixed; width: 600px> <COL style="width: 100px"><COL style="width: 300px"><COL style="width: 200px"> ... </TABLE> Динамические эффекты при отображении таблиц Свойство visibility может принимать значение collapse для строк, групп строк, столбцов и групп столбцов. Это значение приводит к тому, что строка или столбец таблицы полностью исчезают с экрана, а пространство, которое они занимали, становится доступным для отображения другого содержания. Однако, подавление отображения срок или столбцов не вызывает перерасчета высот и ширин ячеек таблицы. Благодаря этому становится возможным динамически удалять строки и столбцы таблицы, не изменяя в остальном ее внешнего вида. <<<  Назад Вперед  >>>  1  2  3   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Границы, заполнители и рамки Позиционирование элементов Визуализация элементов Цвет и фон Шрифты Текст Генерация содержимого, нумерация и списки Страничные устройства вывода Звуковые таблицы стилей