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

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

на обложку

Дронов Владимир

Шрифт:

— Содержимое таблицы может находиться только в тегах <TD> и <TH>.

— Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал  ).

Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.

Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.

Листинг 5.6

Пожалуй,

ни убавить ни прибавить…

<HR>

Список версий HTML:

<TABLE>

<TR>

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

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

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

</TR>

<TR>

<TD>Официально не была стандартизована</TD>

</TR>

<TR>

<TD>Первая стандартизованная версия</TD>

</TR>

<TR>

<TD>Поддержка таблиц и графики</TD>

</TR>

<TR>

<TD>"Очищен" от устаревших тегов</TD>

</TR>

<TR>

<TD>В основном, исправление ошибок</TD>

</TR>

<TR>

<TD>В разработке</TD>

</TR>

</TABLE>

HTML позволяет формировать на Web-страницах следующие элементы:

Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).

Рис. 5.1. Таблица — список версий HTML на Web-странице index.htm

Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.

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

Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.

Прежде всего, с помощью парного тега <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

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

<HR>

<TABLE>

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

<THEAD>

<TR>

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

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

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

</TR>