Создание разноцветных таблиц

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

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в тэге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тэг <ВОDY> будет выглядеть примерно так:

<BODY ВАСКGROUND="сооlbg.gif" ВGCOLOR=" # FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.


Листинг 14

Разноцветная таблица

<HTML> <BODY BACKGROUND="bgr.gif" BGCOLOR="YELLOW" > <CENTER> <TABLE BORDER=3 CELLPADDING=20> <CAPTION ALIGN=TOP><H2>Как просверлить бетонную стену</H2></CAPTION> <TR> <TD BGCOLOR=GRAY> <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> <TD BGCOLOR=RED ALIGN=CENTER> <H1>ПЕРФОРАТОР</H1> <H3>Только сегодня!</H3> <TABLE BORDER WIDTH=100%> <TR> <TD BGCOLOR=AQUA ALIGN=CENTER> <I>Почти бесплатно!</I></TD> </TR> </TABLE> </TABLE> <TD WIDTH=50% BGCOLOR=BROWN ALIGN=CENTER> <IMG SRC="perfor1.gif" WIDTH=200 HEIGHT=150> </TD> </TR> <TR> <TD BGCOLOR=PINK> <FONT SIZE=6 COLOR=BLUE>От 6 до 20 мм</FONT> </TD> <TD BGCOLOR=BLUE> <FONT SIZE=6 COLOR=PINK>Просверлим все</FONT> </TD> </TR> </TABLE> </CENTER > </BODY> </HTML>

Лекция № 3

Элементы работы со списками

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

В HTML есть специальные элементы-контейнеры для представления данных в виде списков. Основными тэгами списков являются нумерованные и маркированные списки, меню, перечни каталогов и определений. Для получения дополнительных эффектов различные типы списков могут вкладываться друг в друга.

Упорядоченный (нумерованный) список. Тэг <OL> и его атрибуты

Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-либо действий. Когда программа встречает тэг упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т.д.

Упорядоченный список открывается тэгом <OL>, а каждый его пункт начинается стандартным тэгом <LI>. Для создания заголовка списка используется специальный тэг <LH>. Список закрывается тэгом <OL/>. Открывающий и закрывающий тэги обеспечивают перевод строки до и после списка, отделяя таким образом список от остального текста, поэтому здесь нет необходимости использовать тэги абзаца <P>.

Базовый шаблон упорядоченного списка выглядит следующим образом:

<OL>
<LI> Item_1
<LI> Item_2
...
</OL>

В HTML версии 3.2 введены несколько новых атрибутов тэга <OL>. Они позволяют устанавливать вид маркеров элементов списка, а также задавать начальный маркер списка. Ниже перечислены эти атрибуты и их значения:

ü COMPACT - представляет список в более компактном виде;

ü TYPE = A - устанавливает маркер в виде прописных букв;

ü TYPE = a - устанавливает маркер в виде строчных букв;

ü TYPE = I - устанавливает маркер в виде больших римских цифр;

ü TYPE = i - устанавливает маркер в виде маленьких римских цифр;

ü TYPE = 1 - устанавливает маркер в виде арабских цифр;

ü START = n - устанавливает начальный маркер в текущем списке; n - номер, с которого начинается нумерация в списке.

Неупорядоченный (маркированный) список. Тэг <UL> и его атрибуты

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

Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами списка (bullets). Как и в упорядоченных списках, здесь также обеспечивается перевод строки до и после списка, а также допускается вложенность списков. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тэгом <LI>. Программы просмотра создают автоматический отступ для вложенных списков и сами разнообразят маркеры, вид которых зависит от типа программы.

Базовый шаблон неупорядоченного списка выглядит следующим образом:

<UL>
<LI> Item_1
<LI> Item_2
...
</UL>

Как и в случае тэга <OL>, для тэга <UL>в HTML 3.2 используются расширения браузера Netscape по управлению видом маркеров.

Их вид можно устанавливать при помощи атрибута TYPE, который допускает три значения: DISK, SQUARE, CIRCLE.

Как и тэг <OL>, тэг <UL> имеет атрибут COMPACT, позволяющий выводить неупорядоченный список в более компактном виде.

Меню

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

Как и предыдущие типы списков, список-меню автоматически отделяется от остального текста кодами перевода строки и может включать другие элементы HTML. Как правило, пункты меню являются указателями ссылок на части того же документа, на другой документ, либо на другие ресурсы сети.

Список типа <DIR>

Элемент DIR весьма похож на элемент MENU и служит для идентификации определенной части документа, которая в будущих версиях языка, возможно, получит новые полезные функции. Список контейнера, начинающегося тэгом <DIR>, выводится браузерами аналогично неупорядоченным спискам.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: