|
Таблицы (часть I) |
|
|
Таблицы имеют очень большое значение при
создании web-страниц. Для отображения некоторых данных удобно использовать
таблицы. Кроме того, профессиональные web-мастера используют таблицы, как
средство для создания правильной структуры сайта и отображения информации
(здесь применяются, так называемые, невидимые таблицы, которые играют роль,
своего рода, верстальной сетки для размещения элементов web-страницы). Отметим
еще одно свойство таблиц, которое может Вам пригодиться: содержимое ячеек
таблицы, как правило, отображается браузерами, только по достижению конца
таблицы, т.е. когда таблица полностью загрузиться.
Таблицы в HTML организуются как набор столбцов и строк, т.е.
структура представления таблиц, примерно такая же, как и в текстовых
процессорах типа Microsoft Word. Ячейки таблицы могут содержать любые
HTML-элементы: обычный тест, заголовки, списки, абзацы, графику, формы,
вложенные таблицы и т.д.
Таблица определяется тегами <TABLE> и </TABLE>, внутри которых и
должны находиться все элементы и данные таблицы. Этот основополагающий тег
может иметь множество атрибутов, о которых мы поговорим позже.
<CAPTION> и </CAPTION> - определяют
название таблицы: (подпись). Тэг <CAPTION> должен присутствовать внутри
<TABLE> и </TABLE>, но снаружи описания какой-либо строки или
ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top (подпись вверху
перед таблицей), но может быть явно установлен в ALIGN=bottom (подпись внизу
после таблицы). Атрибут ALIGN определяет, где - сверху или снизу таблицы -
будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
<TR> и </TR> - определяют строку
таблицы. Количество строк всей таблицы определяется количеством встречающихся
пар тэгов <TR> и </TR>. Новая строка определяется тегом <TR>,
а ее закрытие тегом </TR>. Строки могут иметь атрибуты ALIGN и VALIGN,
которые описывают визуальное положение содержимого строк (горизонтальное и
вертикальное выравнивание) в таблице.
<TD> и </TD> - определяют ячейку
таблицы. Ячейка таблицы может быть описана только внутри строки таблицы (!),
т.е. в своеобразный контейнер, образуемый тегами <TR> и </TR>,
вкладываются столько тегов <TD> и </TD>, сколько необходимо
получить ячеек (а для таблицы в целом это будут колонки) в данной строке.
Количество ячеек в каждой строке должно быть одинаково, в противном случае
возможно не совсем корректное отображение страницы браузером! Для объединения
(слияния) нескольких ячеек (строк или столбцов) используются специальные
атрибуты, о которых мы также скажем позже. Расположение данных в ячейке
определяется атрибутами ALIGN и VALIGN, действие которых аналогичны таковым для
тега <TR>. Они применяются в ситуации, когда горизонтальное или
вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания,
заданного для всей строки.
<TH> и </TH> - определяют ячейку
таблицы также как и <TD> и </TD>, с небольшими отличиями: текст в
данной ячейке будет выделен жирным эффектом, а данные будут позицироваться по
центру ячейки. Как правило, применяется, когда необходимо создать что то типа
заголовка для строки или столбца данной таблицы.
Для понимания механизма построения таблиц в HTML, приведем
практический пример (для наглядного восприятия результата укажем в теге TABLE
атрибут border=2, смысл которого раскроем позже):
Пример:
<TABLE
border=2>
<CAPTION>Таблица</CAPTION>
<TR> <!-- определяем начало 1 строки таблицы -->
<TD>A ячейка</TD>
<TD>B ячейка</TD>
<TD>C ячейка</TD>
</TR> <!-- определяем конец 1 строки таблицы -->
<TR> <!-- определяем начало 2 строки таблицы -->
<TD>D ячейка</TD>
<TH>E ячейка</TH>
<TD>F ячейка</TD>
</TR> <!-- определяем конец 2 строки таблицы -->
</TABLE>
Результат:
|
Таблица |
||
|
A ячейка |
B ячейка |
C ячейка |
|
D ячейка |
E ячейка |
F ячейка |
Итак, мы создали таблицу, состоящую из 2-ух срок. Каждая
строка содержит 3 ячейки, таким образом, таблица в целом имеет 3 колонки.
Название выведено перед таблицей. E-ячейка немного отличается от других ячеек,
потому что она создана при помощи тегов <TH> и </TH>. Заметьте
также, что при написании html-кода теги, отвечающие за строки и ячейки, немного
смещают вправо для удобства редактирования данных через время.
Дополнительные атрибуты
Теперь более подробно рассмотрим атрибуты, которые могут
использоваться при создании таблиц:
BORDER – определяет толщину
обрамления элементов таблицы в пикселах. Данный атрибут используется в теге
<TABLE>. Если он присутствует, то граница таблицы прорисовывается для
всех ячеек и для таблицы в целом. Если атрибут не установлен или его значение
равно 0, таблица показывается без рамки (невидимая таблица). BORDER принимает
числовые значения, которые определяют ширину границы в пикселях, например
BORDER=3.
ALIGN – горизонтальное
выравнивание данных в элементах таблицы. Если атрибут ALIGN присутствует внутри
тегов <CAPTION> и </CAPTION>, то он определяет положение подписи
для таблицы значениями top и bottom соответственно для подписи сверху и снизу.
Если атрибут ALIGN встречается внутри <TR>, <TH> или
<TD>, он управляет положением данных в ячейках по горизонтали. Может принимать
следующие значения:
left – выравнивание по левому краю;
right – выравнивание по правому краю;
center – выравнивание по центру;
VALIGN - определяет
вертикальное выравнивание данных в элементах таблицы. Данный атрибут
используется внутри тегов <TR>, <TH> и <TD>. Он определяет
вертикальное выравнивание данных в ячейках строки (параметр находится внутри
<TR>) или в конкретной ячейке (параметр находится внутри <TD> или
<TH>). Может принимать следующие значения:
top – выравнивание по верхнему краю;
bottom – выравнивание по нижнему краю;
middle – выравнивание по центру;
baseline – выравнивание по базовой линии: данные ячейки прижаты к верху;
Примечание: все дополнительные
атрибуты являются необязательными и могут применяться по мере необходимости.
Остальные дополнительные атрибуты, используемые при создании
таблиц, мы рассмотрим во второй части.
|
Таблицы (часть II) |
|
|
Итак, продолжим описание
дополнительных атрибутов, которые могут быть использованы при создании таблиц.
NOWRAP - может
использоваться внутри тегов <TD> или <TH>, присутствие данного
атрибута говорит о том, что данные в ячейке не могут логически разбиваться на
несколько строк и поэтому должны быть представлены в одну строку. Если ширины
ячейки для этого недостаточно, то она автоматически будет увеличена, даже если
это вызовет появления горизонтальной полосы прокрутки в браузере.
COLSPAN - также как и
предыдущий атрибут, используется внутри тегов <TD> или <TH> и
устанавливает "размах" ячейки таблицы по горизонтали, то есть
количество ячеек, которые будут объединены по горизонтали, начиная с указанной
ячейки. По умолчанию это значение равно 1. Например, COLSPAN="3"
означает, что ячейка простирается на три колонки.
ROWSPAN - используется
внутри тегов <TD> или <TH>, устанавливает "размах" ячейки
по вертикали, то есть количество ячеек, которые будут объединены по вертикали,
начиная с указанной ячейки вниз. По умолчанию это значение равно 1. Например, ROWSPAN="2"
означает, что ячейка занимает две строки.
WIDTH - этот атрибут
может использоваться в тегах <TABLE>, <TR>, <TD> и
<TH>, определяет ширину всей таблицы (если указывается в теге
<TABLE>), строки (если указывается в теге <TR>) или конкретной
ячейки (если указывается в теге <TD> или <TH>). Значение этого
атрибута можно задавать как в пикселах (например, WIDTH="400"), так и
в процентах от ширины страницы, таблицы, строки - соответственно при
использовании внутри тегов <TABLE>, <TR>, <TD> и <TH>,
то есть процентное отношение вычисляется от элемента более высокого уровня
(например, WIDTH="80%").
HEIGHT - может
использоваться в тегах <TABLE>, <TR>, <TD> и <TH>. Этот
атрибут определяет высоту всей таблицы (если указывается в теге <TABLE>),
строки (если указывается в теге <TR>) или конкретной ячейки (если
указывается в теге <TD> или <TH>). Значение этого атрибута можно
задавать как в пикселах (например, HEIGHT="40"), так и в процентах от
высоты текущего окна браузера, таблицы, строки - соответственно при
использовании внутри тегов <TABLE>, <TR>, <TD> и <TH>,
то есть процентное отношение вычисляется от элемента более высокого уровня
(например, HEIGHT="80%"). Но использовать процентное задание значения
этого атрибута следует осторожно, внимательно следя за правильность значений.
CELLSPACING - этот атрибут
может использоваться только в теге <TABLE>. Он устанавливает расстояние
между ячейками таблицы. Если ячейки имеют рамку (см. атрибут BORDER в первой
части), результат применения этого атрибута наглядно виден: расстояние между рамками
ячеек таблицы. Значение атрибута может задаваться только в пикселах (например,
CELLSPACING="2", что соответствует таблице с расстоянием 2 пиксела
между ячейками).
CELLPADDING - этот атрибут
также может использоваться только в теге <TABLE>. Он устанавливает для
всех ячеек вертикальный и горизонтальный отступ данных от края ячейки. Если
ячейки имеют рамку (см. атрибут BORDER в первой части), то результат применения
этого атрибута также становится наглядно виден: расстояние между рамкой ячейки
и данных этой ячейки. Значение атрибута может задаваться только в пикселах
(например, CELLPADDING="10", то есть все ячейки таблицы будут иметь
отступ в 10 пикселов, между краем ячейки и ее содержимым).
BGCOLOR - этот атрибут
подобен атрибуту BGCOLOR тега BODY (см. вторую часть "Основы языка
HTML") и может использоваться в тегах <TABLE>, <TR>,
<TD> и <TH> для задания цвета фона соответственно всей таблицы
(если используется в теге <TABLE>), строки (если используется в теге
<TR>) или конкретной ячейки (если используется в теге <TD> или
<TH>). Для указания (определения) цвета используются либо именованные
цвета (вынесены отдельным пунктом в разделе "HTML"), либо коды цветов
(для этого ставится символ "#", а за ним без пробела шесть шестнадцатеричных
чисел, определяющих цвет в кодировке RGB). Например, BGCOLOR="red".
Вы можете использовать этот атрибут неоднократно, например, указав для фона
всей таблицы один цвет, а для конкретной ячейки другой.
BACKGROUND - этот атрибут
подобен атрибуту BACKGROUND тега BODY (см. вторую часть "Основы языка
HTML") и может использоваться в тегах <TABLE>, <TR>,
<TD> и <TH> для определения графического фона соответственно всей
таблицы (если используется в теге <TABLE>), строки (если используется в
теге <TR>) или конкретной ячейки (если используется в теге <TD> или
<TH>). Значение этого атрибута состоит из абсолютного или относительного
адреса и имени (с расширением) файла текстуры, которую Вы хотите использовать.
Например, BACKGROUND="textura.gif". Механизм следующий: браузер
сначала отображает ячейки таблицы на основном фоне страницы, затем добавляет
цвет фона ячейки, а затем графический фон ячейки.
Мы описали все возможные атрибуты таблиц, а теперь приведем
пример построения более сложной таблицы. Допустим, необходимо построить такую
таблицу:
|
Вид товара |
Количество, шт. |
|
|
по плану |
фактически |
|
|
Шкафы |
120 |
118 |
|
Стулья |
2000 |
1960 |
|
Кровати |
1500 |
1485 |
Это реализуется следующим образом:
<table
width="100%" border=1 ALIGN=CENTER CELLSPACING=2 CELLPADDING=3
bgcolor="white">
<tr>
<td width="30%" rowspan="2"
align="center" valign="middle" bgcolor="red"
background="textura.gif">Вид товара</td>
<td width="70%" colspan="2"
align="center">Количество, шт.</td>
</tr>
<tr>
<td width="35%"
align="center">по плану</td>
<td width="35%"
align="center">фактически</td>
</tr>
<tr>
<td width="30%">Шкафы</td>
<td width="35%"
align="center">120</td>
<td width="35%"
align="center">118</td>
</tr>
<tr>
<td width="30%">Стулья</td>
<td width="35%"
align="center">2000</td>
<td width="35%"
align="center">1960</td>
</tr>
<tr>
<td width="30%">Кровати</td>
<td width="35%"
align="center">1500</td>
<td width="35%"
align="center">1485</td>
</tr>
</table>
А вот несколько относительно новых атрибутов, используемых в
таблицах. Их поддержка полностью реализована в последних версиях браузеров:
bordercolor - этот атрибут
определяет цвет обрамления (окантовки), ширина которого задана в атрибуте
border. Если значение атрибута border равно 0, то есть рамка отсутствует, то
использовать атрибут bordercolor, который задает цвет рамки, не имеет смысла,
поскольку рамка все равно отсутствует. Этот атрибут уверенно поддерживается
браузерами Internet Explorer и Netscape Navigotor, начиная с 4-ых версий,
однако он несколько по-разному ими интерпретируется, поэтому расскажем о каждом
случае отдельно.
Internet Explorer
Данный тег может использоваться в тегах <TABLE>, <TR>, <TD> и
<TH> для определения цвета обрамления соответственно всей таблицы (если
используется в теге <TABLE>), строки (если используется в теге
<TR>) или конкретной ячейки (если используется в теге <TD> или
<TH>). Цвет рамки становится однотонным: того цвета, который был задан.
Цвет левого-верхнего угла такой же, как и у правого-нижнего.
Netscape Navigator
Данный тег может использоваться только в теге <TABLE>. В данном случае он
задает цвет обрамления не всех "перегородок" обрамления, а только
цвет внешнего обрамления для всей таблицы. Причем заданный цвет не однотонно
заполняет всю внешнюю область окантовки таблицы: автоматически цвет
левого-верхнего угла становится чуть светлее заданного цвета, а цвет
правого-нижнего угла - чуть темнее, тем самым создается эффект объемности.
В браузере Internet Explorer эффект объемности достигается
путем использования еще 2-ух атрибутов, описанных ниже.
bordercolorlight - этот атрибут не
оказывает никакого эффекта в браузерах Netscape. Он предназначен для браузеров
Internet Explorer. Используется для определения цвета светлой части окантовки.
При использовании в теге <TABLE> - это цвет левой-верхней части
окантовки, при использовании в тегах <TR>, <TD> и <TH> - это
цвет правой-нижней части окантовки.
bordercolordark - этот атрибут
аналогично предыдущему не оказывает никакого эффекта в браузерах Netscape. Он предназначен
для браузеров Internet Explorer. Используется для определения цвета темной
части окантовки. При использовании в теге <TABLE> - это цвет
правой-нижней части окантовки, при использовании в тегах <TR>, <TD>
и <TH> - это цвет левой-верхней части окантовки.
