Оформление табличных данных

В этой главе:

1. Таблицы и визуальное форматирование
2. Ширина таблицы
3. Высота таблицы и вертикальное выравнивание
4. Границы ячеек
5. Отображение границ пустых ячеек

Как известно, таблицы представляют собой отношения между данными. Визуально форматирование таблиц происходит в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк (в XHTML – элементы THEAD, TFOOT, TBODY) и группы столбцов (COL, COLGROUP). Вокруг строк, столбцов, групп строк, групп строк и ячеек могут проходить видимые границы. Внутри ячейки данные могут выравниваться по вертикали или по горизонтали. Кроме того, данные могут выравниваться во всех ячейках или столбцах.

Всего в CSS 2 предусмотрено 5 свойств, относящихся исключительно к таблицам, однако к элементам таблиц применимы и многие общие свойства CSS, от border и padding до font и color. Однако действие ряда общих свойств при работе с элементами таблиц имеют свои нюансы. Кроме того, ряд значений для некоторых свойств CSS, например, display, имеют ряд значений, применимых только к элементам таблиц. В частности, это все значения свойства display с префиксом table, которые, как уже отмечалось, могут быть применены только к XML-документам.

Таким образом, таблицы во многом являются «вещью в себе», поэтому в этой главе мы рассмотрим не только специфичные для таблиц свойства CSS, но и само представление табличных данных с точки зрения каскадных таблиц стилей – в дополнение к той информации, что уже рассматривалась в рамках XHTML.

Таблицы и визуальное форматирование

Модель таблиц CSS основана на модели таблиц HTML 4.0, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается «ориентированной на строки», поскольку в документе явным образом определяются именно строки, а не столбцы. Столбцы же определяются только после указания всех строк: первая ячейка строки относится к первому столбцу, вторая – ко второму и т.д. Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться общая граница).

Таким образом, таблица состоит из заголовков, строк, групп срок, столбцов, групп столбцов и ячеек. Давайте вспомним все типы визуального представления, относящиеся к таблицам, а также элементы XHTML, соответствующие таким типам, для чего обратимся к таблице 3.8.

Очевидно, что все виды отображения, принятые в CSS, прочно связаны с определенными элементами XHTML. Это и не удивительно, ведь XHTML – это тот же HTML 4.0, который, с одной стороны, внес ясность в табличную модель, а с другой – появился на год раньше, чем CSS 2. Единственное новшество – это тип inline-table, который делает таблицу элементом строки. Поскольку в XHTML для этого не предусмотрено специального тега, то такие таблицы всегда определяются с использованием CSS:

Впрочем, справедливости ради, следует отметить, что такой тип таблиц (по крайней мере, для XHTML) поддерживается только последними версиями браузеров (разве чтов Opera поддержка появилась еще в 7-й версии). Чтобы в этом убедиться, посмотрите файл Part_3\Tables\itable.html в различных программах просмотра: при правильном построении таблица должна находиться в одной строке с остальным текстом.

Известно, что ячейки таблицы принадлежат двум контекстам: строкам и столбцам. Однако, как уже отмечалось, в исходном документе ячейки являются наследующими элементами строк, а не столбцов. Но, тем ни менее, на ряд свойств ячеек оказывают влияние свойства столбцов. В частности, к таковым относятся border, background, width и visibility. При этом свойство visibility может принимать значения visible и collapse, а не visible и hidden, как для других элементов. А назначаемое колонкам свойство background будет иметь силу только в том случае, если строки и ячейки таблицы имеют прозрачный фон. Связано это с тем, что все элементы таблицы имеют предопределенное позиционирование по слоям.

