HTML / 10. Таблицы

Новейшие теги таблицы

Хотя простую таблицу можно создать быстро, сложные таблицы с меняющимися стилями рамок, скользящими заголовками и макетирова-нием столбцов нелегко было cконструировать в старой модели таблиц HTML 3.2. Microsoft отчасти преодолел этот недостаток, добавив в Internet Explorer версии 3.0 множество элементов управления макетом таблицы. Эти очень полезные расширения вошли в стандарт HTML 4.0 и, следовательно, в XHTML. Они предоставляют возможности группировки строк и создания скользящих заголовков так же, как и возможность макетирования столбцов.

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

Тег <thead>
Тег <thead> используется для определения группы заголовочных строк. Этот тег может появляться в теге <table> только один раз – в самом начале. В теге <thead> можно поместить один или несколько тегов <tr>, определяющих строки табличных заголовков. Тогда броузер, поддерживающий стандарты HTML 4/XHTML, будет повторять эти заголовочные строки при распечатке таблицы или при отображении ее в нескольких разделах. В частности, он будет повторять эти строки на каждой странице, если таблица занимает больше чем одну страницу.

Закрывающий тег </thead> в HTML не является обязательным. Поскольку тег <thead> появляется в таблице только там, где, предположительно, другие строки будут обозначены как входящие в тело или в нижний колонтитул таблицы, тег <thead> автоматически закрывается, когда броузер встречает теги <tbody> или <tfoot> либо закрывающий тег таблицы.Многие атрибуты тега <thead> действуют так же, принимают те же значения и влияют на содержимое включенных в <thead> тегов <tr> точно так, как если бы они были применены по отдельности в каждой строке. К примеру, атрибут align принимает значения left, right и center, управляя выравниванием текста по горизонтали во всех заголовочных ячейках. Подобным же образом атрибут valign принимает значения
top, middle, baseline (только для Internet Explorer) и bottom, предписывая вертикальное выравнивание текста во всех заголовочных строках. Если какие-либо выравнивания или стили не определены, броузер центрирует заголовочный текст по вертикали и по горизонтали в соответствующих ячейках, что эквивалентно спецификации align=center
и valign=middle в каждой ячейке. Разумеется, определения, относящиеся к отдельным строкам и ячейкам, так же как и определения таблиц стилей, имеют приоритет перед определениями в <thead>.

Тег <tfoot>
Тег <tfoot> используется для создания в таблице группы строк нижнего колонтитула (подвала). Тег <tfoot> может появляться в теге <table> только один раз, перед самым концом таблицы. Подобно тегу <thead> он может содержать один или несколько тегов <tr>, определяющих те строки, которые современные броузеры будут рассматривать как нижний колонтитул таблицы. Определенные таким образом строки броузер повторяет на каждой физической и виртуальной странице, на которые окажется разбита таблица. Чаще всего броузер повторяет подвальные строки таблицы внизу каждой страницы при распечатке таблицы, занимающей несколько страниц.

Закрывающий тег </tfoot> не является обязательным в HTML, так как нижний колонтитул заканчивается на следующем теге <tbody> или вместе с таблицей.

Тег <tbody>
Используйте тег <tbody> для разбиения таблицы на фрагменты. Тег <tbody> содержит одну или несколько строк, образующих группу в со-ставе таблицы. Вполне допустимы таблицы без тега <tbody>, но если он был включен в таблицу, то их, вероятно, окажется не менее двух. Выделив таким образом группу строк, можно отделить ее от предшествующих и последующих строк линейками специальной толщины. Внутри тега <tbody> могут содержаться только определения строк с применением тега <tr>. И по определению фрагмент <tbody> замкнут. Например, нельзя объединить ячейки одного фрагмента <tbody> с другим.Закрывающий тег </tbody> не является обязательным в HTML, поскольку фрагмент завершается с появлением очередного тега <tbody> или тега <tfoot>, или с концом таблицы. У <tbody> так же много атрибутов, как у <tfoot>, но они не поддерживаются даже популярными броузерами. Если вы хотите применить к этому фрагменту особое выравнивание, вам понадобится определить его для каждой строки в теге <tbody>.

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

По умолчанию Internet Explorer ничего особенного не делает с рамками вокруг верхнего и нижнего колонтитулов и фрагментов таблицы. Применяя в теге <table> атрибут rules, можно, однако, провести более толстые линии между разделами <thead> и <tbody>, между разделами <tbody> и между <tbody> и <tfoot>, помогая тем самым пользователю разобраться в организации таблицы.

