Таблицы HTML создаются в четыре этапа.
На первом этапе в HTML-коде с помощью парного тега формируют саму таблицу:
<table>
</table>
Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно...)
На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <tr>. Kаждый такой тег создает отдельную строку. Теги <tr> помещают внутрь тега <table> (листинг 5.1).
Листинг 5.1
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
На третьем этапе создают ячейки таблицы, для чего используют парные теги <td> и <th>. Тег <th> создает обычную ячейку, а тег <td> — ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <th> и <td> помещают в теги <tr>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).
Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <td> или <th> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.
Если нам потребуется как-то оформить содержимое ячеек, мы применим специальные для этого теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <em>, в результате они будут выведены курсивом (листинг 5.4).
Еще мы можем поместить в ячейку графическое изображение:
<td><img src="priroda.gif" alt="Картинка в ячейке таблицы"></td>
Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <td> и <th> это позволяют (листинг 5.5).
Листинг 5.5
<td>
<h4>Это большой текст</h4>
<p>Это начало текста, представляющего собой содержимое ячейки таблицы.</p>
<p>Это продолжение текста, представляющего собой содержимое ячейки таблицы.</p>
<p><img src="priroda.gif" alt="Иллюстрация к большому тескту."</p>
<p>А это <strong>долгожданное окончание</strong> большого текста.</p>
</td>
Данный HTML-код помещает в ячейку таблицы заголовок и четыре абзаца. Причем один из этих абзацев содержит графическое изображение, а часть другого помечена как очень важная (и будет набрана полужирным шрифтом).
HTML-код, создающий таблицы, может показаться несколько громоздким. Но это плата за исключительную гибкость таблиц HTML. Мы можем поместить в таблицу любое содержимое: абзацы, заголовки, изображения, аудио и видеоролики и даже другие таблицы.
Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.
- Таблица представляет собой блочный элемент Web-страницы.
- Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.
- Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.
- Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.
- Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.
Таблица — всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление.
И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.
Тег <tr> может находиться только внутри тега <table>. Любое другое содержи-мое тега <table> (кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.
Теги <td> и <th> могут находиться только внутри тега <tr>. Любое другое содержимое тега <tr> будет проигнорировано.
Содержимое таблицы может находиться только в тегах <td> и <th>.
Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web-обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал ).
Все, с теорией покончено. Настала пора практики. Давайте поместим на Web-страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну, это дело поправимое, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.