Всего в таблице имеется 6 слоев. Самым нижним является собственно контейнер таблицы. За ним следуют: группы колонок, колонки, группы строк, строки и, наконец, собственно ячейки. При этом не важно, указаны ли явно все эти элементы (довольно часто колонки и группы колонок и строк не указывают), поскольку любой браузер, поддерживающий хотя бы HTML 4.0, считает, что они все равно есть – подобно тому, как подразумевается наличие тегов HTML, HEAD и BODY в любом документе HTML. Соответственно, если задать фон для таблицы в целом, а затем указать собственный фон для строк или ячеек, то общий фон виден не будет. Исключение составят лишь области, не занятые ячейками – например, пространство между ними.

Отдельным от таблицы является блок заголовка, формируемый в XHTML элементом CAPTION. Он представляет собой отдельный блок, располагающийся отдельно от собственного блока таблицы, но при этом заголовок и таблица вместе образуют общий анонимный блок. Последнее важно с точки зрения позиционирования, поскольку, например, при обтекании в качестве границы табличного блока будет выступать не сама таблица, а именно такой анонимный блок, образуемый таблицей вместе с заголовком. Разумеется, все это верно только для случая, когда заголовок определен в исходном документе.

Для выравнивания заголовка в CSS предусмотрено свойство caption-side. В CSS 2 было определено 4 вида выравнивания: по верху (top), по низу (bottom), а так же по левому (left) и по правому (right) краям. Однако в спецификации CSS 2.1 последние два значения исчезли, а поддержка такого расположения заголовка за все время существования CSS 2 была обеспечена лишь браузерами Mozilla.

Примеры расположения заголовков, а заодно – и слоев можно посмотреть в файле layers.html.

Таким образом, мы рассмотрели ряд принципов визуального форматирования таблиц, а так же одно из свойств CSS, относящихся только к таблицам – caption-side.

Выравнивание таблиц

Значение по умолчанию: top. Наследуемые значения: да. Применяется: к главному заголовку таблицы. Совместимость: все, кроме MSIE 6-7.

Ширина таблицы

В отличие от других элементов, ширина таблицы далеко не всегда определяется значением свойства width. Дело в том, что если автоматический подбор ширины действует для других типов блоков только в тех случаях, когда ширина не указана, то для таблиц всегда действует специальный алгоритм, воспринимающий указанную в свойстве width ширину как минимальную, а реальные размеры вычисляются на основе реального содержимого. Фактически, для таблиц свойство width действует как свойство min-width для других блоков.

Тем не менее, в CSS 2 имеется свойство, позволяющее более жестко управлять отображением таблиц это – table-layout. Оно может принимать 2 значения – auto (принято по умолчанию) и fixed. Соответственно, в первом случае размеры таблицы рассчитываются браузером исходя из содержимого ячеек, а во втором будут учтены только заданные явно ширина столбцов и таблицы в целом. Таким образом, при надлежащей аккуратности (т.е. если суммарная указанная ширина столбцов будет не больше, чем ширина таблицы) можно действительно рассчитывать на то, что ширина таблицы будет именно такой, как указано в свойстве width. Рассмотрим оба варианта расположения таблиц, обратившись к листингу 3.10.

Листинг 3.10. Автоматическое и фиксированное размещение таблиц

Здесь задано 2 класса таблиц, один – с автоматическим, а второй – с фиксированным размещением. Для обоих классов определена ширина в 160 пикселей. В HTML-части определены 2 аналогичные таблицы, первая из которых имеет класс с автоматическим размещением, а вторая – с фиксированным. Очевидно, что отведенного размера (менее 40 пикселей на столбец) не хватит для того, чтобы вывести содержимое. Соответственно, просмотрев пример в браузере мы увидим, что первая таблица была расширена приблизительно до 220 пикселей (рис. 2.17, сверху) – это типичное поведение всех современных браузеров. В то же время такое «типичное поведение» нередко оказывается ненужным.

Рис. 3.17. Варианты размещения (вычисления размеров) таблиц

