Основные атрибуты таблицы
Как видите, наша таблица получилась ровно такой ширины, какая нуж- ная, чтобы вместить написанную нами фразу, и ни на пиксел больше. С помощью атрибута
WIDTH=
можно устанавливать любую желаемую ширину
таблицы. Например, если мы напишем
<TABLE WIDTH="50" BORDER="3">,
Рис. 2.1
3
. Таблица из одной ячейки
то броузер отобразит таблицу шириной в 50 пикселов. При этом во фразе Это уже таблица! последнее слово, скорее всего, не поместится в длину таблицы и автоматически перенесется на другую строку. А если установить
WIDTH-50%,
то таблица растянется на половину ширины окна броузеоа (рис. 2.1
4).
Рис. 2.1
4
. Установка ширины таблицы
А что делать, чтобы текст не “прилеплялся” так сильно к границе ячейки как показано на рис. 2.14 и 2.15? Для этого тоже существует специальный атрибут —
CELLPADDING=.
Его значение определяет, на сколько точек текст будет отступать от края ячейки. Для лучшей иллюстрации этого атрибута выберем в качестве его значения какое-нибудь большое число например,20:
<TABLE WIDTH="50%" BORDER="3" CELLPADDING="20"> <TR>
<TD> Это уже таблица! </TD> </TR>
</TABLE>
Результат показан на рис. 2.1
5
. Разумеется, в обычных ситуациях величину
CELLPADDING=
устанавливают приблизительно равной 3-5 точек, чтобы просто немного отступить от края ячейки.
Рис. 2.1
5.
Применение атрибута
CELLPADDING=
Кроме того, имеется еще атрибут
CELLSPACING=,
который задает расстояние между ячейками таблицы. В данном случае мы можем увидеть действие этого атрибута по изменению расстояния между границами нашей единственной ячейки и рамкой таблицы. Для красоты сделаем при этом толщину табличной рамки чуть побольше:
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20"> <TR>
<TD> Это уже таблица! </TD> </TR> </TABLE>
Результат представлен на рис. 2.1
6.
Рис. 2.1
6
. Применение атрибута
CELLSPACING=
Кстати, рамка таблицы совершенно не обязана быть серой, по крайней мере в броузере
Internet Explorer
(версии 3 и выше). Для этого служит атрибут
BORDERCOLOR=,
которому можно дать в качестве значения любой доступный цвет. Однако, если вставить в наш пример что-нибудь вроде
BORDERCOLOR="green"
и сравнить результат с предыдущим, то он, скорее всего, вам не понравится: в предыдущем случае табличная рамка слева и
сверху выводилась более светлым оттенком, чем снизу и справа, за счет чего возникало впечатление “выпуклости”. А теперь вся рамка стала одноцветной — зеленой — и смотрится гораздо “скучнее”. То же справедливо и для рамки ячейки (которая была, наоборот, “вогнутой”).
Поэтому вместо одного атрибута
BORDERCOLOR=
мы рекомендуем употреблять два:
BORDERCOLORLIGHT=
и
BORDERCOLORDARK=,
задающие цвет, соответственно, светлой и темной сторон рамки. Правда, эти атрибуты поддерживаются только броузером
Internet Explorer.
<TABLE WIDTH="50%" BORDER=="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime" BORDERCOLORDARK="green">
<TR>
<TD> Это уже таблица! </TD>
</TR>
</TABLE>
Результат показан на рис. 2.17. Кстати, при просмотре на экране компьютера обратите внимание на то, что
lime
и
green —
в принципе подходящее, но не самое лучшее сочетание значений данных атрибутов. Для придания естественности табличной рамке полезно немного поэкспериментировать с оттенками цветов.
Рис. 2.1
7
. Окрашивание рамки таблицы
Цвет фона таблицы можно задать с помощью атрибута
BGCOLOR=.
Он может отличаться от цвета общего фона всей страницы, определенного атрибутом
BGCOLOR=
тега
<BODY>.
Чтобы выровнять таблицу по центру или правому краю, можно установить в теге
<TABLE>
атрибут
ALIGN=.
Все это мы сейчас проиллюстрируем, а заодно.давайте добавим еще одну ячейку в нашу таблицу:
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<TR>
<ТD>Это первая ячейка</ТD>
<ТD>Это вторая ячейка</ТD> </TR>
</TABLE>
Результат представлен на рис. 2.1
8
. Как видите, расстояние между ячейками сохраняется равным значению атрибута
CELLSPACING=
теперь это заметно особенно хорошо.
Рис. 2.1
8
. Таблица из двух ячеек
Теперь добавим в нашу таблицу вторую строку:
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN=="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">
<TR>
<ТD>Это первая ячейка</ТD>
<TD>Это вторая ячейка</ТD> </TR>
<TR>
<ТD>Это первая ячейка второй строки</ТD>
</TR>
</TABLE>
Поскольку во второй строке всего одна ячейка (см. рис. 2.
19
), на месте отсутствующей второй ячейки второй строки осталось пустое пространство.
Иногда это бывает полезно, но чаще требуется оставить пустую рамку незаполненной ячейки. Как это сделать? Если мы просто добавим в таблицу пару тегов
<TD> </TD>,
то, как ни странно, ничего не изменится — вокруг пустой ячейки рамка не отображается! Добавление пробела между тегами ячейки также ничего не дает, поскольку в
HTML
лишние пробелы игнорируются...
Рис. 2.
19
. Пример таблицы с “недостающей” ячейкой
Рис. 2.2
0
. Пример таблицы с пустой ячейкой
До сих пор мы рассматривали только атрибуты тега
<TABLE>
.
Однако теги
<TR>
и
<TD>
тоже могут иметь собственные атрибуты, такие, как
BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK=
и
ALIGN=.
Их значения распространяются только на одну строку или ячейку таблицы.Кроме того, имеется атрибут
VALIGN=,
с помощью которого можно управлять вертикальным выравниванием текста строки или ячейки. Этот атрибут может принимать значения
top
(выровнять по верхнему краю),
middle
(по середине) и
bottom
(по нижнему краю). Кроме того, в некоторых броузерах, например
Opera,
поддерживается также атрибут
NOWRAP,
запрещающий перенос текста ячейки на следующую строку.
