Язык  HTML

 Только с нашего сайта!!!

Покупая товар в ниже перечисленых   магазинах вы получите скидку  1% на все виды товара.

   Создание таблиц

  1. Создание таблиц

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

  3. Создание таблиц - простая таблица

  4. Создание таблиц - основные параметры тегов

  5. Создание таблиц - приемы и хитрости

  6. Создание таблиц - сложные таблицы

  7. Правила создания структуры сложных таблиц

назад | оглавление | далее  

"Создание таблиц"

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

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

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

<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

<ОТКРЫВАЮЩИЙ ТЕГ РЯДА>

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

<ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>

</ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

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

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

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

Соблюдайте порядок тегов <TABLE>, <TR> и <TD>
Всегда соблюдайте схему создания таблицы, описанную ранее, сначала открывайте таблицу, затем открывайте ряд, затем открывайте и закрывайте несколько ячеек, затем закрывайте ряд и в конце закрывайте таблицу. Несоблюдение этой последовательности может привести к непредсказуемым результатам.
Закрывайте тег <TABLE> в конце таблицы
Если не закрыть тег <TABLE> в конце таблицы, то в большинстве броузеров это приведет к непредсказуемым результатам. Netscape Navigator, например, вообще не отобразит содержимое таблицы на экране.
Количество ячеек в ряду
Старайтесь следить за тем, чтобы количество ячеек во всех рядах таблицы было одинаковым. Даже если вы не хотите ничего писать в одной из ячеек ряда таблицы, просто вставьте ячейку без содержимого вот так <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>
 

Так вам будет проще разобраться в собственном HTML коде. В принципе вы можете и сами придумать для себя удобную схему написания HTML кода таблиц.

"Создание таблиц - простая таблица"

Давайте рассмотрим создание таблиц на простом примере. Наша таблица будет состоять из трех рядов, в каждом ряде будет три ячейки (столбца). Первый столбец будет называться "Товар", второй - "Цвет", а третий - "Цена". Вот как может выглядеть наша таблица:

Товар Цвет Цена (руб.)
Карандаш Синий 1
Шариковая ручка Черный 5

Давайте посмотрим на прокомментированный HTML код, который создает эту таблицу (черный текст - это комментарии к каждой строке HTML кода данного примера):

<TABLE>
<TR>
<TD>Товар</TD>
<TD>Цвет</TD>
<TD>Цена (руб.)</TD>
</TR>
<TR>
<TD>Карандаш</TD>
<TD>Синий</TD>
<TD>1</TD>
</TR>
<TR>
<TD>Шариковая ручка</TD>
<TD>Черный</TD>
<TD>5</TD>
</TR>
</TABLE>
открывающий тег таблицы
открывающий тег ряда 1
открывающий и закрывающий теги ячейки 1
открывающий и закрывающий теги ячейки 2
открывающий и закрывающий теги ячейки 3
закрывающий тег ряда 1









закрывающий тег таблицы

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

"Создание таблиц - основные параметры тегов"

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

<TABLE>, <TR> и <TD>

BGCOLOR

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

BACKGROUND

Путь и название картинки, которая будет использована в качестве фона ячейки таблицы. Если вы укажите этот параметр в теге <TABLE>, то ваша данная картинка будет использована в качестве фона каждой ячейки, если параметр указан в теге <TR>, то во всех ячейках этой строки и если в теге <TD>, то в конкретной ячейке.

WIDTH

Ширина таблицы, строки или отдельной ячейки в пикселах или в процентах. На самом деле использование этого параметра в теге <TABLE> ничем не отличается от его использования в теге <TR>, так как ширина таблицы равняется ширине ряда. В HTML нельзя создать таблицу с рядами разной ширины. Если ширина задана в пикселах (например WIDTH=100), то ширина задается в пикселах - самая маленькая точка экрана при заданном разрешении. Например, если разрешение вашего монитора 800х600 пикселов, то максимально широкая таблица, которая вместится в ваш экран - 800 пикселов. Если же ширина задается в процентах (например WIDTH=50%), то ширина задается в процентах от ширины экрана или от ширины ячейки другой таблицы, в которую вставляется данная таблица.

HEIGHT

