Таблицы
Не думайте, что таблицы - это просто способ
разбить текст на колонки. Немного
фантазии, и тег <TABLE> может стать
мощным орудием компоновки объектов на странице. Например, Вы вовсе не
обязаны показывать контуры таблицы, ее ячейки и линии. А это значит,
что тег <TABLE>
применим для размещения текстовых и графических частей в разных
местах страницы.
Таблица начинается с тега
<TABLE> и кончается парным ему тегом
</TABLE>. Имейте в виду, что если
начало и конец таблицы не определены, то ни какие табличные теги
работать не будут. Кроме того, необходимо отметить, что тег
<TABLE>, как и многие другие,
автоматически переводит строку до и после таблицы.
Одним из самых "важных" параметров таблицы
является параметр BORDER = i
где i - колличество пикселов.
Этот тег отвечает за создание рамки вокруг таблицы
толщиной i. Если поставить
BORDER = 0, то
рамки не будет видно.
Тег <TR>
создает строку таблицы. Если в таблице присутствует два
набора тегов <TR> и
</TR>, в ней будут две строки и т.д.
Весь текст, другие теги и параметры, которые Вы хотите поместить в
одну строку, должны быть помещены между тегами
<TR></TR>.
Внутри каждой строки должны размещаться ячейки.
Каждая ячейка, как содержащая текст или изображение, так и без него,
должна быть окружена тегами <TD></TD>.
Число этих тегов в строке определяет число ячеек. Строка с пятью парами
этих тегов будет состоять из пяти ячеек.
Число ячеек в строке не обязательно должно быть
постоянным. Например, в одной строке может стоять пять пар этих тегов и,
следовательно, пять ячеек, а в другой - три пары этих тегов и три
ячейки (это мы рассмотрим позже).
При задании заголовков для толбцов и строк
используются теги
<TH></TH>.
Эти теги аналогичны тегам <TD>,
отличие состоит в том, что текст, заключенный между тегами
<TH>, автоматически записывается
жирным шрифтом и по умолчанию располагается по середине ячейки.
Итак, в итоге получается, что таблица будет
иметь следующий вид:
<TABLE BORDER=1>
<TR>
<TD>
первая ячейка первой строки
</TD>
<TD>
вторая ячейка первой строки
</TD>
<TD>
третья ячейка первой строки
</TD>
</TR>
<TR>
<TD>
первая ячейка второй строки
</TD>
<TD>
вторая ячейка второй строки
</TD>
<TD>
третья ячейка второй строки
</TD>
</TR>
</TABLE>
Вот как это будет выглядеть на экране:
| первая ячейка первой строки |
вторая ячейка первой строки |
третья ячейка первой строки |
| первая ячейка второй строки |
вторая ячейка второй строки |
третья ячейка второй строки |
Теперь займемся параметрами таблицы. Начнем с
параметров тега <TABLE>.
Параметр CELLSPACING=
определяет в пикселах ширину промежутков между ячейками. Если этот
параметр не задан, по умолчанию задается величина, равная двум пикселам.
С помощью этого параметра можно
получить интересные эффекты, например толстые рамки вокруг текста и
графики (попробуйте поставить CELLSPACING =
10 и
BORDER = 8
одновременно).
Параметр CELLPADDING=
определяет ширину пустого пространства между содержимым ячейки и ее
границами, то есть задает поля внутри ячейки.
Параметр HEIGHT=
определяет размер таблицы по вертикали (если содержимое таблицы, по
своему объему выйдет за этот размер, то таблица просто автоматически
увеличится). Задается в пикселах.
Параметр WIDTH=
определяет размер таблицы по горизонтали и применяется в двух случаях.
Можно поместить его в тег <TABLE>
для задания ширины всей таблицы (можно указывать как в пикселах, так и
в процентах), а можно использовать в теге
<TD> для задания ширины ячейки или
группы ячеек. И в этом случае ширину можно указывать как в пикселах, так и в
процентах.
Вот мы постепенно и перешли к параметрам самих
ячеек.
Если Вы хотите сделать какую-нибудь ячейку шире,
чем верхняя или нижняя, можно воспользоваться параметром
COLSPAN=, чтобы растянуть ее над любым
количеством обычных ячеек.
Параметр ROWSPAN=
аналогичен параметру COLSPAN=, только он
задает число строк, на которые растягивается ячейка. Если Вы указали
в этом параметре число, большее единицы, то соответствующее количество
строк должно находиться под растягиваемой ячейкой. Нельзя поместить ее
внизу таблицы.
Обычно любой текст в таблице, не помещающийся в
одну строку ячейки, переходит на следующую строку. Однако при
использовании параметра NOWRAP= длина
ячейки расширяется на столько, чтобы заключенный в ней текст поместился
в одну строку.
Также ячейки можно модифицировать с помощью
параметров ALIGN= и
VALIGN=.
Параметр
ALIGN= определяет выравнивание текста и
графики внутри ячейки по горизонтали, то есть по левому/центру/правому
краю. Горизонтальное выравнивание может быть задано несколькими
способами:
ALIGN=BLEEDLEFT
- прижимает содержимое ячейки вплотную к левому краю
ALIGN=LEFT
- выравнивает содержимое ячейки по левому краю с учетом отступа,
заданного параметром CELLPADDING=
ALIGN=CENTER
- располагает содержимое ячейки по центру
ALIGN=RIGHT
- выравнивает содержимое ячейки по правому краю с учетом отступа,
заданного параметром CELLPADDING=
Параметр
VALIGN= осуществляет выравнивание текста
и графики внутри ячейки по вертикали. Вертикальное выравнивание может
быть несколькими способами:
VALIGN=TOP
- выравнивает содержимое ячейки по ее верхней границе
VALIGN=MIDDLE
- центрирует содержимое ячейки по вертикали
VALIGN=BOTTOM
- выравнивает содержимое ячейки по ее нижней границе
В заключении необходимо отметить, что любой
таблице (как в целом, так и для каждой яцейки отдельно) можно
присвоить свой цвет фона (он не будет зависить от фона всей страницы).
Его можно задать как
BGCOLOR="#код цвета",
а также
BACKGROUND="имя_файла.gif".
Вам выбирать ;)
|
|
