Общее описание
Таблицы обеспечивают возможность расположения многомерных данных по строкам и столбцам. Структура и содержание таблицы описываются на языке документа, а CSS позволяет описать правила ее отображения - либо визуального, либо звукового.
Визуальное отображение таблиц состоит в задании правил отображения заголовков и ячеек таблицы, их выравнивания относительно друг друга, изображения рамок вокруг них и т. д. При звуковом отображении таблицы задаются правила того, как должны произноситься заголовки и содержимое ячеек.
Строение таблиц в CSS основано на строении таблиц в HTML и наследует все их составляющие. Каждая таблица может иметь заголовок, содержащий ее краткое описание. Кроме того, она может иметь наздаголовок и подзаголовок. Тело таблицы состоит из строк, в свою очередь, состоящих из ячеек. Столбцы таблиц явно не описываются, а определяются строением строк: первая ячейка каждой строки относится к первому столбцу, вторая ко второму и т. д. Строки и столбцы могут объединяться в группы, которые могут иметь свои особенности отображения.
CSS не требует, чтобы язык документа включал в себя элементы для каждой из перечисленных составляющих таблиц. Например, XML-приложения не содержат предопределенных табличных структур. Тем не менее, авторы могут отобразить элементы на таблицы с помощью свойства display. Для присвоения табличной семантики произвольным элементам языка документа используются следующие значения этого свойства:
| Значение | Элемент HTML | Описание |
|---|
| table | TABLE | Блочная таблица. Элемент должен отображаться как блочный. | | inline-table | TABLE | Текстовая таблица. Элемент должен отображаться как текстовый. | | table-row | TR | Элемент должен отображаться как строка таблицы. | | table-row-group | TBODY | Элемент описывает группу строк таблицы. | | table-header-group | THEAD | Элемент должен отображаться как группа надзаголовков таблицы. Отображается перед всеми остальными группами строк таблицы. При выводе на принтер может использоваться в качестве надзаголовка при печати каждой страницы таблицы. | | table-footer-group | TFOOT | Элемент должен отображаться как группа подзаголовков таблицы. Отображается после всех остальных групп строк таблицы. При выводе на принтер может использоваться в качестве подзаголовка при печати каждой страницы таблицы. | | table-column-group | COLGROUP | Элемент описывает группу столбцов таблицы. Не отображается, но может влиять на отображение столбцов данной группы. | | table-column | COL | Элемент описывает столбец таблицы. Не отображается, но может влиять на отображение ячеек данного столбца. | | table-cell | TD, TH | Элемент должен отображаться как ячейка таблицы. | | table-caption | CAPTION | Элемент должен отображаться как заголовок таблицы. |
Таблица стилей для HTML по умолчанию задает следующие свойства элементов:
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }
| Поддержка : |  | Поддерживаются только table-header-group и table-footer-group (5.0+) | | |  | Не поддерживаются |
Селекторы столбцов
Ячейки таблиц принадлежат одновременно к двум контекстам: строкам и столбцам. При этом в тексте документа ячейки являются потомками строк, но не столбцов. Тем не менее, задание определенных свойств столбцов или их групп влияет на отображение ячеек. Такими свойствами являются:
border - Свойства рамок применяются к столбцам только тогда, когда таблица имеет слившиеся рамки. В этом случае обозреватель выбирает рамку для каждой границы ячейки с учетом рамок столбцов, как описано в этом пункте.
background - Свойства фона столбца применяются к его ячейкам только в том случае, когда и строка, и сама ячейка имеют прозрачный фон.
width - Это свойство задает минимальную ширину столбца.
visibility - Если это свойство для столбца имеет значение collapse, то ячейки этого столбца не отображаются, а те ячейки, которые распространяются на несколько столбцов, обрезаются. Кроме того, ширина таблицы уменьшается на ширину данного столбца. Подробности см. ниже в описании динамических эффектов. Другие значения этого свойства игнорируются.
Приведем два примера:
TABLE { border-style: hidden }
COL { border-style: none solid }
TABLE { table-layout: fixed }
COL.total { width: 5em }
В первом примере показано, как реализовать на языке CSS значение cols атрибута rules таблиц HTML (выделение рамкой только границ столбцов). Второй пример показывает, как задать фиксированную ширину столбца.
1 2 3
8 8 8
| |
*
Обратная связь