Зато вторая таблица получает именно ту ширину, которая была указана. При этом не вместившееся содержимое ячеек накладывается друг на друга (по крайней мере, в Mozilla-браузерах – см. рис. 2.17), что и не удивительно, т.к. значением по умолчанию вступающего тут в силу свойства overflow является visible. Впрочем, таблицы – есть таблицы, и в MSIE и Opera для таблиц сделано исключение, в результате чего в этих браузерах не вмещающееся содержимое обрезается. Так что для получения более предсказуемого результата в различных программах просмотра лучше подстраховаться и указать тип переполнения явно:

В то же время, если бы мы для второй таблицы задали явно ширину строк, используя ли элементы COL или COLGROUP, или же указывая ширину самих ячеек, то размер таблицы все-таки мог бы измениться. Допустим, мы укажем ширину столбцов по 45 пикселей – в результате размер таблицы превысит указанное нами значение, однако, хотя этого размера все равно будет не совсем достаточно для полноценного (без переполнения) отображения ячеек, дальнейшего увеличения ширины не произойдет. Но если бы в качестве мы указали то же самое в таблице с автоматическим размещением, то указанные 45 пикселей браузер воспримет как благое пожелание, и учтет лишь, что ширина всех столбцов должна быть одинаковой, но все расширит их до необходимого размера (в рассматриваемом примере – около 50px).

Еще одним важным моментом является то, что за определяемую при помощи свойства width ширину таблицы принимается размер таблицы вместе со всеми внутренними границами, включая рамки и расстояния между ячейками.

Если теперь вернуться к варианту автоматического размещения таблиц, то следует заметить, что такой алгоритм является не только менее предсказуемым, но и гораздо более медленным, особенно в случае объемных по содержанию таблиц. Дело в том, что браузер должен предварительно загрузить всю таблицу, а к ее отображению приступает только после того, как все содержимое будет проанализировано. Тем не менее, оба варианта имеют полное право на жизнь, в зависимости от того, в каком контексте применяется конкретная таблица.

Высота таблицы и вертикальное выравнивание

Подобно ширине, высота таблицы может быть намечена при помощи свойства height, заданного для таблицы. Однако в конечном итоге высота таблицы всегда вычисляется автоматически, и свойство height лишь ограничивает ее минимальную высоту – вариантов с фиксированным размещением для размеров по вертикали в CSS не предусмотрено. В результате высота таблицы складывается из сумм высот ее строк, которые, в свою очередь, либо вычисляются автоматически, либо задаются при помощи свойства height – последний вариант (т.е. указание высоты для ячейки в каждой строке) является единственной возможностью повлиять на высоту таблицы в целом.

Но здесь мы можем рассмотреть другой аспект, связанный с размерами по вертикали. Это – свойство CSS vertical-align. Хотя оно и не связано напрямую с таблицами (и, более того, имеет ограничения при воздействии с ячейками таблиц), именно для замены предназначенного для строк и ячеек таблиц HTML-атрибута VALIGN оно, в первую очередь, и предназначается.

Итак, свойство vertical-align для ячейки таблицы определяет ее выравнивание в строке. Содержимое каждой ячейки имеет базовую линию, верх, средину и низ (так же, как и сама строка). Соответственно, среди допустимых значений этого свойства имеются baseline, top, middle и bottom. Прежде всего, разберемся с базовой линией – baseline. Применительно к таблицам за базовую линию ячейки принимается базовая линия первого линейного блока. На практике это означает, что если есть 2 выровненные по базовой линии ячейки, причем в первой размер шрифта больше, чем во второй, то базовая линия, по которой выравнивается выводимый текст, будет одинаковой в обеих ячейках.

Значением по умолчанию для свойства vertical-align является baseline, но тут вновь сказывается специфика таблиц: если ни для одной из ячеек в строке не указано явно свойство vertical-align со значением baseline, то базовая линия вычислена браузером не будет. Соответственно, вывод таблицы с выводом по умолчанию и с явно заданным выравниванием по базовой линии будет отличаться, в чем несложно убедиться, создав таблицу, содержащую строки без вертикального выравнивания и с выравниванием по базовой линии (см. файл valign.html). Если такую таблицу дополнить строками, выровненными по 3 остальным вариантам, то можно убедиться, что на самом деле, браузеры выравнивают содержимое ячеек по середине (рис. 3.18).