Высота всей таблицы, ряда таблицы или отдельной ячейки заданная в пикселах или в процентах. Высота отдельной ячейки и высота ряда таблицы обычно одинаковы.

<TABLE>

BORDER

Толщина бордюра вокруг таблицы в пикселах. При указании нулевого значения параметра BORDER (BORDER=0) бордюра не будет.

ALIGN

Размещение таблицы на странице или внутри ячейки другой таблицы в случае, если таблица вставлена в ячейку другой таблицы. Возможные значения параметра ALIGN - center (выравнивание таблицы по центру), left (выравнивание по левому краю) и right (выравнивание по правому краю).

CELLPADDING

Ширина отступа от края ячейки до содержимого ячейки внутри всех ячеек таблицы в пикселах.

CELLSPACING

Ширина отступа между ячейками таблицы в пикселах.

Пример:

<TABLE BORDER=0 WIDTH=100% CELLSPACING=1
CELLPADDING=5 BGCOLOR=blue>
<TR BGCOLOR=yellow>
<TD>Товар</TD>
<TD>Цена</TD>
</TR>
<TR BGCOLOR=white>
<TD>Карандаш</TD>
<TD>1 рубль</TD>
</TR>
</TABLE>

Результат:
Товар Цена
Карандаш 1 рубль


<TR> и <TD>

ALIGN

Горизонтальное выравнивание элементов внутри каждой ячейки данного ряда или отдельной ячейки таблицы. Возможные значения данного параметра - left (выравнивание по левому краю), right (выравнивание по правому краю) и center (выравнивание по центру ячейки).

VALIGN

Вертикальное выравнивание элементов внутри каждой ячейки данного ряда или отдельной ячейки таблицы. Возможные значения данного параметра - top (выравнивание от верха ячейки), middle (выравнивание центру ячейки) и bottom (выравнивание низа ячейки).

"Создание таблиц - приемы и хитрости"

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

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

Первый шаг - создание внешней таблицы
Прежде всего нужно создать внешнюю таблицу, которая будет представлять основу вашей страницы. В нашем примере внешняя таблица состоит из 5 ячеек. Первая ячейка - это левая колонка, вторая и четвертая ячейки будут пустыми и предназначены для создания небольшого расстояния между колонками нашей страницы, третья ячейка - центральная колонка и наконец пятая ячейка - это правая колонка с рекламой. На начальном этапе нужно задать величину бордюра вокруг равной 1, чтобы было видно где находятся ячейки таблицы. Когда страница будет готова, нужно убрать бордюр, задав значение параметра BORDER равным нулю. Итак, вот код нашей внешней таблицы:

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>

<TR>
<TD BGCOLOR=#336699 WIDTH=1% VALIGN=top>
<IMG SRC=img/p.gif WIDTH=160 HEIGHT=1 ALT=""><BR>
<FONT COLOR=white>Меню сайта:</FONT>
</TD>

<TD WIDTH=2% BGCOLOR=#cccccc>&nbsp;</TD>

<TD WIDTH=94% VALIGN=top BGCOLOR=#cccccc>
Текст основного содержания вашей страницы.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</TD>

<TD WIDTH=2% BGCOLOR=#cccccc>&nbsp;</TD>

<TD WIDTH=1% VALIGN=top BGCOLOR=#cccccc>
<IMG SRC=img/p.gif WIDTH=100 HEIGHT=1 ALT=""><BR>
<FONT COLOR=white>Реклама:</FONT>
</TD>

</TR>

</TABLE>

 Как видно из HTML кода вся таблица состоит из одного ряда, в котором находится 5 ячеек. Общая ширина таблицы задана равной 100% (WIDTH=100%). Далее применяется следующий прием. Ширина каждой ячейки задается в процентах, при чем сумма параметров WIDTH всех ячеек должна равняться 100%. В противном случае не во всех броузерах будет одинаковым результат. Хитрость заключается в том, чтобы задать заведомо больший размер в процентах для центральной колонки (третья ячейка), и заведомо меньший размер левой и правой колонок (первая и последняя ячейки ряда), а затем вставить в первую и последнюю ячейку так называемую "распорку". Роль распорки выполняет прозрачная картинка размером в один пиксел. <IMG SRC=img/p.gif WIDTH=150 HEIGHT=1 ALT="">
