Урок_2

Код для такой таблицы будет выглядеть так:
<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>
На этом заканчиваем изучение основ построения таблиц. В следующем уроке научимся вставлять на сайт картинки.