Похожие статьи

CSS верстка сайта: макет в три колонки (42,31%)
Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Ох уж эти качалки (38,71%)
В статье рассматриваются достоинства и недостатки некоторых современных менеджеров закачки (программ для удобной загрузки файлов), которые активно используются опытными пользователями сети. Если вы еще не представляете себе, что такое download-менеджер, тогда эта статья для вас…

Версия сайта для печати средствами CSS (38,46%)
Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны; они больше доверяют бумаге — там и подпись поставить можно и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати. Благодаря CSS решение этой задачи не составит большого труда…

Автор: Земсков Юрий
www.СomputerLibrary.info

Дата публикации 17-07-2003 20:00
Статья просмотрена 16990 раз

Введение

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

Как правило, при создании таблиц средствами 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»? Хотя бы потому что все эти теги вполне адекватно воспринимаются последними версиями браузеров, а значит ваши старания не пропадут зря! ;)

Похожие статьи

Google и тематика сайта (37,84%)
Понятие «тематика» имеет множество значений, в Google «тема» является предметом поиска — «топиком» (тематическим разделом). Топик — это тематика повествования веб-страницы. Тематика страницы влияет на ее релевантность в Google…

Стиль Вашего сайта (37,5%)
Самое важное для проекта — его уникальность, узнаваемость. Это касается, как содержания, так и дизайна, т. е. того, как Вы преподносите материал. В статье описываются те тонкости дизайна, которые позволят посетителям Ваших проектов сразу же узнавать их автора или, по крайней мере, видеть «руку профессионала»…

Игровые сайты сети (37,5%)
Просто выбрать хорошую игру нелегко. Все они продаются теперь в одинаковых jewel-коробочках от «1C». И, что показательно, на каждой непременно написано, что это эпохальная и величественная игра. В результате можно наткнуться на жуткую самоделку. В общем, без описаний, тестов, обзоров, отзывов на форумах настоящему (да и ненастоящему тоже…) игроману никуда…

Сквозная навигация (37,5%)
Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

Честно слово! (37,04%)
Сегодняшний обзор о тех редких независимых сайтах, которые — в меру своих скромных способностей — стараются донести до посетителя правду о происходящем вокруг него в стране и мире. Исключительно эксклюзивная информация с эксклюзивных ресурсов…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (8) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

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

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

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