Иллюстрированный самоучитель по WEB-графике


Таблицы - часть 6


<HTML>

<НЕАD> <ТITLE>Таблица</ТITLE></НЕАD>

<BODY>

<Н2>

Использование таблицы как способа расположения элементов на странице

</Н2>

<TABLE>

<TR>

<TD><A HREF="пример1.htm">Пример 1</A> </TD>

<TD> <IMAGE SRC="logotip.gif» WIDTH=100 HEIGHT=100> </TD>

<TD>1000</TD>

</TR>

<TR>

<TD> <A HREF="пример2.htm">Пример 2</A> </TD> <TD> <IMAGE ЗРС="квадрат.bmp"> </TD>

</TR>

</TABLE>

</BODY>

</HTML>

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

Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:

  • BORDERCOLOR — цвет всей рамки;
  • BORDERCOLORLIGHT — цвет светлой части рамки;
  • BORDERCOLORDARK — цвет темной части рамки.

Рис. 663. Пример размещения нескольких элементов с помощью таблицы без рамок

Эти атрибуты вставляются в тэг <TABLE>. Чтобы они действительно работали, необходимо присутствие еще и атрибута BORDER, задающего ширину рамки. Ниже приводится пример использования атрибута цвета в различных тэгах таблицы.

<TABLE BGCOLOR="#FOFOFO" BORDER=10 BORDERCOLOR="#808080" BORDERCOLORLIGHT="#707070" BORDERCOLORDARK="#202020"> <TR BGCOLOR="BLUE">

<ТН>Имя</ТН> <ТН>Адрес</ТН>

</TR>

<TR>

<TD BGCOLOR="YELLOW">Иван</ТD><ТD>г.Санкт-Петербург</ТD>

</TR>

</TABLE>

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

<TD BGCOLOR="YELLOW"><Н2>Иван</Н2> </ТD>

Теперь вы имеете общее представление о том, зачем нужны таблицы и как их создавать. Следует заметить, что таблицы удобно готовить в таких редакторах, как FrontPage и Dream Weaver. С их помощью визуальными средствами можно начертить таблицу и вставить в ее ячейки необходимые данные. В этом деле редактор Dream Weaver даже более удобен, чем FrontPage.




Начало  Назад  Вперед



Книжный магазин