Главная страница статей --> Программирование, заработок, оболочки

Верстка таблиц

Источник: linuxcenter.ru

Введение

Для начала хочу обратить ваше внимание на название статьи. Я не ошибся и хочу рассказать именно о верстке таблиц, а не о верстке (сайтов) таблицами.

Как правило, при создании таблиц средствами HTML или XHTML, веб-мастера используют только теги <table>, <tr>, <td>. Хорошо еще, если для ячеек с заголовками применяется тег <th>, а не <td><b>…</b></td>.

На написание статьи меня «вдохновила» тема какого-то форума сети, в которой утверждалось, что тег <tbody> в таблице нужен только для красоты. Однако, это немного не так… Кроме указанных выше, существуют и другие теги, относящиеся к таблицам, которые помогут вам лучше структурировать табличную информацию.

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

Наш подопытный кролик

Рассмотрим пример таблицы, в которой используются все возможные теги. На примере данного XHTML-кода и будут объясняться теги, предназначенные для верстки таблиц. В смысл информации, содержащейся в таблице, лучше не вникать :)

<table>

  <caption>Уровень продаж карандашей</caption>

  <colgroup span="3">
    <col width="40%" align="center" />
    <col width="30%" />
    <col width="30%" />
  </colgroup>

  <thead>
    <tr>
      <th>Месяц</th>
      <th>Продано</th>
      <th>Выручка</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Период продаж</td>
      <td>Количество штук</td>
      <td>Доход в у.е.</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>Июнь</td>
      <td>30.000</td>
      <td>100</td>
    </tr>

    <tr>
      <td>Июль</td>
      <td>60.000</td>
      <td>200</td>
    </tr>
  </tbody>

</table>

Хочу заметить, что основные теги в таблице должны идти именно в таком порядке, т. е. после начала таблицы (<table>) сразу идет ее описание (<caption>), потом свойства столбцов таблицы (<colgroup>), потом заголовок таблицы (<thead>), нижняя часть таблицы (<tfoot>), содержащие информацию о столбцах таблицы и только после всего этого уже тело таблицы (<tbody>), в котором и содержатся все основные данные.

Из всего это многообразия для таблиц обязательными являются лишь элементы <table>, <tr> и <td>. Все остальные могут использоваться вами по мере необходимости. Однако стоит более подробно рассмотреть каждый тег.

<table>

Тут, думаю, и так все понятно. <table> является родительским элементом для всех остальных элементов таблицы, т. е. собственно и определяет таблицу.

<caption>

Этот опциональный (необязательный) элемент используется для текста заголовка таблицы (для более подробного описания рекомендуется использовать атрибут summary тега <table>). На одну таблицу может быть только один тег <caption>, который должен располагаться сразу после <table>.

<colgroup> и <col />

Это довольно редко используемые элементы. Однако они полезны, когда необходимо задать визуальные свойства столбцов таблицы, чтобы не прописывать одно и то же для каждой ячейки столбца по отдельности.

Элементы <colgroup> должны следовать сразу после <caption>. Если этого элемента нет, тогда после <table>.

Вернемся к нашему примеру, в данной таблице 3 столбца, что и указано в атрибуте span. Свойства каждого из столбцов задаются атрибутами тегов <col />. Столбцы описываются слева направо. Первый col задает свойства крайнего левого столбца таблицы и т. д.

В данном случае практическая выгода заключается в том, что одной строчкой задано выравнивание текста по центру для первого столбца. Таким образом мы избежали необходимости писать align="center" для всех 3 ячеек столбца. Может для 3х ячеек это и непринципиально. А вот если бы в таблице было строк эдак 100–200… Почувствуйте разницу!

Элемент <colgroup> используется для группировки <col /> и позволяет устанавливать свойства по умолчанию для всех вложенных в него столбцов. Описание столбцов из нашего примера можно было переписать так, логически отделив первый столбец с месяцами от второго и третьего:

<colgroup span="1" width="40%" align="center">
  <col />
</colgroup>

<colgroup span="2" width="30%">
  <col />
  <col />
</colgroup>

По аналогии к столбцам можно применять и свойства каскадных таблиц стилей с помощью различных селекторов (id, class, style, для всех тегов…). Например, мы хотим выделить текст в последнем столбце «Выручка» (деньги все-таки!) курсивом, тогда поступим так:

<colgroup span="1" width="40%" align="center">
  <col />
</colgroup>

<colgroup span="2" width="30%">
  <col />
  <col style="font-style: italic;" />
</colgroup>

Красота… :)

Атрибуты табличных тегов в этой статье не рассматриваются, однако на сайте www.htmlhelp.com вы можете прочесть об атрибутах тегов <colgroup> и <col />. Без атрибутов или CSS-стилей использование данных элементов бессмысленно.

Что именно использовать: разделение столбцов по группам и задание общих свойств группы или описание каждого столбца в отдельности, решать, конечно, только вам. Возможно, оптимальной будет своеобразная золотая середина — создание нескольких глобальных групп столбцов с определенными свойствами плюс определение некоторых специфических свойств уже в элементе <col /> для тех столбцов, где это необходимо.

Так или иначе, использование этих тегов несомненно упростит верстку и дизайн сложных объемных таблиц и избавит вас от мучительного вычисления того, к какому же столбцу относится определенная ячейка. Вы будете спасены от однообразного редактирования свойств определенных ячеек для изменений свойств столбца — отныне надо лишь изменить свойства соответствующего тега <col /> или <colgroup>.

Группировка строк таблицы: 3 основные группы

