HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Прежде всего, с помощью парного тега <CAPTION> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <TABLE> (листинг 5.7).

Листинг 5.7

<TABLE>

<CAPTION>Это таблица</CAPTION>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

<TH>Столбец 3</TH>

</TR>

.

</TABLE>

Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись знакомыми нам по главе 3 тегами:

<CAPTION><STRONG>Это таблица<STRONG></CAPTION>

Обычно тег <CAPTION> помещается сразу после открывающего тега <TABLE> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.

Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:

— секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее 'шапку';

— секцию тела, где находятся строки таблицы, составляющие основные данные;

— секцию завершения со строками, формирующими 'поддон' таблицы (обычно в 'поддоне' располагают итоговые данные и различные примечания).

Секцию заголовка таблицы формирует тег <THEAD>, секцию тела — <TBODY>, а секцию завершения — <TFOOT>. Все эти теги парные, помещаются непосредственно в тег <TABLE> и содержат теги <TR>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).

Листинг 5.8

<TABLE>

<THEAD>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

<TH>Столбец 3</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>Ячейка 1.1</TD>

<TD>Ячейка 1.2</TD>

<TD>Ячейка 1.3</TD>

</TR>

<TR>

<TD>Ячейка 2.1</TD>

<TD>Ячейка 2.2</TD>

<TD>Ячейка 2.3</TD>

</TR>

</TBODY>

<TFOOT>

<TR>

<TD>Итог по ячейке 2.1</TD>

<TD>Итог по ячейке 2.2</TD>

<TD>Итог по ячейке 2.3</TD>

</TR>

</TFOOT>

</TABLE>

Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web- странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением. Подробнее об этом мы узнаем в части II.

НА ЗАМЕТКУ

Тег <TABLE> поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, например, Web-обозревателями для слабовидящих, зачитывающими содержимое Web- страниц. Так или иначе, примечание к таблицам практически никогда не задается.

Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом 'Список версий HTML: ', который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ('Поддона' наша таблица не имеет, так что обойдемся без секции завершения.)

В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.

Листинг 5.9

.

<P>Пожалуй, ни убавить ни прибавить…</P>

<HR>

<TABLE>

<CAPTION>Список версий HTML:</CAPTION>

<THEAD>

<TR>

<TH>Версия HTML</TH>

<TH>Год выхода</TH>

<TH>Особенности</TH>

</TR>

</THEAD>

<TBODY>

<TR>