(см. HTML код выше). Таким образом третья ячейка таблицы стремиться к 94% размера таблицы, но сделать ей это не дают распорки (прозрачные картинки шириной 150 пикселов в первой ячейке и 100 пикселов в последней ячейке).

Вы можете сохранить прозрачную картинку на свой компьютер и использовать ее на своих HTML страницах. Для этого нажмите правой кнопкой мыши здесь и выбрав пункт всплывающего меню "Сохранить ссылку как" ("Save link as") в броузере Netscape Navigator или "Сохранить объект как" ("Save object as") в броузере Internet Explorer.

Обратите внимание на то, что значение параметра VALIGN (вертикальное выравнивание внутри ячейки) задано top. Это сделано для того, чтобы текст во всех трех колонках начинался от самого верхнего края ячейки. 

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

Давайте посмотрим на следующий пример. Предположим, вам нужна страница, состоящая из трех колонок. Колонка слева будет содержать навигационное меню по сайту, и по ширине должна составлять 150 пикселов (точек монитора). Колонка справа должна занимать 100 пикселов, а колонка в центре должна занимать все оставшееся пространство, независимо от разрешения монитора у того, кто просматривает страницу. Цвет левой колонки должен быть темно-синим. Представьте что таблица, расположенная ниже представляет экран монитора, тогда ваш сайт должен выглядеть следующим образом:


  Меню сайта:
  ссылка 1
  ссылка2
    ссылка3
    ссылка4
  ссылка5
  ссылка6





 
 

Текст основного содержания вашей страницы. Здесь вы пишите все основное содержание, картинки и т.д.

Текст основного содержания вашей страницы. Здесь вы пишите все основное содержание, картинки и т.д.

 
 Реклама:
Рекламный текст и картинки вы можете поместить в эту колонку рекламный текст и картинки

Последний штрих, это задание фона страницы так, чтобы по краям таблицы не было белых промежутков. Это можно сделать задав параметр BACKGROUND тега <BODY> в виде картинки, левая часть шириной в 150 пикселов которой темно синяя, а правая часть картинки шириной в 1500 пикселов - серая. Почему именно 1500 пикселов? Наибольшее разрешение монитора обычно не превышает 1624 пиксела. Поэтому картинка, которая заполнит фон страницы должна быть шире 1624 пикселов, чтобы темно-синяя полоса не повторялась.

Ширину первой и последней колонок нашей страницы можно регулировать при помоши значения параметра WIDTH прозрачных картинок (распорок) в первой и последней ячейках нашей внешней таблицы (каркаса). Все что добавлено в этом последнем примере, это <BODY BACKGROUND=img/back.gif> вместо просто <BODY>.

Как видно на окончательной странице, вторая ячейка заползает на левую темно-синюю колонку. Для того, чтобы избавиться от этого, достаточно немного увеличить ширину прозрачной картинки (распорки), которая вставлена в первую ячейку внешней таблицы (каркаса). Например, вместо WIDTH=150 поставить WIDTH=160 и убрать параметры BGCOLOR из пяти ячеек внешней таблицы, так как больше эти параметры не нужны (их заменяет картинка фона страницы). Вот окончательный HTML код, который составляет страницу:

<BODY BACKGROUND=img/back.gif>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>

<TR>
<TD WIDTH=1% VALIGN=top>
<IMG SRC=img/p.gif WIDTH=160 HEIGHT=1 ALT=""><BR>
<FONT COLOR=white>Меню сайта:</FONT>
</TD>

<TD WIDTH=2%>&nbsp;</TD>

<TD WIDTH=94% VALIGN=top>
Текст основного содержания вашей страницы.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</TD>

<TD WIDTH=2%>&nbsp;</TD>

<TD WIDTH=1% VALIGN=top>
<IMG SRC=img/p.gif WIDTH=100 HEIGHT=1 ALT=""><BR>

<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0 WIDTH=100 BGCOLOR=#336699>

<TR>
<TD><FONT COLOR=#e0e0ff>&nbsp;Реклама:</FONT></TD>
</TR>