Всю информацию таблицы, содержащуюся в строках и ячейках, можно разделить на 3 части:

  1. <thead> — «шапка» таблицы, содержащая заголовки столбцов.
  2. <tfoot> — нижняя часть таблицы, сообщающая дополнительную информацию о столбцах или их итоговые данные.
  3. <tbody> — основная часть («тело») таблицы, где, собственно, и приводится вся основная информация.

Данные элементы должны прописываться в таблице именно в таком порядке. Теперь постараюсь рассказать подробнее о каждом из них.

<thead>

Этот опциональный элемент предназначен для группировки строк таблицы, содержащих различные заголовки. Ячейки в данном случае уместно определять с помощью <th>, но об этом ниже. <thead> должен следовать после <colgroup> или, в случае его отсутствия, перед предыдущим тегом. В таблице может быть только один элемент <thead>.

По информации www.htmlhelp.com группировка заголовков столбцов с помощью <thead> позволяет браузерам включать заголовки на каждой странице при распечатке объемных таблиц и оставлять заголовки в области видимости при скроллировании длинных таблиц на экране компьютера. Также при загрузке объемных таблиц при медленном соединении браузеры получают возможность отобразить заголовки еще до окончания загрузки основной части.

<tfoot>

Этот элемент во многом схож с <thead>, с той лишь разницей, что он предназначен для дополнительной характеристики столбцов или вывода их итоговых данных. Это опциональный (необязательный) тег. В таблице может быть только один элемент <tfoot>.

Использование <tfoot> позволяет браузерам включать дополнения к столбцам на каждой странице при распечатке объемных многостраничных таблиц и оставлять дополнения в области видимости при скроллировании длинных таблиц на экране компьютера. Также при загрузке объемных таблиц при медленном соединении браузеры получают возможность отобразить итоговые данные еще до окончания загрузки основной части.

Однако с использованием этого элемента связана одна проблема. Он определяется перед основной частью таблицы, поэтому старые браузеры (т. е. соответствующие только стандарту HTML 3.2), непонимающие этот тег, выведут сгруппированные в нем ряды таблицы на экран не после, а перед основной частью, что может нарушить смысл и структуру таблицы для пользователей устаревших браузеров. Все современные браузеры проблем с <tfoot> не имеют.

<tbody>

В этом элементе группируются все строки таблицы, содержащие основную информацию. При использовании <thead> и/или <tfoot> элемент <tbody> является обязательным. В противном случае его можно не использовать (что, как правило, и встречается в html-коде подавляющего большинства таблиц).

В таблице может быть несколько тегов <tbody>, что позволяет логически или визуально (путем применения разных стилей к разным <tbody>) разделить строки таблицы на несколько частей. В случае объемных и сложных таблиц это бывает часто необходимо. Для визуального разделения можно использовать и каскадные таблицы стилей. Тогда, как и в случае с <colgroup>, <tbody> избавит вас от трудоемкого процесса изменения свойств многочисленных строк таблицы. Design before you implement! :)

Табличные данные

Вот мы и вышли на финишную прямую — добрались до тегов, которые непосредственно задают данные таблицы:

  • <tr> — table row, ряд/строка таблицы:
    • <td> — table data, ячейка данных таблицы, т. е. часть столбца, ограниченная строкой.
    • <th> — table header, ячейка данных, содержащая заголовок столбца.

Более чем уверен, что эти теги вам хорошо знакомы, однако на всякий случай пробежимся кратенько и по ним…

<tr>

Элемент представляет собой часть тела таблицы и определяет строку таблицы, внутри которой прописываются данные в соответствующих ячейках.

Если в таблице нет <thead> и <tfoot> и всего один элемент <tbody>, который в данном случае можно явно и не задавать, тогда строки могут определяться сразу после <colgroup>, <caption> или, наконец, <table>.

<td> и <th>

Эти элементы содержат непосредственные данные таблицы и определяют ячейку, где они и находятся. <td> служит для задания ячейки основных данных, <th> — для ячейки-заголовка (преимущественно внутри <thead>). Если ячейка не является заголовком столбца, однако должна быть выделена, рекомендуется использовать элемент <td> с дополнительным форматированием: таблицы стилей, теги визуального выделения текста (<b>, <i>…).

Happy End

Вот и все. Мы рассмотрели все элементы, которые можно использовать при верстке таблиц. За пределами статьи остались многие интересные темы: описание атрибутов описанных выше тегов; CSS-свойства, связанные с таблицами (table-layout например) или даже свойства таблиц стилей, позволяющие верстать таблицы без использования описанных выше элементов!

О многом еще не рассказано, многого я еще и не знаю… Процесс познания бесконечен… Тогда почему же «end» все-таки «happy»? Хотя бы потому что все эти теги вполне адекватно воспринимаются последними версиями браузеров, а значит ваши старания не пропадут зря! ;)



Похожие статьи:
- США vs Ирак, vs интернет
- Absolute StartUp manager 2.1 оптимизирует автозагрузку и вашу компьютерную жизнь
- Ключевые запросы в поисковых системах на основе статистики Рунета
- «Пьяная» реклама на службе Internet
- Доступность текста в сети — определяем размер шрифта для верстки
- Крестовый поход софт-каталогов Рунета против варезных сайтов
- BK ReplaceEm — поиск и замена в текстовых файлах
- ATnotes — липкие листочки на рабочем столе Windows
- Квартира для вашего сайта
- Проблемы редизайна веб-сайтов
- Что такое пользовательский опыт и почему он так необходим любому сайту?
- Организация рабочего места веб-дизайнера
- Бесплатные CD-грабберы


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
Контакты
Редакция:
[0.001]