Web... Просто Web...

Новости

Сегодня в выпуске:

• Новости сайта и форума рассылки.
• Статья «Верстка таблиц».

Последние статьи на ComputerLibrary.info:

• Верстка таблиц [ Дизайн и верстка ]
• Крестовый поход софт-каталогов Рунета против варезных сайтов [ Разное ]
• Google FAQ для веб-мастеров [ Раскрутка ]
• Следи за собой, будь осторожен… [ Система ]
• Интернет-глупости [ Обзоры ]
• Доступность текста в сети — определяем размер шрифта для верстки [ Юзабилити ]
• Google и тематика сайта [ Раскрутка ]
• «Пьяная» реклама на службе Internet [ Раскрутка ]
• Манифест борцов за свободу интернет-форумов [ Разное ]
• Ключевые запросы в поисковых системах на основе статистики Рунета [ Раскрутка ]

Последние темы форума Forum.ComputerLibrary.info:

• Нужно поставить WIN98, а не могу. ХР — без проблем. HELP! [ Windows OS ]
• Помогите разабраться с матплатой kt-133 [ Hardware ]
• plz help to lamo;) [ *nix OS ]
• Откуда это? [ Разное ]
• Корсары II: Пираты Карибского моря [ Игры ]
• использование DBM — функций [ Web-программирование ]
• Холдинги рунета начали борьбу с варезными сайтами. [ Интернет ]
• Определение номера [ Software ]
• Установка php5-dev на apache 1.3.27 под win2000 localhost [ Разное ]
• Помогите выяснить скорость DSL-модема [ Разное ]

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

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

Введение

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

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

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

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

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

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

Хочу заметить, что основные теги в таблице должны идти именно в таком порядке, т. е. после начала таблицы (<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 /> и позволяет устанавливать свойства по умолчанию для всех вложенных в него столбцов. Описание столбцов из нашего примера можно было переписать так, логически отделив первый столбец с месяцами от второго и третьего:

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

Красота… :)

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

http://computerlibrary.info/view/article48/ — статья он-лайн.
http://computerlibrary.info/view/article48/print/ — версия статьи для печати.
http://computerlibrary.info/view/article48/comment/ — жду ваших отзывов и комментариев по поводу статьи.

Постскриптум

Уважаемые подписчики,

• если у вас есть какие-то вопросы, предложения, пожелания касательно рассылки, пишите на мой e-mail: yura@computerlibrary.info,
• если вам нравится рассылка, присылайте интересные статьи о веб-строительстве на мой e-mail. Все, достойное внимания, будет опубликовано,
• предложите своим друзьям и знакомым подписаться на рассылку, ведь чем больше читателей, тем больше я буду стараться,
• подписаться на другие мои рассылки можно с этой страницы,
• по поводу рекламы в рассылке пишите сюда же.

Удачного веб-строительства :),
С уважением, Юрий.