<TR>
<TD>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% BGCOLOR=#f0f0f0>
<TR>
<TD BGCOLOR=#cccc33>
<FONT SIZE=2>Рекламный текст и картинки вы можете поместить в эту колонку рекламный текст и картинки</FONT>
</TD>
</TR>
</TABLE>

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

</TD>

</TR>

</TABLE>

</BODY>

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

Каркас вашей страницы готов. Осталось сделать красивое оформление рекламного блока в правой колонке страницы. Для этого в последнюю ячейку нашей внешней таблицы вместо слова 'Реклама:' нужно вставить другую таблицу. Здесь приводится только HTML код этой таблицы. Вы должны уже уметь разбираться в HTML коде и понять как построена таблица. Считайте это практическим заданием. 

<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0 WIDTH=100 BGCOLOR=#336699>

<TR>
<TD><FONT COLOR=#e0e0ff>&nbsp;Реклама:</FONT></TD>
</TR>

<TR>
<TD>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% BGCOLOR=#f0f0f0>
<TR>
<TD BGCOLOR=#cccc33>
<FONT SIZE=2>Рекламный текст и картинки вы можете поместить в эту колонку рекламный текст и картинки</FONT>
</TD>
</TR>
</TABLE>

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

Теперь остается только убрать бордюр нашей внешней таблицы (BORDER=0), чтобы получилась наша страница. 

Для начала рассмотрим прием, который применен на данной странице и на всех страницах данного HTML руководства. Посмотрите внимательно на таблицу, которая находится в центре экрана и внутри которой надится текст, который вы сейчас читаете. Фон таблицы белый, а бордюр таблицы черный. Такого эффекта можно добиться применением дополнительных параметров тега <TABLE>, но мы этот вариант рассматривать не будем, так как бордюры таблиц в разных броузерах неодинаковы, да и выглядят они не лучшим образом. Вместо этого мы рассмотрим пример, который позволит вам лучше понять использование таблиц. Давайте еще раз посмотрим что должно получиться в результате использования этого приема:

Таблица

Аккуратный бордюр шириной в 1 пиксел черного цвета вокруг таблицы. Как добиться такого результата. Все достаточно просто.

  • Нужно создать первую таблицу и задать ширину таблицы с помощью параметра WIDTH тега <TABLE> Первая таблица должна состоять из одного ряда, в котором одна ячейка.
  • В эту ячейку нужно вставить еще одну таблицу, задав значение параметра WIDTH этой таблицы равным 100%. В результате ширина второй (внутренней) таблицы будет стремиться к ширине ячейки первой таблицы, в которой она находится.
  • Далее нужно задать параметр CELLPADDING первой таблицы равным ширине бордюра в пикселах, который вы хотите увидеть вокруг вашей мнимой таблицы. В нашем примере CELLPADDING=1 для первой таблицы. В результате вторая таблица стремиться сравняться с шириной ячейки первой таблицы, но параметр CELLPADDING не дает ей это сделать, оставляя бордюр.
  • Остается задать параметр BGCOLOR для первой таблицы (это будет цвет бордюра) и BGCOLOR для второй таблицы (это будет цвет фона нашей мнимой таблицы).
  • Параметр BORDER обоих таблиц должен быть равным 0, чтобы избежать отображения настоящих бордюров таблиц.

Далее приводится HTML код нашего примера:

<TABLE BGCOLOR=black BORDER=0 CELLSPACING=0
CELLPADDING=1 WIDTH=50% ALIGN=center>
<TR>
<TD>

<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=yellow WIDTH=100%>
<TR>
<TD ALIGN=center>Таблица</TD>
</TR>
</TABLE>

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

Более темным фоном выделен HTML код второй таблицы, которая вставлена в ячейку первой таблицы. Чтобы регулировать внешний вид вашей мнимой таблицы, используйте:

BGCOLOR первой таблицы - для цвета бордюра
CELLSPACING первой таблицы - для ширины бордюра
WIDTH первой таблицы - для ширины мнимой таблицы
BGCOLOR второй таблицы - для фона мнимой таблицы

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

 

"Создание таблиц - сложные таблицы"

