Формирование таблиц

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

На первом этапе создается сама таблица и задаются ее параметры (ширина, толщина границы и т. п.). Это уже нам знакомо — посмотрите на рис. 5.4, где изображено диалоговое окно Insert Table. Все задаваемые в нем параметры и есть параметры таблицы.

Примечание

Таблица создается с помощью парного тега <TABLE>, имеющего множество атрибутов, из которых мы выделим WIDTH, задающий ширину таблицы, и HEIGHT, задающий ее высоту.

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

Примечание

Строка таблицы создается с помощью парного тега <тr>. Высота строки задается атрибутом HEIGHT. Тег <тr> может появляться только внутри тега <TABLE>.

На третьем этапе внутри каждой строки создаются описания ячеек. Каждая ячейка также может иметь параметры, например ширину. Каждая строка таблицы, таким образом, состоит из набора ячеек.

Примечание

Ячейка таблицы создается с помощью парного тега <тd>. Ширина ячейки задается атрибутом WIDTH. Тег <тd> может появляться только внутри тега <тr>.

Последний, четвертый, этап — это помещение в ячейки полезного содержимого. Запомните, что это содержимое может находиться только в ячейках таблицы (тег <TD>), но никак не в строках (<tr>) или самой таблице (<TABLE>). Если вы нарушите это правило, HTML-код может отобразиться Web-обозревателем неверно.

Вам все это может показаться очень сложным и громоздким. Но на самом деле ничего сложного в этом нет — наоборот, все очень просто, если понять принцип. Более того, подобный способ формирования таблиц исключительно гибок, и именно в жертву гибкости была принесена компактность HTML-кода таблицы.

Давайте приведем HTML-код таблицы. Он послужит нам хорошей иллюстрацией к вышесказанному.

<TABLE> <TR> <TD>

Содержимое ячейки </TD> <TD>

Содержимое ячейки </TD> </TR> <TR> <TD>

Содержимое ячейки </TD> <TD>

Содержимое ячейки </TD> </TR>

</TABLE>