Правила CSS для визуального представление таблиц.
В таблицах можно управлять бордюрами двумя способомами, это правилами border-collapse и border
Правило border-collapse: управляет бордюром и имеет значения:
border-collapse:collapse - это правило по умолчанию, которое предписывает что бордюр может быть предоставлен для целого ряда ячеек.
border-collapse:separate - это правило предписывает что ячейки имеют разденьное описание, т.е. для каждой свое.
border-collapse:inherit - вычисленное П.А.
Применяется к серекторам тегов table и inline-table, это правило наследутся.
Поговорим о селекторах рядов и расмотрим правила которые мы изучали ранее. Селекторы ячеек являются потомками селекторов рядов и некоторые правила можно задавать рядам для ячеек.
Правило border В любой модификации. Подробности на странице "Бордюры в боксах".
Правило background В любой модификации. Подробности на странице "Цвет фона и текста".
Правило width Минимальная ширина ячейки. Подробности на странице "Размеры бокса".
Правило visibility Вырезает или отробраеж ряд ячеек Подробности на странице "Взуальные эффекты в CSS".
Все эти правила работают если селектору ряда установлено правило border-collapse с значение collapse.
Правило caption-side: управляте расположение заголовка(заголовочного тега(caption)) и имеет значения:
caption-side:top - значение по умолчанию, заголовочный тег выводится в верху таблицы.
caption-side:bottom - заголовочный тег выводится в низу таблицы.
caption-side:left - заголовочный тег выводится слева от таблицы.
caption-side:right - заголовочный тег выводится справа от таблицы.
caption-side:inherit - Вычисленоое значение П.А.
Правило table-layout: - предписывает как выводить размер таблицы и имеет следующие значения:
table-layout:auto - значение по умолчанию, которое указывает что не зависимо от того заданы ли размеры таблице, рядам или ячейке, свойство width понимать как минимальный размер и при переполнении по ширине раазмер может быть увеличен.
table-layout:fixed - фиксированая таблица, в этом случае таблица получается "железная" и размеры не увеличиваются
table-layout:inherit - Вычисленоое значение.
П.С. Не используйте значение table-layout:auto, потому что auto это ноль, тоже и table-layout:inherit, а вот table-layout:fixed поможет избежать множество конфликтов в дизайне.
Правило vertical-align: вам знакомо с "Высота строк в CSS" и выравнивание содержимого, это правило используется и в таблицах и есть альтернативой атрибута VALIGN, данное правило имеет следующие значения и смысл:
vertical-align:baseline - выровнивает контен по базовой линии первого ряда ячейки.
vertical-align:top - выравнивает по вехней линии.
vertical-align:bottom - выравнивает по нижней линии.
vertical-align:middle - выравнивает по центру.
Правило border-spacing: устанавливает ратояние между бордюрами ячеек, может иметь следующие значения:
border-spacing:10px - в единицах измерения как абсолютных так и относительных, отрицательное значение и в процентах запрещено. Если задан один размер то он распространяется на все черыре стороны, а если две то первая на верх и низ, а вторая опредеяет размер боковых отступов.
border-spacing:inherit на усмотрение П.А.
Правило empty-cells: применяется только к селекторам ячеек и управляет подавлением ячеей, например группе ячеек присвоенны какие либо визуальные правила, но одна или несколько ячеек не содержат контента и чтобы подавить эти эфекты применяется это правило с следующими значениями:
empty-cells:show - бордюр виден в пустых ячейках.
empty-cells:hide - бордюр скрыт в пустых ячейках.
empty-cells:inherit на усмотрение П.А.
Правило speak-header: применяется только к селекторам th и caption для предоставления таблиц звукомым браузерам. Данное правило имеет следующее значения:
speak-header:once - заголовок будет произноситься только один раз.
speak-header:always - заголовок будет произноситься перед каждой ячейкой.
speak-header:inherit на усмотрение П.А.
По таблицам у меня все. Все остальные эфекты применяются как к обычному боксу.