На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег создает обычную ячейку, а тег - ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).
Листинг 5.2
<TABLE>
<TR>
<TH></TH>
<TH></TH>
<TH></TH>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).
Листинг 5.3
<TABLE>
<TR>
<TH>Столбец 1</TH>
<TH>Столбец 2</TH>
<TH>Столбец 3</TH>
</TR>
<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>
</TABLE>
Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.
Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом (Листинг 5.4).
Листинг 5.4
<TABLE>
. . .
<TR>
<TD>Ячейка <EM>1.1</EM></TD>
<TD>Ячейка <EM>1.2</EM></TD>
<TD>Ячейка <EM>1.3</EM></TD>
</TR>
. . .
</TABLE>
Еще мы можем поместить в ячейку графическое изображение:
<TD><IMG SRC="picture.jpg" ALT="Картинка в ячейке таблицы"></TD>
Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 5.5).
Листинг 5.5
<TD>
<H4>Это большой текст</H4>
<P>Это начало большого текста, представляющего собой содержимое ячейки таблицы.</P>
<P>Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.</P>
<P><IMG SRC="picture.jpg" ALT="Иллюстрация к большому тексту"></P>
<P>А это <STRONG>долгожданное окончание</STRONG> большого текста.</P>
</TD>
Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио- и видеоролики и даже другие таблицы.
Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
- Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).
- Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
- Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
- Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
- Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
Таблица - всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II.
И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
- Тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержи- мое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет да- лее) будет проигнорировано.
- Теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое содержимое тега <TR> будет проигнорировано.
- Содержимое таблицы может находиться только в тегах <TD> и <TH>.
- Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал ).
Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Листинг 5.6
. . .
<P>Пожалуй, ни убавить ни прибавить...</P>
<HR>
<P>Список версий HTML:</P>
<TABLE>
<TR>
<TH>Версия HTML</TH>
<TH>Год выхода</TH>
<TH>Особенности</TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD>Официально не была стандартизована</TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD>Первая стандартизованная версия</TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD>Поддержка таблиц и графики</TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"Очищен" от устаревших тегов</TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD>В основном, исправление ошибок</TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>В разработке</TD>
</TR>
</TABLE>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
. . .
Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).