Internet Zone >>

Бесплатные программы, полезные ресурсы, свежие номера журнала.   Нажимай!

Основы создания HTML-документа-3

Начало в 63, 65 выпусках

Таблицы

До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. Самые первые странички так и выглядели, как текст с заголовками (а потом и с картинками) просто сверху вниз. Таблицы превратили это скромное зрелище в полный сверкающего многообразия мир, хотя поначалу задумывались совсем для иных, сугубо утилитарных задач. Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>.

                <TABLE> 
                        <! описание таблицы >
                </TABLE>
Метка <TABLE> может включать несколько атрибутов:
 
ALIGN Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH Определяет ширину всей таблицы в пикселях(например, WIDTH=400), либо в процентах от ширины окна браузера(например, WIDTH=80%).
HEIGHT Определяет высоту всей таблицы в пикселях, либо в процентах от высоты окна браузера.
BORDER Устанавливает ширину рамки таблицы в пикселях, например, BORDER=2. Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).
CELLPADDING Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).
bgcolor параметр, управляющий цветом таблицы. Задается в формате RGB.
background=image.jpg параметр, управляющий картинкой-подложкой таблицы. image.jpg - имя картинки.

Заголовок таблицы (caption)

Таблица может иметь заголовок, хотя заголовок не является обязательным. Заголовок таблицы помещается между маркерами <CAPTION> и </CAPTION>. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения:
&ltCAPTION ALIGN=TOP> (заголовок помещается над таблицей) и
<CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Например:

                <TABLE ALIGN="center" BORDER=1>
                   <CAPTION>
                      Заголовок 
                   </CAPTION>                  
                   <! ...описание строк таблицы... >
                </TABLE>

Строки таблицы (table rows)

Каждая строка таблицы начинается с метки <TR> и заканчивается меткой <TR>.

<TABLE> 
<TR> <! ...описание ячеек 1-й строки... > </TR>
<TR> <! ...описание ячеек 2-й строки... > </TR>
<TR> <! ...описание ячеек 3-й строки... > </TR>
</TABLE>

 
ALIGN Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
bgcolor Параметр, управляющий цветом таблицы. Задается в формате RGB.
background параметр, управляющий картинкой-подложкой таблицы.

Ячейки таблицы (table data)

Каждая строка таблицы состоит из заголовочных ячеек, заключаемых в маркеры <TH> и </TH> или ячеек данных, обрамляемых маркерами <TD> и <TD>. Вот так выглядит типичная таблица из 3-х строк (из них первая - заголовочная) и 4-х колонок:

<TABLE>

<TR><TH>One</TH><TH>Two</TH><TH>Three</TH><TH>Four</TH></TR>
<TR><TD>1.1</TD><TD>1.2</TD><TD>1.3  </TD><TD>1.4 </TD></TR>
<TR><TD>2.1</TD><TD>2.2</TD><TD>2.3  </TD><TD>2.4 </TD></TR>
</TABLE>
One Two Three Four
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4

Метка <TD> может включать следующие атрибуты:

NOWRAP Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH Устанавливает ширину ячейки в пикселях (например, WIDTH=200).
HEIGHT Устанавливает высоту ячейки в пикселях (например, HEIGHT=40).

Пример 1:

<TABLE>
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы и ячеек.</TD>
</TR>
</TABLE>

Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек.
 

Пример 2:

<HTML> 
<HEAD> 
<TITLE>Пример 2</TITLE> 
</HEAD> 
<H1>Простейшая таблица </H1> 
<TABLE BORDER=1> <!--Это начало таблицы--> 
<CAPTION>        <!--Это заголовок таблицы--> 
У таблицы может быть заголовок 
</CAPTION> 
<TR>             <!--Это начало первой строки--> 
<TD>             <!--Это начало первой ячейки--> 
Первая строка, первая колонка 
</TD>            <!--Это конец первой ячейки--> 
<TD>             <!--Это начало второй ячейки--> 
Первая строка, вторая колонка 
</TD>            <!--Это конец второй ячейки--> 
</TR>            <!--Это конец первой строки--> 
<TR>             <!--Это начало второй строки--> 
<TD>             <!--Это начало первой ячейки--> 
Вторая строка, первая колонка 
</TD>            <!--Это конец первой ячейки--> 
<TD>             <!--Это начало второй ячейки--> 
Вторая строка, вторая колонка 
</TD>            <!--Это конец второй ячейки--> 
</TR>            <!--Это конец второй строки--> 
</TABLE>         <!--Это конец таблицы--> 
</BODY> 
</HTML>

Простейшая таблица

У таблицы может быть заголовок
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

Пример 3:

<TABLE BORDER=10 WIDTH=400 ALIGN=CENTER>
<TR>
<TD>Для этой таблицы задан параметр BORDER=10</TD>
</TR>
</TABLE>
Для этой таблицы задан параметр BORDER=10

Пример 4:

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 ALIGN=CENTER BGCOLOR="CYAN"> <TR ALIGN=CENTER> <TD WIDTH=10%>Ширина ячейки 10% ширины таблицы</TD> <TD WIDTH=60%>Ширина ячейки 60% ширины таблицы</TD> <TD WIDTH=30%>Ширина ячейки 30% ширины таблицы</TD> </TR> <TR> <TD ALIGN=CENTER COLSPAN=3>Для этой ячейки указан параметр COLSPAN=3</TD> </TR> </TABLE>

Ширина ячейки 10% ширины таблицы Ширина ячейки 60% ширины таблицы Ширина ячейки 30% ширины таблицы
Для этой ячейки указан параметр COLSPAN=3
 

Пример 5:

<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 
 ALIGN=CENTER BGCOLOR=CYAN>
<TR ALIGN=CENTER> 
<TD WIDTH=30% ROWSPAN=2 BGCOLOR="00FF00">Для этой 
ячейки указан параметр ROWSPAN=2 и
WIDTH=30%</TD>
<TD>Ширина этой ячейки не указана,
поэтому она занимает всю оставшуюся 
ширину таблицы, т. е. 70%.</TD>
</TR>
<TR ALIGN=CENTER>
<TD>А эта ячейка сгенерирована в
соответствии с шириной ячейки, находящейся 
в первой строке, над ней.</TD>
</TR>
</TABLE>
Для этой ячейки указан параметр ROWSPAN=2 и WIDTH=30% Ширина этой ячейки не указана, поэтому она занимает всю оставшуюся ширину таблицы, т. е. 70%.
А эта ячейка сгенерирована в соответствии с шириной ячейки, находящейся в первой строке, над ней.

К предыдущей главе

 

Автор: Казьмина Светлана

 


Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.