Для многих тысяч web-мастеров таблицы один из самых часто применяемых элементов на своих страницах. Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д. Конечно, получить подобный результат можно и другими способами, но они немного сложнее и требуют некоторого опыта. Использование таблиц элементарное и понятное, вот например ниже код таблицы: <TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00">
<TR>
<TD>Первый ряд Ячейка 1</TD>
<TD> Первый ряд Ячейка 2</TD>
</TR>
<TR>
<TD> Второй ряд Ячейка 1</TD>
<TD>Второй ряд Ячейка 2</TD>
</TR>
</TABLE> Создайте новый документ и между <body> вставьте приведенный код и запустите в браузере. Можно даже сказать что это минимальный шаблон таблицы. Здесь присутствует обязательный парный тег <TABLE>, указывает на начало и конец таблицы. Тег <TR> выводит новую строку в таблице, а <TD> создает новую ячейку в строке. Аргументы которые присутствуют в коде необязательные и настраивают внешний вид таблицы, например: BORDER задает толщину рамки; WIDTH горизонтальный размер таблицы; BGCOLOR цвет фона таблицы.
Используя таблицы за пару минут можно построить будущий каркас сайта. Вот например, простой и очень неплохой шаблон страницы. Чтобы взглянуть на него снова новый документ и между <body> вставьте код таблиц.
<TABLE WIDTH="80%" HEIGHT="100%" BORDER="2" ALIGN="CENTER" BGCOLOR="#00FF00" >
<TR HEIGHT="75">
<TD ALIGN="CENTER">тут будет логотип сайта или какой-нибудь банер</TD>
</TR>
<TR HEIGHT="15">
<TD ALIGN="CENTER>"сюда по желанию, можно аккуратно вставить пару рекламных ссылок</TD>
</TR>
<TR><!--сюда вставляем меню и главное содержимое сайта-->
<TD ALIGN="CENTER">
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="2" BGCOLOR="#00FFFF" CELLPADDING="5">
<TR>
<TD WIDTH="150" VALIGN="TOP">
Меню<BR>
Пункт 1<BR>
Пункт 2<BR>
Пункт 3<BR>
Пункт 4<BR>
И так далее
</TD>
<TD VALIGN="TOP">
ОСНОВНОЕ СОДЕРЖИМОЕ СТРАНИЦЫ
</TD>
</TR></TABLE>
</TD>
</TR>
<TR HEIGHT="50">
<TD ALIGN="CENTER">а тут у нас будут всякие счетчики, рейтинги, хит-парады и т.д.</TD>
</TR>
</TABLE>
Разберемся со всем по порядку:
<TABLE WIDTH="80%" HEIGHT="100%" BORDER="2" ALIGN="CENTER" BGCOLOR="#00FF00">
- создаем первую таблицу: длина 80% от размера экрана; высота 100%; толщина рамки 2; выравнивание по центру; цвет фона таблицы.
<TR>
<TD HEIGHT="75" ALIGN="CENTER">тут будет логотип сайта или какой-нибудь банер</TD>
</TR>
- создаем новую строку, в которой создаем ячейку: аргументы задают высоту и выравнивание содержимого.
<TR>
<TD HEIGHT="15" ALIGN="CENTER"сюда по желанию, можно аккуратно вставить пару рекламных ссылок</TD>
</TR>
- тоже самое, новая строка и ячейка: аргументы высота и выравнивание.
<TR><!--сюда вставляем меню и главное содержимое сайта-->
<TD>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="2" BGCOLOR="#00FFFF" CELLPADDING="5">
<TR>
<TD WIDTH="150" VALIGN="TOP">
Меню<BR>
Пункт 1<BR>
Пункт 2<BR>
Пункт 3<BR>
Пункт 4<BR>
И так далее
</TD>
<TD VALIGN="TOP">
ОСНОВНОЕ СОДЕРЖИМОЕ СТРАНИЦЫ
</TD>
</TR></TABLE>
</TD>
</TR>
- теперь внимание! Создаем новую строку и новую ячейку, в которой мы располагаем ВТОРУЮ таблицу. Таблица имеет одну строку и две ячейки. В первой ячейке меню, во второй содержимое страницы, размер (длина по горизонтали) первой ячейки устанавливается нами, вторая ячейка сама займет оставшееся место
- еще заметьте (таблиц это не касается) тут мы используем комментарии к коду. Комментарий нигде не отображается и в основном важен только для web-мастера. Правила написания комментарий таковы <!—комментарий--> .
<TR>
<TD HEIGHT="50" ALIGN="CENTER">а тут у нас будут всякие счетчики, рейтинги, хит-парады и т.д.</TD>
</TR>
- создаем новую строку, в которой создаем ячейку: аргументы задают высоту и выравнивание содержимого.
</TABLE>
- закрываем первую таблицу
На этом пока-что завершаем. Продолжение следует…
|
