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

XHTML таблицы: Структура

Designing Data Part 1: Table structure
автор: 2004.06.08 © Jonathan Snook
перевод: 2004.08.02 Юрий Артюх

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

Содержание этой статьи (все на этой странице!)

• Структура таблиц
• Атрибуты
• Заключение

В первой части рассмотрим базовую структуру таблицы.

Часть 1: Структура таблиц

Первое дело в написании любой странички это поместить данные в семантический (подходящий по смыслу) и валидный XHTML. Давайте начнем с базового примера который вы скорее всего уже использовали.

<table>
 <tr>
   <th>Year</th> <th>Quantity</th>
 </tr>
 <tr>
   <td>2003</td> <td>50</td>
 </tr>
 <tr>
   <td>2004</td> <td>100</td>
 </tr>
 <tr>
   <td>Total</td> <td>150</td>
 </tr>
 </table>

Это простая таблица с 4-мя строками и ячейками первой строки обьявленными как head (заголовочные, просто самая первая строка) . Ничего особенного , но только этот шаг создаёт собственно таблицу.

Далее будем добавлять всякую информацию про таблицу и немного больше конкретизируем строки.

<table>
 <caption>Total Sales of Thingamajigs</caption>
 <thead>
 <tr>
   <th>Year</th> <th>Quantity</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
   <td>Total</td> <td>150</td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
   <td>2003</td> <td>50</td>
 </tr>

 <tr>
   <td>2004</td> <td>100</td>
 </tr>
 </tbody>
 </table>

Элемент caption (заголовок) описывает таблицу и для чего она вообще нужна. Тэг caption должен быть первым элементом после тэга table и является заголовком таблицы. В большинстве броузеров этот заголовок будет отображаться сверху по центру таблицы (над первой строкой) . Во второй части станет ясно как это изменять.

Кроме того мы разделили строки(TR=Table Row) на три группы: THEAD, TFOOT и TBODY. Но почему же tfoot идёт ПЕРЕД tbody?А это позволяет , к примеру, броузеру показывать первую строку (head, тэг thead ) и последнюю ( footer, тэг tfoot) , тогда как основная часть таблицы (body, тэг tbody) только загружается (пользователь раньше узнает , что именно показано на таблице).

Теперь мы описали наши TR, время приняться за столбцы. Для этого существует два элемента: COLGROUP (column group) и COL (column). Давайте опять изменим нашу таблицу добавив эту новую информацию.

<table>
 <caption>Total Sales of Thingamajigs</caption>
 <colgroup>
 <col />
 <col />
 </colgroup>
 <thead>
 <tr>
   <th>Year</th> <th>Quantity</th>
 </tr>

 </thead>
 <tfoot>
 <tr>
   <td>Total</td> <td>150</td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
   <td>2003</td> <td>50</td>
 </tr>
 <tr>
   <td>2004</td> <td>100</td>
 </tr>
 </tbody>
 </table>

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

Атрибуты

Теперь мы вступили на неверную почву. Теоретически большинство атрибутов которые я собиралься описать должны применяться через CSS. Однако, из-за неправильной поддержки и конфликтования CSS и HTML для некоторых атрибутов, я опишу их в этой части.

Атрибуты таблиц: rules (правила), frame (рамка), и border (граница)

Атрибут frame отвечает за самую внешнюю границу нашей таблицы. Может принимать такие значения: void, above, below, hsides, vsides, lhs, rhs, box and border. void — значение по умолчанию, и полностью убирает внешнюю границу таблицы (рамку). Можно почитать на W3C о том как эти значения влияют на отображение таблицы. Отображение границы оказалось разным во всех трёх броузерах в которых я тестировал. IE прорисовал 3d(обьемную) границу со всех сторон, Opera попросту черную границу, а Firefox серую слева и вверху и черную справа и внизу. Когда в IE было задано любое значение кроме void, он неверно понимая прорисовывал также границу каждой ячейки. Например, если задать lhs, то будет прорисована левая граница каждой ячейки. Firefox и Opera прорисовывают в этом случае все правильно. (Смотреть пример)

Атрибут rules имеет пять простых значений: none, groups, rows, cols, and all. Если задано значение none, то не будет прорисовано никаких линий между ячейками. Это значение задано по умолчанию. Интересно, что если не задать значение этого атрибута (rules), то любой border style (вид границы—solid,dotted,dashed и т. д.) (заданный через CSS) для colgroup или col не будет использоваться. Но стоит задать значение none как граница неожиданно возвращается на место. Значение groups задает границу (серую и разную в IE, 1px черную в Firefox и Opera) вокруг каждого thead, tfoot, tbody и colgroup. Изменяя значение на rows или cols прорисует границу между соответственными обьектами. Значение all — около каждой ячейки. Опять же, IE выделяется из всех и прорисовывает границу вокруг всей таблицы , если задано любое значение кроме none и атрибут frame не был задан.(Смотреть пример)

Если хотите использовать атрибуты frame или rules, лучше использовать их вместе.

Атрибуты столбцов: span, align, valign и width

<colgroup>
 <col />
 <col />
 </colgroup>
 <colgroup>
 <col />
 <col />
 <col />
 </colgroup>

<colgroup span="2" />
 <colgroup>
 <col span="2" />
 <col />
 </colgroup>

Атрибут span для colgroup показывает, что colgroup объединяет (spans) два столбца. Элементы col не используются когда есть атрибут span для colgroup. Если есть элементы col внутри colgroup, то атрибут span для colgroup игнорируется. Этот атрибут (span) для элемента col показывает наличие 2х столбцов.

Теперь рассмотрим атрибуты align и valign. Их можна применить как к colgroup, так и к col elements, и работают они в основном так же, как и их "ячеечные аналоги". Применяя align="right" для столбца должно задать выравнивание текста по правой стороне для всех ячеек столбца. Эти атрибуты (свойства) важны, так как нет стандартных аналогов в CSS для того что бы задать text-align (выравнивание текста) для col или colgroup. Таким образом, выравнивание текста должно быть задано на HTML уровне. К несчастью, Mozilla пока не поддерживает применение этого свойства для colgroup. IE поддерживает text-align на CSS уровне, хотя это и не оговорено в документации на W3C, но лучше придерживаться HTML подхода для лучшей совместимости.

Атрибут width (ширина) может быть задан в трёх форматах:

width="100" ширина в пикселах

width="20%" ширина в процентах

width="2*" относительная ширина, показывающая, что ячейка в 2 раза шире обычной. Относительный способ не работает в IE и Opera, поэтому его лучше избегать.

Следует помнить так же, что при использовании процентного или относительного метода в IE делает общую ширину талицы 100%, тогда как Mozilla и Opera в которых я тестировал, сжимают ширину до минимальной, с наполненными ячейками — что можно было предвидеть.

Во второй части, мы посмотрим как приукрасить эту таблицу используя CSS.

Заключение

Доступность (accessibility)

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

Примеры

• Таблицы и атрибуты

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

• Украшаем данные часть 2: Добавляем стили
• Определение таблиц в HTML4.01 Standard (на котором базируется XHTML 1.0 )
• Про таблицы на W3C

Броузеры в которых тестировалось:

• Mozilla Firefox 0.8
• Internet Explorer 6.0
• Opera 7.5