Знакомство с Dreamweaver

Настройка Dreamweaver

Работа с текстом

Гиперссылки

Ссылки на изображения

Таблицы

Каскадные таблицы стилей

Творческое задание

Источники

<<Назад | На главную | Вперед >>

---

6.3. Средства HTML, используемые для создания таблиц.

Таблица средствами языка HTML формируется в четыре этапа. Рассмотрим их.

На первом этапе создается сама таблица и задаются ее параметры (ширина, толщина границы и т. п.). Для этого используется парный тег <table>, имеющий множество атрибутов, из которых мы выделим width и height, задающие ширину и высоту таблицы соответственно.

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

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

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

Ячейка таблицы создается с помощью парного тега <td>, ячейка заголовка — с помощью тега <th>. Ширина ячейки задается атрибутом width, а высота — атрибутом height. Тег <td> может присутствовать только внутри тега <tr>.

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

Если мы задали для таблицы название, то оно помещается внутри парного тега <caption>. Этот тег может находиться только внутри тега <table>.

Все это может показаться очень сложным, но на самом деле ничего сложного здесь нет— наоборот, все очень просто, если понять принцип. Давайте сами в этом убедимся. Ниже приведен пример HTML-кода некой таблицы — он послужит нам хорошей иллюстрацией к ранее сказанному.
<TABLE>
<CAPTION>
Название таблицы
</CAPTION>
<TR>
<TD>
Содержимое ячейки
</TD>
<TD>
Содержимое ячейки
</TD>
</TR>
<TR>
<TD>
Содержимое ячейки
</TD>
<TD>
Содержимое ячейки
</TD>
</TR>
</TABLE>

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

---

<<Назад | На главную | Вперед >>