Таблицы позволяют представить большой объем информации в компактном и наглядном виде, а также сравнивать и сопоставлять различные данные. Они часто встречаются на сайтах, где служат для представления разнообразной статистики, рейтингов, сравнения цен и т.д.

Создание таблиц

Для добавления таблицы на веб-страницу используется элемент TABLE, который указывает браузеру, что содержимое необходимо организовать в табличном виде. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы: внутри элемента <TABLE>…</TABLE> допустимо использовать такие элементы HTML, как CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TH, TD и TR.

Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов TR и TD соответственно.

Для определения строки в уже созданной таблице используется элемент TR, который позволяет браузеру организовать содержимое между тегами <TR> и </TR> в горизонтальном виде: между ними должны размещаться все данные, которые требуется поместить в одну строку. Внутри строки таблицы обычно размещаются ячейки с данными. Для определения ячейки таблицы используется элемент TD. Число элементов ТD в строке определяет число ячеек. Ячеек может быть произвольное количество, однако таблица должна содержать хотя бы одну ячейку.

Вместо элемента TD допускается использовать элемент TH. Элемент TH определяет содержимое ячейки как заголовок для каждого столбца. Это помогает не только семантически описать содержимое, но также представляет его более аккуратно в различных браузерах и устройствах. Текст в такой ячейке обычно отображается браузерами жирным шрифтом и выравнивается по центру. В остальном разницы между ячейками, созданными с использованием элементов TD и ТН, нет.

Фрагмент кода, представленного ниже, создает таблицу, состоящую из трех столбцов и четырех строк, одна из которых задает строку заголовков столбцов:

<TABLE>
 <TR>
 <TH>Поисковая система</TH>
 <TH>Декабрь 2009 г.</TH>
 <TH>Ноябрь 2009 г.</TH>
 </TR>
 <TR>
 <TD>Яндекс</TD>
 <TD>48.0%</TD>
 <TD>47.9%</TD>
 </TR>
 <TR>
 <TD>Google</TD>
 <TD>34.9%</TD>
 <TD>34.7%</TD>
 </TR>
 <TR>
 <TD>Search.Mail.ru</TD>
 <TD>8.6%</TD>
 <TD>8.6%</TD>
 </TR>
</TABLE>

Созданная таблица представлена на рисунке 9.1.

Заголовок таблицы

Таблицам на странице удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML используется специальный элемент CAPTION, который помещается внутри элемента <TABLE>…</TABLE>. Удобство использования элемента CAPTION состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные ее шириной.

По умолчанию, заголовок таблицы помещается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка предусмотрен атрибут align. Однако этот атрибут помечен в Спецификации HTML 4.01 как не рекомендуемый, и с его помощью получить код, одинаково работающий в разных браузерах, довольно сложно. Для выравнивания заголовка таблицы рекомендуется использовать CSS, а именно, свойство text-align.

Добавление некоторых свойств

Тот факт, что таблицы применяются достаточно часто, обязан не только их гибкости и универсальности, но и обилию атрибутов элементов TABLE, TR и TD, управляющих различными свойствами таблицы. Рассмотрим наиболее часто используемые атрибуты подробнее.

Описание таблицы: атрибут summary

Пользователи с нормальным зрением могут сами для себя решить, стоит им изучать таблицу или нет. Быстрый взгляд на нее и на ее заголовок позволит сказать, велика ли таблица и что она содержит. Пользователи с программами для чтения с экрана не смогут этого сделать, пока разработчик не добавит к элементу TABLE атрибут summary. Этот атрибут позволяет написать более развернутое описание, чем то, которое подходит для элемента CAPTION. Содержание атрибута summary не будет отражено визуальными браузерами, поэтому можно сделать описание достаточно длинным для того, чтобы те, кто его услышат, смогли понять, что именно представлено в таблице. Данный атрибут рекомендуется использовать только в случае необходимости, например, для больших и сложных таблиц. Для созданной выше таблицы можно добавить описание следующим образом:

<TABLE summary="Статистика переходов с основных поисковых систем. В таблице представлены средние значения.">
...
</TABLE>

Толщина рамки таблицы: атрибут border

Атрибут устанавливает толщину рамки в пикселах, т.е. использует в качестве значения любое положительное число. По умолчанию, рамка изображается трехмерной, однако вид рамки меняется в зависимости от браузера. При использовании атрибута border без аргументов, браузер отображает рамку толщиной один пиксел. Толщину рамки возможно также установить с помощью одноименного свойства CSS. Следующий фрагмент кода добавляет к таблице рамку толщиной 2 пиксела:

<TABLE border="2">
...
</TABLE>

Ширина таблицы: атрибут width

Ширину таблицы можно задать с помощью атрибута width. Ширину можно задавать в пикселах или процентах от доступного пространства. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться форматировать текст, чтобы подогнать его к заданным размерам. Если это невозможно, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Если ширина явно не указана, то она также будет вычисляться на основе содержимого таблицы. Аналогом данного атрибута является одноименное свойство CSS. В следующем примере ширина таблицы устанавливается равной 75% от ширины окна браузера:

<TABLE width="75%">
...
</TABLE>

Расстояние между ячейками таблицы: атрибут cellspacing

Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет и входит в общее значение. Значением атрибута может быть любое целое положительное число. По умолчанию, атрибут cellspacing принимает значения 0 или 2, в зависимости от того, установлен атрибут border или нет. Следующий фрагмент кода устанавливает расстояние между ячейками 2 пиксела:

<TABLE cellspacing="2">
...
</TABLE>

Расстояние внутри ячеек: атрибут cellpadding

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

<TABLE cellpadding="2">
...
</TABLE>

