Файл: Основы программирования на языке HTML(Представление о языке гипертекстовой разметки HTML).pdf

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

Любая таблица создается по следующей схеме:

<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>
<ОТКРЫВАЮЩИЙ ТЕГ РЯДА>
<ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
Текст, картинки или таблицы
<ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
<ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>
</ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

Любая таблица состоит из рядов, которые состоят из ячеек (столбцов). Внутри ячеек содержится информация, выводимая внутри таблицы. Как видно из приведенной схемы для создания простой таблицы, состоящей из одного ряда и одной ячейки нужно открыть таблицу, открыть ряд, открыть ячейку, а затем закрыть ячейку, закрыть ряд и закрыть таблицу. Чтобы создать таблицу, состоящую из одного ряда, в котором находятся две ячейки, нужно просто между открывающим и закрывающим тегами ряда таблицы вставить два тега ячеек (открывающий и закрывающий) вместо одного.

10.1 Правила создания таблиц

Рассмотрим обязательные правила создания таблиц.

• Соблюдение порядка тегов <TABLE>, <TR> и <TD> Сначала открываем таблицу, затем открываем ряд, затем открываем и закрываем несколько ячеек, затем закрываем ряд и в конце закрываем таблицу. Несоблюдение этой последовательности может привести к непредсказуемым результатам.

• Всегда закрываем тег <TABLE> в конце таблицы

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

• Количество ячеек во всех рядах таблицы должно быть одинаковым.

Даже если вы не хотите ничего писать в одной из ячеек ряда таблицы, просто вставьте ячейку без содержимого вот так <TD>&nbsp;</TD>. Комбинация символов '&nbsp;' означает пустой символ. Если не вставить абсолютно ничего в ячейку, то в браузере Internet Explorer не будет этой ячейки и, например, при использовании параметра BGCOLOR тега <TD>, не увидим фона ячейки.

• Писать каждый тег таблицы с новой строки.

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

<TABLE>
<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>
<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>
</TABLE>

10.2 Простая таблица

Посмотрим на прокомментированный HTML код, который создает эту таблицу:

<TABLE> открывающий тег таблицы
<TR> открывающий тег ряда 1
<TD> Наименование </TD> открывающий и закрывающий теги ячейки 1
<TD>Цвет</TD> открывающий и закрывающий теги ячейки 2
<TD> Количество </TD> открывающий и закрывающий теги ячейки 3
</TR> закрывающий тег ряда 1
<TR>
<TD> Фломастер </TD>
<TD> Зелёный </TD>
<TD>5</TD>
</TR>
<TR>
<TD> Карандаш </TD>
<TD> Жёлтый </TD>
<TD>7</TD>
</TR>
</TABLE> закрывающий тег таблицы

Открывающим и закрывающим тегами таблицы являются теги <TABLE> и </TABLE>, открывающим и закрывающим тегами ряда являются теги <TR> и </TR>, а открывающим и закрывающим тегами ячейки (колонки) таблицы являются теги <TD> и </TD> Как видно из комментария к примеру в первой строке открывается таблица, а во второй строке открывается первый ряд таблицы. Далее идут три строки, представляющие три ячейки таблицы. В каждой строке открывается ячейка таблицы, затем идет содержание этой ячейки и в конце ячейка закрывается. В шестой строке HTML кода закрывается первый ряд таблицы. Затем все повторяется еще два раза - открытие ряда (7 строка), три ячейки с содержимым (8-10 строки), закрытие ряда (11 строка) и т.д. В последней строке HTML кода таблица закрывается.

11. HTML- редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

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

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое. Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.