Формирование таблиц
Обычно после рассмотрения создания какого-либо элемента страницы мы рассказываем о тегах HTML, с помощью которых он создается. Теперь пришла пора выяснить, с помощью каких тегов формируется таблица HTML. Итак, она формируется в четыре этапа. Сейчас мы их рассмотрим.
На первом этапе создается сама таблица и задаются ее параметры (ширина, толщина границы и т. п.). Это уже нам знакомо — посмотрите на рис. 5.4, где изображено диалоговое окно Insert Table. Все задаваемые в нем параметры и есть параметры таблицы.
Таблица создается с помощью парного тега <table>, имеющего множество атрибутов, из которых мы выделим width, задающий ширину таблицы, и height, задающий ее высоту.
На втором этапе внутри таблицы создается набор описаний строк таблицы. Собственно, таблица состоит из множества строк. Каждая строка может иметь свои параметры, в частности высоту.
Строка таблицы создается с помощью парного тега <tr>. Высота строки задается атрибутом HEIGHT. Тег <TR> может появляться только внутри тега <TABLE>.
Ячейка таблицы создается с помощью парного тега <td>. Ширина ячейки задается атрибутом width. Тег <td> может появляться только внутри тега <tr>. |
Последний, четвертый, этап — это помещение в ячейки полезного содержимого. Запомните, что это содержимое может находиться только в ячейках |
На третьем этапе внутри каждой строки создаются описания ячеек. Каждая ячейка также может иметь параметры, например ширину. Каждая строка таблицы, таким образом, состоит из набора ячеек.
Таблицы (тег <td>), но никак не в строках (<tr>) или самой таблице (<table>). Если вы нарушите это правило, HTML-код может отобразиться Web-обозревателем неверно.
Вам все это может показаться очень сложным и громоздким. Но на самом деле ничего сложного в этом нет — наоборот, все очень просто, если понять принцип. Более того, подобный способ формирования таблиц исключительно гибок, и именно в жертву гибкости была принесена компактность HTML-кода таблицы.
Давайте приведем HTML-код таблицы. Он послужит нам хорошей иллюстрацией к вышесказанному.
<TABLE>
<TR>
<TD>
Содержимое ячейки </TD>
<TD>
Содержимое ячейки </TD>
</TR>
<TR>
<TD>
Содержимое ячейки </TD>
<TD>
Содержимое ячейки </TD>
</TR>
</TABLE>