Пример совместного применения описанных выше атрибутов представлен в следующем листинге:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Таблицы в HTML</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" cellspacing="2" 
 summary="Статистика поисковых систем Рунета">
 <CAPTION>Статистика поисковых систем</CAPTION>
 <TR>
 <TH>Поисковая система</TH>
 <TH>Декабрь 2009 г.</TH>
 <TH>Ноябрь 2009 г.</TH>
 </TR>
 <TR>
 <TD>Яндекс</TD>
 <TD>48.0%</TD>
 <TD>47.9%</TD>
 </TR>
 <TR>
 <TD>Google</TD>
 <TD>34.9%</TD>
 <TD>34.7%</TD>
 </TR>
 <TR>
 <TD>Search.Mail.ru</TD>
 <TD>8.6%</TD>
 <TD>8.6%</TD>
 </TR>
</TABLE>
</BODY>
</HTML>

Результат выполнения данного кода представлен на рисунке 9.2.

Рис. 9.2.  Результат применения описанных выше атрибутов

Каждая ячейка таблицы, задаваемая элементом TD или TH, тоже имеет свои атрибуты, часть из которых совпадает с атрибутами элемента TABLE. Рассмотрим наиболее часто используемые атрибуты элемента TD.

Объединение ячеек: атрибуты colspan и rowspan

Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали. Например, в первой таблице, показанной на рисунке 9.3, содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan. Пример кода представлен ниже:

<TABLE width="200" border="1" cellpadding="4">
 <TR> 
 <TD colspan="2">Ячейка 1</TD>
 </TR>
 <TR> 
 <TD>Ячейка 2</TD>
 <TD>Ячейка 3</TD>
 </TR>
</TABLE>

Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали. Например, во второй таблице, представленной на рисунке 9.3, содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan. Такого результата можно достичь с помощью следующего фрагмента кода:

 <TABLE width="200" border="1" cellpadding="4">
 <TR> 
 <TD rowspan="2">Ячейка 1</TD>
 <TD>Ячейка 2</TD>
 </TR>
 <TR> 
 <TD>Ячейка 3</TD>
 </TR>
 </TABLE>

Рис. 9.3.  Примеры таблиц, демонстрирующих горизонтальное и вертикальное объединение ячеек

Перенос слов в ячейках: атрибут nowrap

Добавление атрибута nowrap к элементу TD заставляет браузер отображать текст внутри ячейки без переносов. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-странице. Как следствие, появится горизонтальная полоса прокрутки, и пользоваться подобной таблицей будет неудобно. В Спецификации HTML 4.01 данный атрибут помечен как не рекомендуемый, и его применение осуждается. Для достижения аналогичной функциональности рекомендуется использовать свойство CSS white-space.

Ширина и высота ячейки: атрибуты width и height

С помощью атрибутов width и height можно задать ширину и высоту ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину. Высоту таблицы и ее ячеек браузер устанавливает сам, исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали. Применение атрибутов width и height также осуждаются в Спецификации HTML. Вместо них рекомендуется использовать одноименные свойства CSS.

В заключение этого раздела следует отметить, что официальная спецификация HTML не рекомендует все атрибуты, касающиеся оформления таблиц и ячеек. Устанавливать такие свойства таблиц и ячеек, как выравнивание самой таблицы относительно окна браузера, текста в ячейках, цвет и стиль рамки вокруг ячеек таблицы, фона и многое другое рекомендуется только с использованием свойств CSS. Подробно эти вопросы будут освещены в лекции 15.

Дополнительная структуризация таблицы

Сложные таблицы со множеством столбцов и строк возможно дополнительно структурировать, определив верхний колонтитул, тело и нижний колонтитул таблицы. В сложных таблицах использование этих элементов позволит структурировать содержимое таблицы не только для разработчика, но и для браузеров и других устройств. Для добавления данной структуры к таблице используются элементы THEAD, TBODY и TFOOT соответственно.

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

Элемент TBODY позволяет создавать структурные блоки внутри таблицы, к которым можно применять единое оформление через стили. Допускается применять несколько элементов TBODY внутри контейнера TABLE. Элемент TBODY не должен перекрываться с другими видами группировок строк (т.е. с TFOOT и THEAD).

Элемент TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы, и служит для создания нижнего колонтитула таблицы. Хотя этот элемент в исходном коде должен быть определен до элемента TBODY, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент TFOOT.

Пример использования элементов THEAD, TBODY и TFOOT, представлен в следующем ниже листинге. Результат выполнения данного кода иллюстрирует рисунок 9.4.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Таблицы в HTML</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="75%" cellspacing="2" 
 summary="Статистика поисковых систем Рунета">
 <CAPTION>Статистика поисковых систем</CAPTION>
 <THEAD>
 <TR>
 <TH>Поисковая система</TH>
 <TH>Декабрь 2009 г.</TH>
 <TH>Ноябрь 2009 г.</TH>
 </TR>
 </THEAD>
 <TFOOT>
 <TR>
 <TD colspan="4">Результаты сайта "Сайты Рунета"</TD>
 </TR>
 </TFOOT> 
 <TBODY>
 <TR>
 <TD>Яндекс</TD>
 <TD>48.0%</TD>
 <TD>47.9%</TD>
 </TR>
 <TR>
 <TD>Google</TD>
 <TD>34.9%</TD>
 <TD>34.7%</TD>
 </TR>
 <TR>
 <TD>Search.Mail.ru</TD>
 <TD>8.6%</TD>
 <TD>8.6%</TD>
 </TR>
 </TBODY>
</TABLE>
</BODY>
</HTML>

Рис. 9.4.  Результат дополнительной структуризации таблицы