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

Код для такой таблицы будет выглядеть так:

<HTML>
<HEAD>
<TITLE>Построение таблицы</TITLE>
</HEAD>
<BODY >

<TABLE> <TR> <TD width=300 height=80 bgcolor=""> Строка для шапки</TD> </TR> <TR> <TD width=300 height=25 bgcolor=""> Строка для меню</TD> </TR> <TR> <TD width=300 height=250 bgcolor=""> Для содержимого</TD> </TR> <TR> <TD width=300 height=25 bgcolor=""> Низ сайта</TD> </TR> </TABLE>	Строка для шапки
	Строка для меню
	Строка для содержимого сайта
	Низ сайта

</BODY>
</HTML>

В следущем примере строку для содержимого страницы, разделим на две части,и в код этой строки между тегами <TR></TR> добавим теги <TD></TD> для левой колонки.Теперь шапка и строка для меню расположены над двумя колонками,вместо одной в первом примере, также строка низа расположена под двумя колонками, поэтому в теги этих строк добавим атрибут COLSAN=2
Код будет таким:

<HTML>
<HEAD>
<TITLE>Построение таблицы - 2</TITLE>
</HEAD>
<BODY >

<TABLE> <TR> <TD colspan=2>Строка для шапки</TD> </TR> <TR> <TD colspan=2>Строка для меню</TD> </TR> <TR> <TD>Левая колонка</TD> <TD>Для содержимого</TD> </TR> <TR> <TD colspan=2>Низ сайта</TD> </TR> </TABLE>	Строка для шапки
	Строка для меню
	Левая колонка	Строка для содержимого сайта
	Низ сайта

</BODY>
</HTML>

Если страница будет из трех колонок, то между тегами <TR></TR>, в которых размещена средняя часть сайта, помещаем еще одну пару тегов <TD></TD>, для правой колонки, значение COLSPAN,будет равняться 3, вместо 2 в предудущем примере, так как верх и низ сайта, расположены уже над и под тремя колонками.

В следующем коде, размеры и цвета указаны такие, какие применялись к этой таблице. Попробуйте применить свои цвета и размеры.

Строка для шапки
Строка для меню
Левая колонка	Строка для содержимого сайта	Правая колонка
Низ сайта

Код к такой таблице будет таким:

<HTML>
<HEAD>
<TITLE>Построение таблицы - 3</TITLE>
</HEAD>
<BODY >
<TABLE border=0 cellpadding=0 cellspacing=0> <TR>
<TD width=400 height=80 bgcolor="#FFCCCC" colspan=3>Строка для шапки</TD>
</TR>

<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Строка для меню</TD>
</TR>

<TR>
<TD width=100 height=190 bgcolor="#FFCCCC" >Левая колонка</TD>

<TD width=200 height=190 bgcolor="#FCF2EE">Для содержимого</TD>

<TD width=100 height=190 bgcolor="#FFCCCC">Правая колонка</TD>
</TR>

<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Низ сайта</TD>
</TR>

</TABLE>
</BODY>
</HTML>

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

Пример кода такой таблицы:

<HTML>
<HEAD>
<TITLE>Построение таблицы - 4</TITLE>
</HEAD>
<BODY >
<TABLE border=0 cellpadding=0 cellspacing=0>

<TR> <TD rowspan=4>Левая ячейка</TD> <TD colspan=2>Строка для шапки</TD> </TR> <TR> <TD colspan=2>Строка для меню</TD> </TR> <TR> <TD>Центр страницы</TD> <TD>Правая ячейка</TD> </TR> <TR> <TD colspan=2>Низ страницы</TD> </TR>	Левая ячейка	Строка для шапки
		Строка для меню
		Центр страницы	Правая ячейка
		Низ страницы

</TABLE>
</BODY>
</HTML>

Бывают таблицы вложенные. Это когда в таблицу помещается еще одна таблица. Например в одну из ячеяк нужно разместить форму подписки или какой-то график. Делается это просто. Между тегов <TD></TD>,той ячейки, в которой будет расположена таблица, пишется код уже новой таблицы так : <TD><TABLE><TR><TD></TD></TR></TABLE></TD>

На этом заканчиваем изучение основ построения таблиц. В следующем уроке научимся вставлять на сайт картинки.

Страницы: 1 2

Подписка на рассылку

Как создать сайт на CMS-движках, таких как, JOOMLA, PHP Fusion, установить на свой сайт форум, гостевую книгу, создать рассылку, установить форму оплаты и т.д.
О выпуске этих и других уроков вы узнаете, подписавшись на рассылку

Ваше имя

Ваш e-mail

Бесплатный мини-курс
по созданию сайта на
CMS - JOOMLA

размер файла 8.76 МБ
Скачать

Хотите Оставить Неизгладимое впечатление Oт посещения Вашего сайта При помощи прозрачного видео-двойника

Узнать подробности

Сделайте креативную Видео-Презентацию,
Музыкальный
Flash-Видео-Клип
Для Интернет
За Считанные Минуты!

Узнать подробности

"Сделать Виртуальную 3D Flash-Видео-Презентацию"
Для Эффективного Продвижения
Своего Онлайн-Имиджа
в Интернет!

Узнать подробности

"Как Самому Сделать
Профессиональный
Flash-Видео-Ролик?"

Узнать подробности