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

31 July, 2004

XHTML/CSS, Перевод

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 (граница)

Атрибут 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 можна применять атрибут span. Это не сливает несколько ячеек в одну, как атрибуты rowspan или colspan atributes для ячеек. Это просто даёт простой путь для задания одного свойства сразу для нескольких столбцов.

<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, метод линеаризации таблиц.

Примеры

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

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

XHTML/CSS, Перевод

4 комментариев к “XHTML таблицы: Структура”

shvets | 1. 3 August, 2004

примеры? где примеры? у среднестатистического серфера, на ознакомление с вебстраничкой уходит секунд – 15-20, у меня вообще секунды 4-5. За это время я должен понять, насколько мне информация на ней интересна и буду ли я ее читать сейчас -же или “зайду позже”. За это время я не успел отыскать в тексте _жирную_красную_ссылку_ – “Пример1”, и не увидел скриншотов/анимаций. Соответсвенно станицу закрыл : ( В остальном, – нормальный перевод.

akella | 2. 3 August, 2004

большое спсб за мнение и здоровую критику.
но не стоит опережать события, примеры к этой статье это просто “правильный” код для таблиц.А примеры собственно их стилизации (они наверно имелись ввиду)во второй части статьи, которая этому и посвящена.А здесь хотя и описаны способы изменения их вида, но они касаются HTML кода(они здесь лишь для полноты), что крайне не хотелось бы приводить в качестве примера.
Но наверно ты прав, надо было сюда хоть какие-то да приткнуть.

cssing :: Архив :: XHTML таблицы: Структура | 3. 13 March, 2006

[…] чика Юрия “akella” Артюха. Блог Архив Ресурсы Про это XHTML таблицы: Структура Designing Da […]

cssing :: Архив :: XHTML таблицы: Добавляем стили | 4. 13 March, 2006

[…] ok перевод: 2004.08.04 Юрий Артюх Цель этой статьи из двух частей(первая и вторая) показать как можно создавать XHTML таблицы и эффективно использовать для них CSS. Во […]

Оставить комментарий