Онлайн учебник по HTML и JAVASCRIPT

Элементы языков HTML и JAVASCRIPT

Разделительные линии между столбцами и рядами таблицы HTML

Разделительные линии между столбцами и рядами таблицы описывается атрибутом RULES в теге <TABLE>. Атрибут RULES может принимать следующие значения, задающие способ изображения разделительных линий:

ALL — все вертикальные и горизонтальные линии;
ROWS — только горизонтальные линии между рядами;
COLS — только вертикальные линии между столбцами;
NONE — не изображать разделительные линии.

Приведем пример управления дизайном таблиц.

<HTML>
<НЕАD> <ТITLE>Таблицы</ТITLE></НЕАD> <BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>Различный дизайн таблиц
<Р>
<TABLE BORDER=15 FRAME=BOX RULES=ROWS WIDTH=300>
<CAPTION ALIGN=TOP>Cписок сотрудников</САРТION>
<TR>
<TH COLSPAN=2>Имя и должность</ТН><ТН>Оклад</ТН>
</TR> <TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТП>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТD><ТD ROWSPAN=2>Pa6oчий</ТD><ТD>>50</TD>
</TR>
<TR>
<ТD>Василий</ТD><ТD>70</ТD>
</TR>
</TABLE> <TABLE BORDER=10 FRAME=BOX RULES=COLS WIDTH=300>
<CAPTION ALIGN=TOP>Список сотрудников</САРТION>
<TR>
<TH COLSPAN=2>Имя и должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТD>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТОХТП ROWSPAN=2>Pa6oчий</ТD><ТD>50</TD>
</TR>
<TR>
<ТD>Василий</ТD>70</ТD>
</TR>
</TABLE>
</BODY>
</HTML>

Таблицы в HTML

Рис. 662. Примеры оформления таблиц

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

<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>