К примеру, вот простая таблица, которую вы уже видели в этой главе, но теперь в нее добавлены верхний и нижний колонтитулы. Следует отметить, что мы опустили множество закрывающих тегов, чтобы текст стал короче и его было легче читать. Это допустимо в HTML, но в документе, соответствующем XHTML, эти теги должны появиться:

<table border cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption><thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
</tr>
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
</tr>
</thead>
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
</tr>
</tfoot>
<tbody>
<tr align=center>
<th rowspan=2>Gender
<th>Male
<td>73%
<td>27%
</tr>
<tr align=center>
<th>Female
<td>16%
<td>84%
</tr>
</tbody>
</table>

Получившаяся таблица в том виде, в каком ее выведет Opera. Обратите внимание на то, что линейки под шапкой и перед подвалом толще, чем рамки вокруг остальных строк таблицы. Это результат того, что мы включили в тег <table> специальный атрибут rules=groups. Установка атрибутов rules=rows или rules=all приведет к похожему эффекту.
Длинные таблицы часто выигрывают, когда каждые несколько строк отделены от предыдущих более толстой линией – так их легче читать. Сделать это можно, сгруппировав строки таблицы несколькими тегами <tbody>. Каждое семейство строк, содержащееся в одном теге <tbody>, будет отделяться от предыдущих и последующих строк более толстыми линиями.Ниже представлен подробный вариант предыдущей таблицы с дополнительными строками и разбиением на фрагменты:

<table border cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
<tbody>
<tr align=center>
<th rowspan=4>Gender
<th>Males under 18
<td>94%
<td>6%
<tr align=center>
<th>Males over 18
<td>73%
<td>27%
<tbody>
<tr align=center>
<th>Females under 18
<td>34%
<td>66%
<tr align=center>
<th>Females over 18
<td>16%<td>84%
</table>

Результат показан на рис. 10.7. Обратили внимание на ячейку Gender? Броузер Netscape версии 4 и более ранних помещает ее слева, отцентрировав между строками Males и Females, что вполне естественно.

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

Определение групп столбцов
Основная модель таблиц ориентирована на строки. Иногда, однако, легче обращаться с таблицей как с набором столбцов. С помощью тегов <colgroup> и <col>, появившихся первоначально в Internet Explorer в качестве расширений, теперь и стандарты HTML 4 и XHTML позволяют вам повернуть таблицу и думать о ней в терминах столбцов. В отличие от тегов, описанных в предыдущих разделах, которые могут перемежаться со строками таблицы при определении колонтитулов и фрагментов таблицы, теги столбцов не могут смешиваться с содержимым таблицы. Необходимо размещать их в самом начале таблицы,
до ее содержимого. Они определяют схему, в соответствии с которой броузеры, соответствующие стандартам HTML 4 и XHTML, будут отображать столбцы.

Тег <colgroup>
Тег <colgroup> определяет группу столбцов и может быть использован двумя способами: как одно определение для нескольких идентичных столбцов или как контейнер для нескольких не похожих друг на друга столбцов. Тег <colgroup> может появляться только в теге <table>. Закрывающий тег </colgroup> редко используется в HTML, но является
обязательным в XHTML. В языке HTML <colgroup> заканчивается, когда встречаются теги <colgroup>, <thead>, <tbody>, <tfoot> или <tr>. Все популярные броузеры поддерживают тег <colgroup> и его атрибуты.

Атрибут span
Используйте атрибут span для достижения группировки столбцов первого типа. Значение атрибута span – это целое число столбцов, на которые действует тег <colgroup>. К примеру, таблица с шестью столбцами – четырьмя в первой группе и двумя во второй – будет выглядеть в исходном тексте так:

<colgroup span="4">
<colgroup span="2">

Когда поддерживающий стандарты HTML 4 и XHTML броузер будет разбирать ячейки таблицы по столбцам, он отнесет первые четыре ячейки каждой строки в первую группу столбцов, а две следующие ячейки – во вторую группу. Все другие атрибуты, содержащиеся в отдельном теге <colgroup>, будут применяться к столбцам, входящим в эту группу.

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

<colgroup>
<col>
<col><col>
<col>
<colgroup>
<col>
<col>

Этот метод создает группы с тем же числом столбцов в каждой, что получалось при использовании атрибута span, но он позволяет определять атрибуты для каждого столбца по отдельности. По-прежнему можно определять атрибуты для всей группы через тег <colgroup>, но при необходимости можно заместить эти атрибуты, переопределив их в тегах <col>.

К примеру, допустим, что вы хотите, чтобы каждый столбец первой группы занимал 20% таблицы, а оставшиеся два столбца занимали по 10% всей ширины таблицы. Этого легко достичь при помощи атрибута span:

<colgroup span=4 width="20%">
<colgroup span=2 width="10%">

Эта же структура может быть получена при определении индивидуальных столбцов (на HTML):

<colgroup width="20%">
<col>
<col>
<col>
<col>
<colgroup width="10%">
<col>
<col>

Вы можете использовать в одной таблице оба способа. К примеру, мы могли бы определить ту же, что и в предыдущем примере, группировку столбцов той же ширины так:

<colgroup span=4 width="20%" align=right>
<colgroup width="10%">
<col align=left>
<col align=right>

Обратите внимание, что здесь мы смогли по-разному выровнять содержимое двух последних столбцов (по умолчанию содержимое центрируется).

Другие атрибуты тега <colgroup>
Множество общих для тегов таблицы атрибутов управляет хорошо знакомыми вам аспектами отображения каждого столбца в группе, заданной тегом <colgroup>. Эти атрибуты принимают те же значения и ведут себя так же, как эквивалентные атрибуты тега <td>.

Тег <col>
Используйте тег <col> для управления внешним видом одного или нескольких столбцов в группе. Тег <col> может появляться только в теге <colgroup> в таблице. У этого тега нет содержимого и, следовательно, нет закрывающего тега в HTML. Используйте </col> или одну наклонную линию в конце тега (<col />), чтобы удовлетворять требованиям XHTML об обязательном завершении тегов. Тег <col> предоставляет один или несколько столбцов в группе <colgroup>, к которым поддерживающий стандарты HTML 4 и XHTML броузер применяет атрибуты тега <col>.

Все популярные броузеры поддерживают тег <col> и его атрибуты.

Атрибут span
Атрибут span в теге <col>, как и в теге <colgroup>, позволяет указать, сколько последовательно идущих столбцов подвергаются воздействию тега <col>. По умолчанию <col> действует только на один столбец. Для примера создадим группу <colgroup>, содержащую пять столбцов. Мы выровняем первый и последний столбцы влево и вправо соответственно, тогда как три средние будут центрированы:

<colgroup>
<col align=left>
<col align=center span=3>
<col align=right>

Тег <col> следует использовать только в тегах <colgroup>, не содержащих атрибута span. В противном случае броузеры, соответствующие стандартам HTML 4 и XHTML, проигнорируют теги <col> и их атрибуты.

Другие атрибуты тега <col>
Множество общих для всех тегов таблицы атрибутов, управляющих аспектами отображения столбца, можно использовать и с тегом <col>.Эти атрибуты принимают те же значения и ведут себя так же, как эквивалентные атрибуты тега <td>.

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

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

<table border= cellspacing=0 cellpadding=5 rules=groups>
<caption align=bottom>Kumquat versus a poked eye, by gender</caption>
<colgroup span=2>
<colgroup span=2>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preference
<tr>
<th>Eating Kumquats
<th>Poke In The Eye
<tbody>
<tr align=center>
<th rowspan=4>Gender
<th>Males under 18
<td>94%
<td>6%
<tr align=center>
<th>Males over 18
<td>73%
<td>27%
<tr align=center>
<th>Females under 18
<td>34%</td>
<td>66%</td>
<tr align=center>
<th>Females over 18
<td>16%
<td>84%
<tfoot>
<tr>
<td colspan=4 align=center>
Note: eye pokes did not result in permanent injury
</table>

Результат показан на рис. 10.8. Все, что мы добавили, – это два тега <colgroup>. Дополнительные линейки проведены благодаря действию атрибута rules=group в теге <table>. Чтобы между группами столбцов была проведена рамочная линия, атрибуту rules необходимо присвоить одно из значений: groups, cols или all.

Статьи по HTML на эту тему:

За пределами обычных таблиц

Вернуться в раздел: HTML / 10. Таблицы