Теперь, как вы могли уже догадаться, мы рассмотрим пример объединения нескольких ячеек таблицы по вертикали. Вот пример таблицы с объединением ячеек по вертикали (в столбце):

Наименования Цена (руб.) т
о
в
а
р
ы
1 Карандаш 1
2 Ручка шариковая 5
3 Тетрадь 4

Последние ячейки четырех рядов таблицы объединены между собой. Объединение осуществляется с помощью параметра ROWSPAN тега <TD>. Этот параметр аналогичен параметру COLSPAN с той лишь разницей, что он объединяет ячейки по вертикали.

ROWSPAN

Объединение нескольких ячеек в одном столбце таблицы в одну ячейку. Значение этого параметра означает количество ячеек, которые нужно объединить. Ниже приводится полный HTML код приведенной выше таблицы из нашего примера:

<TABLE BORDER=1>

<TR BGCOLOR=navy>
<TD><FONT COLOR=white></FONT></TD>
<TD><FONT COLOR=white>Наименования</FONT></TD>
<TD><FONT COLOR=white>Цена (руб.)</FONT></TD>
<TD ROWSPAN=4 BGCOLOR=white>
т<BR>о<BR>в<BR>а<BR>р<BR>ы
</TD>
</TR>

<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>1</FONT></TD>
<TD><FONT COLOR=blue>Карандаш</FONT></TD>
<TD><FONT COLOR=blue>1</FONT></TD>
</TR>

<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>2</FONT></TD>
<TD><FONT COLOR=blue>Ручка шариковая</FONT></TD>
<TD><FONT COLOR=blue>5</FONT></TD>

</TR>
<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>3</FONT></TD>
<TD><FONT COLOR=blue>Тетрадь</FONT></TD>
<TD><FONT COLOR=blue>4</FONT></TD>
</TR>

</TABLE>

Как видно из приведенного HTML кода, первый ряд таблицы состоит из четырех тегов <TD>, а остальные из трех. На самом деле все четыре ряда таблицы состоят из четырех ячеек, просто последние ячейки объединены в одну вертикальную ячейку, в которой написано товары. Объединение ячеек таблицы по вертикали происходит сверху вниз. То есть объединяется n-ное число ячеек, начиная от той, в которой использован параметр ROWSPAN. Давайте еще раз посмотрим повнимательнее на фрагмент HTML кода ячейки в которой происходит объединение:

<TR BGCOLOR=yellow>
<TD><FONT COLOR=white></FONT></TD>
<TD><FONT COLOR=white>Наименования</FONT></TD>
<TD><FONT COLOR=white>Цена (руб.)</FONT></TD>
<TD ROWSPAN=4 BGCOLOR=white> ... </TD>
</TR>

В четвертой ячейке происходит объединение четырех (ROWSPAN=4) ячеек в столбце. В результате три последующих ряда таблицы должны содержать только три ячейки (четвертая объединена в первом ряду), как и показано в нашем примере.

Итак, создавать простые таблицы вы уже научились. Есть еще несколько параметров тега <TD>, с помощью которых можно добиться интересных результатов. Предположим вам нужно создать следующую таблицу:

Наименования Цена (руб.)
1 Карандаш 1
2 Ручка шариковая 5
3 Тетрадь 4
Итого: 10 руб.

Последний ряд таблицы состоит из одной ячейки. Но как же так, вы ведь уверены, что все ряды должны состоять из одинакового количества ячеек. На самом деле так оно и есть. Просто три ячейки последнего ряда объединены в одну. Это делается с помощью параметра COLSPAN тега <TD>.

COLSPAN

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

<TR>
<TD COLSPAN=3 BGCOLOR=red>
<FONT COLOR=white>Итого: 10 руб.</FONT>
</TD>
</TR>

 

"Правила создания структуры сложных таблиц"

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

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

назад | оглавление | далее  

UniqPaid - получи деньги бесплатно

 

 

  

Работа в Интернет, спонсоры, раскрутка сайта.

три изобретения

Место для вашего банера взамен на наш 88x31 E-mail

| Главная | Язык HTML | CSS | JavaScript | Что такое Cookies | PHP4 |
| Медтехника | Работа | Спонсоры | Раскрутка сайта

© 2002  WebMaster E-mail