Рис. 3.18. Варианты вертикального выравнивания ячеек

Если теперь немного отвлечься от таблиц, то можно отметить, что значения свойства vertical-align помимо уже рассмотренных, могут быть следующими:

• sub – Осуществляется смещение базисной линии вниз до уровня, отведенного для нижних индексов родительского блока;
• super – Осуществляется смещение базисной линии вверх до уровня, отведенного для верхних индексов родительского блока;
• text-top – Осуществляется выравнивание верхней границы по верхней же кромке шрифта родительского элемента;
• text-bottom – Осуществляется выравнивание нижней границы по нижней же кромке шрифта родительского элемента.

Кроме того, в качестве значения для vertical-align допустимо указывать размер или процентное значение. В таком случае смещение будет происходить вверх (или вниз – в случае отрицательного значения) на заданную величину относительно базовой линии.

Что же до нечисловых значений, то, например, смысл значений sub и super сводится к тому же, что и использования элементов SUB и SUP в XHTML, с той лишь разницей, что задаваемое при помощи CSS смещение не влияет на размер шрифта:

Это будет выведено браузером примерно так:

Основной текст, _{нижний индекс (мелкий)} еще текст нижний индекс (нормальный).

Если же возникнет необходимость сделать нижний или верхний индекс таким же, как при использовании HTML, то достаточно добавить определение размера кегля:

Подводя итог по вертикальному выравниванию, можно отметить, что такое свойство, как vertical-align, на практике оказывается востребованным именно в контексте оформления табличных данных, поскольку именно выравнивание по высоте чаще всего позволяет получить более наглядную и аккуратно выглядящую таблицу.

Свойства valign

Значение по умолчанию: baseline (для ячеек таблиц – middle).
Наследуемые значения: нет.
Применяется: к ячейкам таблицы и строковым блокам.
Совместимость: все.

Границы ячеек

Подобно тому, как имеется 2 варианта размещения таблиц, границы между ячейками в таблицах так же могут быть одного из 2-х типов: с отдельными (separate) или пересекающимися (collapse) границами. За выбор модели границ отвечает свойство CSS border-collapse, которое, соответственно, может принимать значения collapsed или separated. Интересно отметить, что если в CSS 2 за значение по умолчанию было принято collapsed, то в CSS 2.1, с оглядкой на реальное положение вещей (т.е. на то, как браузеры выводят таблицы без CSS), за таковое приняли separated. Чтобы разобраться с вариантами вывода границ, обратимся к листингу 3.11.

Листинг 3.11. Варианты границ

Если теперь посмотреть на пример построения таких таблиц в браузере, то можно будет убедиться, что в первом случае каждая ячейка имеет собственную границу со всех сторон, а во втором смежные ячейки имеют общую линию границы (рис. 3.19).

Рис. 3.19. Отдельные и пересекающиеся границы ячеек

Кроме того, общая граница таблицы (если она, конечно, определена), так же будет смежной с внешними границами приграничных ячеек.

Поскольку в модели отдельных границ каждая ячейка имеет собственные границы, то логично было бы предположить, что можно управлять расстоянием между внешними границами ячеек. И если средствами HTML это делается при помощи атрибута CELLSPACING, то в CSS для этого имеется свойство border-spacing. Созданное таким образом межъячеечное пространство заполняется фоном элемента таблицы (это вы уже могли видеть на примере слоев в файле layers.html).

ПРИМЕЧАНИЕ
Очевидно, что в случае с ячейками свойство border-spacing фактически является эквивалентом свойства margin для остальных элементов. А вот для определения внутреннего отступа по-прежнему можно использовать свойство padding (или же атрибут CELLPADDING применительно к HTML).

Здесь остается отметить, что свойство border-spacing имеет смысл применять лишь в том случае, когда используется модель таблицы с раздельными границами ячеек, поскольку в противном случае межъячеечных интервалов просто не будет.

Так же следует принять к сведению, что для строк, столбцов и их групп не может быть границ. Дело в том, что даже в случае, если вы указали, что границы должны проходить, скажем, по строкам (например, присвоив HTML-атрибуту RULES значение Rows), границы все равно будут принадлежать самим ячейкам, а не абстрактной линии, проходящей меду двумя их рядами.

Свойства border-collapse и border-spacing

Значение по умолчанию: border-collapse – separate; border-spacing – 0.
Наследуемые значения: да.
Применяется: к таблицам.
Совместимость: все.

Отображение границ пустых ячеек

В завершение темы таблиц с отдельными границами между ячейками рассмотрим такой случай, когда требуется выводить границы даже в том случае, когда ячейка является пустой. Под термином «пустая ячейка» понимается случай, когда ячейка не содержит никакой информации: т.е. либо вообще ничего, либо только пробельные символы. Как вам, наверное, уже известно, браузеры практически игнорируют такие ячейки при выводе таблиц – отдельные пустые ячейки выглядят просто как пустое место, а если в строке все ячейки окажутся пустыми, то вся строка будет сжата практически до нулевой высоты.

Чтобы проиллюстрировать такое поведение, возьмем за основу первую таблицы из предыдущего примера (листинг 3.11) и модифицируем ее таким образом, чтобы в первой строке осталась только одна непустая ячейка, а во второй непустых ячеек не было вовсе, после чего добавим еще одну, третью строку:

Если теперь открыть файл с такой таблицей в браузере, то можно будет убедиться, что в первой строке очерчена границей лишь первая ячейка, правее которой находится пустое пространство, а о существовании 2-й строки можно только догадываться. И хотя такое положение вещей и кажется привычным, не всегда это удобно. В таком случае следует использовать свойство empty-cells, которое может принимать одно из двух значений – hide (скрывать) и show (показывать).

Так что теперь мы можем модифицировать таблицу вновь, добавив в описание стиля это свойство с нужным значением:

Результаты построения обоих вариантов таблиц можно посмотреть в файле empty.html.

Остается заметить, что в случае с пересекающимися ячейками все возможные границы видны всегда, вне зависимости от значения свойства empty-cells. Однако, при этом возникает такой резонный вопрос, как быть в том случае, если пересекающиеся границы имеют разное оформление? В таком случае на помощь нам (и разработчикам браузеров) приходит описанный в CSS 2 алгоритм разрешения «пограничных» конфликтов. Суть его сводится к следующим 4 пунктам:

1. Границы, для свойства border-style которых установлено значение hidden, имеют приоритет над всеми остальными смежными границами: все другие границы в указанном месте не отображаются.
2. У границ, имеющих стиль none, самый низкий приоритет. Только если свойства границ всех ячеек, относящихся к этому краю, имеют значение none, границы не будет (но не забывайте, что значение none используется для стиля границы по умолчанию).
3. Если ни один из стилей не имеет значение hidden и хотя бы один из них имеет значение, отличное от none, то «побеждают» более широкие границы. Если у нескольких границ свойства border-width имеют одинаковые значения, стили применяются в следующем порядке: double, solid, dashed, dotted, ridge, outset, groove и inset (по убыванию приоритета).
4. Если стили границ отличаются только цветом, тогда стиль, заданный для ячейки, имеет приоритет над стилем строки, стиль строки – над стилем группы строк, столбца, группы столбцов и таблицы.

Пример разрешения конфликтов вы можете посмотреть в файле conflict.html.

На этом знакомство как со свойством border-collapse, так и со спецификой таблиц в рамках CSS вообще можно считать оконченным – ведь все 5 табличных свойств нам уже знакомы!

Свойства empty-cells

Значение по умолчанию: hide.
Наследуемые значения: да.
Применяется: к таблицам.
Совместимость: кроме MSIE 6-7.

2011-06-21 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Оформление текста в CSS | Генерируемое содержимое и списки CSS »