CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

XHTML таблицы: Добавляем стили

Designing Data Part 2: Adding Style
автор: 2004.06.13 © Jonathan Snook
перевод: 2004.08.04 Юрий Артюх

Цель этой статьи из двух частей(первая и вторая) показать как можно создавать XHTML таблицы и эффективно использовать для них CSS.

Во второй части мы применим стили к структуре документа который мы создали в первой части.

Часть 2: Добавляем стили

Элемент TABLE

border

Свойство border аналогично элементу frame в HTML. Оно задаёт внешнюю границу таблицы, но не границу каждой ячейки.

border-collapse

Здесь лишь два значения:: collapse и separate.

При задании collapse, между ячейками нет никакого свободного места. И так как границы между смежными ячейками получаются общие, то есть вероятность, что у нас будет два разных стиля для одной границы. По этому поводу на W3C есть решение проблемы конфликтования границ, что бы помочь определить какой стиль будет показан. Вот как он выглядит, здесь каждая величина имеет преимущество над нижеследующей.

1. border-style(стиль границы) для hidden элементов
2. border-width (ширина границы)
   1. большие значения
      1. атрибут rules в HTML
      2. свойство border-width в стилях
      3. атрибут frame в HTML

      </ol>
      

      4. меньшие значения
         1. атрибут rules в HTML
         2. свойство border-width в стилях
         3. атрибут frame в HTML

         </ol>
           </li>
           </ol>
         

         4. border-style (стиль границы)
            1. double (двойная)
            2. solid (обычная)
            3. dashed (пунктир)
            4. dotted (точками)
            5. ridge
            6. outset
            7. groove
            8. inset

            </ol>
            

            9. элемент
               1. cell(ячейка)
               2. row(строка)
               3. row group(группа строк)
               4. column(столбец)
               5. группа столбцов
               6. таблица
            10. border-style для none
            Во первых, IE точно этим правилам не следует. Он даёт приоритет границе для всей таблицы над всеми остальными.Он так же воспринимает border-style для hidden, как border-style для none, отдавая преимущество всему остальному. Во вторых, нет никакого правила, какой цвет должен быть у спорной границы. Таким образом легко можно получить разное отображение под разными броузерами (я получил три разные картинки в броузерах в которых тестировал).

            Это не оговорено на W3C, но я добавил после тестирования в иерархию свойств то что под border-width.

            При раздельной же модели (задано separate) между границами ячеек есть пространство. Это значение стоит по умолчаниюи скорее всего то, что все привыкли видеть. Что бы увеличить расстояние между ячейками используйте свойство border-spacing property.

            Если задать border-collapse как separate, то Firefox и Opera игнорируют атрибут rules, и я не нашел никакоого стандарта наW3C который бы описывал это поведение.

            border-spacing

            Свойство border spacing может быть задано одним или двумя параметрами длины. Если задано одно значение то оно отражается на пространстве во все стороны. При двух значениях, первое отвечает за горизонтальные отступы (слева и справа от ячейки), а второе соответственно за вертикальные.

            Но, как всегда, наш добрый друг IE не поддерживает свойство border-spacing. Что означает, что мы остаёмcя при использовании старого доброго cellspacing в HTML с тем же результатом. Сразу успокою, cellspacing все еще входит в XHTML 1.0 Strict.

            Следует заметить, что цвет который появляется в пространcтве между ячейками, всегда фон таблицы. Задавая background для строк или ячеек вы никогда не измените цвет между ними.

            empty-cells

            Свойство empty-cells принимает два значения: show and hide. И определяет, будет ли видимой граница у пустой ячейки. Его можно так же применить практически к любому элементу таблицы, как для строк, так и для ячеек.

            IE, опять же не поддерживает свойство empty-cells. Это было бы смешно, если б так всех не достало к этому времени. К счастью, есть решение этой проблемы. Просто задайте свойства rules и frames в HTML (описано в первой части). Тогда любая граница примененная к ячейке через CSS появится.

            Обрабатываем столбцы: COLGROUP и COL

            Эти элементы уникальны в том, что ячейки не наследуют от них свойств. Таким образом только три свойства можно к ним применить: border, background, width и visibility. Эти свойства поддерживаются далеко не полностью, так что будьте готовы!

            border

            Если применить это свойство для colgroup правая сторона которого совпадает с границей таблицы, то в Опере она (граница) не будет прорисована. Задавая атрибут border в HTML как 0 или задавая frame как void, мы полностью так же теряем внешнюю границу таблицы.

            В Firefox, все работает как и должно.

            В IE, это свойство не поддерживается.

            background

            Это редкий случай, но Firefox единственный кто не поддерживает этого свойства. И Opera и IE поддерживают.

            UPDATE: Firefox 0.9 уже поддерживает это свойство. Ура!

            width

            Свойство width работает практически идеально во всех броузерах, где я тестировал. Исключение на этот рах составила Опера: для colgroup, она его не поддерживает.

            Но надо помнить, что когда свойство width примененл для colgroup, то оно влияет на размер каждого столбца внутри colgroup. К примеру, если задать width 200 пикселов для colgroup содержащей два столбца, то каждый из них будет по 200 пикселов, и всся colgroup 400 пикселов.

            visibility

            Когда задается для столбца или группы столбцов (colgroup) можно ставить лишь значение collapse. Но ни один из тестируемых не поддерживал это свойство.

            Выравнивание текста в ячейке

            Есть два свойства в CSS которые управляют выравниванием внутри ячейки. Это text-align (атрибут align в HTML) и vertical-align (атрибут valign). Эти свойства можно применить к любому элементу таблицы, кроме table и столбцов(colgroup and col) .

            Что бы выравнивать текст в столбце, надо одновременно несколько атрибутов (что бы это работало в большинстве броузеров. Применим align и valign атрибуты в HTML для тэгов colgroup или col (это как сказано в первой части не поддерживается Mozilla/Firefox). Нужно еще немного поднапрячься что бы это заработало и там.

            1. Установим id для загодовка столбца. Пример: <th id="qty">Quantity</th>
            2. становим атрибут headers таким же, как и id для столбца того. Пример: <td headers="qty">123</td>. Я не описал эти атрибуты в первой части, так как согласно W3C они более подходят для accessibility (доступности), которую я не хотел описывать в первой статье.ОднакоБ тут они нам пригодились.
            3. Теперь используя CSS, мы можем юзать селекторы для задания стилей. Пример: td[headers=qty] { /*сюда поместить стили*/ } Селектор по атрибуту работает в Mozilla, Firefox, и Opera...но не в IE.

            IE позволяет задавать шрифт и выравнивание на группу столбцов, что вообще говоря не оговорено в рекомендации CSS .

            Caption (заголовок)

            Caption можно стилизовать как и большинство других блочных элементов, можно использовать выравнивание и настройки шрифтов . Еще одно свойство изCSS может нам пригодиться: caption-side. Оно может иметь значение top или bottom и позволяет заголовку появляться над или под таблицей соответственно. Firefox пошел даже дальше, он поддерживает значения left и right. Я похож на заевшую пластинку, но IE не поддерживает caption-side.

            Margins и Padding

            Ячейки не имеют внешних отступов(margins), но имеют внутренние (padding). Вы можете применить margin для таблицы, что отразится на свободном пространстве вокруг неё. Firefox корректно отображал внешний отступ между заголовком и таблицей, тогда как IE и Opera применили margin вне заголовка (caption).

            Borders

            Когда вы в режиме separate (ячейки разделены) вы можете менять границы лишь для ячеек и таблицы. Стили для границ строк и столбцов будут проигнорированы. В collapsed режиме и Firefox и Opera позволяют задавать границы для строк и столбцов. IE воспринимает режим collapsed как separate mode и не позволяет задавать границы для строк и столбцов.

            Есть глюк в Opera, если у вас есть таблица thead, tbody,
            и tfoot и вы применили стили для границ для thead тогда они отразятся на верхней части tfoot.И наоборот если зададим для tfoot стиль, то он отразится на tbody.

            Теперь за дело

            Я надеялся остаться максимально информативным и не быть сухим. Я не затронул множество CSS свойств касающихся текста и селекторов типа :hover. Возможно я дополню свою статью в будущем.

            Оставляю вас с примерами, которые, я надеюсь, вдохновят вас попробовать что-нибудь новое. Для примеров я пошерстил web на предмет таблиц данных, и отформатировал по своему.

            • Посмотрите оригинал , а потом пример. Для этого примера я сохранил форматирование таким же. Оригинал использовал css-заданные тэги font которые конечно были не к месту. Я убрал все форматирующие тэги. Переместил заголовок в caption тэг и использовал CSS для задания границ. Только это уменьшило общий размер таблицы с 4k до менее чем 1.5k.
            • Я взял еще одну стандартную таблицу и сам её стилизовал. В этот раз размер с 9k до 4, в основном только из-за тэгов font. Но я также сэкономил на valign="top" для всех ячеек. С точки зрения стиля я оставил все довольно просто(мне нравится когда все просто(мне тоже - akella)). Я задал первой строке (thead) фон и применил padding для всех ячеек. я использовал атрибуты frame и rules, чтобы создать линии между строками таблицы. То же самон можно было сделать применив границы для ячеек. Последнее, что я сделал&mdashприменил фон (background) первого столбца. Что бы это сделать я добавил некоторые тэги (col) для определения столбцов. Далее я задал класс для первого столбца и фоновый цвет для этого класса.

            Заключение

            Дополнительная инфа:

            • Украшаем данные часть 1: Структура таблиц
            • Раздел таблиц на W3C
            • Линейка для таблиц на A List Apart
            • Полосатые таблицы на A List Apart

            Использованные броузеры:

            • Mozilla Firefox 0.8/0.9
            • Internet Explorer 6.0
            • Opera 7.5