Введение
Для начала хочу обратить ваше внимание на название статьи. Я не ошибся и хочу рассказать именно о верстке таблиц, а не о верстке (сайтов) таблицами.
Как правило, при создании таблиц средствами 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 части:
- <thead> — «шапка» таблицы, содержащая заголовки столбцов.
- <tfoot> — нижняя часть таблицы, сообщающая дополнительную информацию о столбцах или их итоговые данные.
- <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»? Хотя бы потому что все эти теги вполне адекватно воспринимаются последними версиями браузеров, а значит ваши старания не пропадут зря! ;)