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

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