ЛАБОРАТОРНАЯ РАБОТА № 5 Создание таблиц в html-документе.
Формирование структуры таблицы
Любая таблица определяется в HTMLс помощью тега <TABLE>. Все, что расположено между тегами <TABLE> и </TABLE>, считается таблицей. Однако, если вы напишете что-нибудь вроде
<TABLE>
Это уже таблица?
</TABLE>
то, скорее всего, результат вас разочарует: браузер отобразит просто обычный текст. Дело в том, что мало создать таблицу, надо в ней еще создать хотя бы одну строку, а в строке хотя бы одну ячейку.
Строки таблицы создаются с помощью тега <TR> и его закрывающего тега, а ячейки — с помощью тега <TD> и его закрывающего тега.
Однако, написав
<TABLE>
<TR>
<TD> Это уже таблица?
</TD>
</TR>
</TABLE>
мы получим тот же результат, что и раньше (по крайней мере, в большинстве браузеров). В чем же дело? А дело в том, что по умолчанию таблицы обычно отображаются без рамки. Если мы хотим, чтобы наша таблица из одной ячейки имела рамку, мы должны явно задать ее ширину, установив атрибут BORDER=, например, вот так:
<TABLE BORDER="3">
<TR>
<TD> Это уже таблица! </TD>
</TR>
</TABLE>
Создайте новую пустую web-страничку и введите представленный выше код. Результат будет в виде рис.5.1.
Основные атрибуты таблицы
Как видите, наша таблица получилась ровно такой ширины, какая нужная, чтобы вместить написанную нами фразу, и ни на пиксел больше. С помощью атрибута WIDTH= можно устанавливать любую желаемую ширину таблицы.
Например, если мы напишем
<TABLE WIDTH="50" BORDER="3">,
то браузер отобразит таблицу шириной в 50 пикселов. При этом во фразе Это уже таблица! последнее слово, скорее всего, не поместится в длину таблицы и автоматически перенесется на другую строку. А если установить WIDTH=50%, то таблица растянется на половину ширины окна браузера.
Специальный атрибут — CELLPADDING= определяет, на сколько точек текст будет отступать от края ячейки. Например:
<TABLE WIDTH="50%" BORDER="3" CELLPADDING="20">
<TR>
<TD> Это уже таблица! </TD>
</TR>
</TABLE>
В обычных ситуациях величину CELLPADDING= устанавливают приблизительно равной 3-5 точек, чтобы просто немного отступить от края ячейки.
Атрибут CELLSPACING= - задает расстояние между ячейками таблицы. Например, сделаем при этом толщину табличной рамки чуть побольше:
<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20">
<TR>
<TD> Это уже таблица! </TD>
</TR>
</TABLE>
Для создания цветной рамки таблицы служит атрибут 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>
При просмотре на экране компьютера обратите внимание на то, что lime и green — в принципе подходящее, но не самое лучшее сочетание значений данных атрибутов. Для придания естественности табличной рамке полезно немного поэкспериментировать с оттенками цветов.
Цвет фона таблицы можно задать с помощью атрибута 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 строку в таблицу и введите текст «Это первая ячейка второй строки ». У вас должно получится (см. рис. 5.2)- на месте отсутствующей второй ячейки второй строки осталось пустое пространство.
Иногда это бывает полезно, но чаще требуется оставить пустую рамку незаполненной ячейки. Как это сделать? Если мы просто добавим в таблицу пару тегов <TD> </TD>, то, как ни странно, ничего не изменится — вокруг пустой ячейки рамка не отображается! Добавление пробела между тегами ячейки также ничего не дает, поскольку в HTML лишние пробелы игнорируются...
До сих пор мы рассматривали только атрибуты тега <TABLE>. Однако теги <TR> и <TD> тоже могут иметь собственные атрибуты, такие, как BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK= и ALIGN=. Их значения распространяются только на одну строку или ячейку таблицы. Кроме того, имеется атрибут VALIGN=, с помощью которого можно управлять вертикальным выравниванием текста строки или ячейки. Этот атрибут может принимать значения top (выровнять по верхнему краю), middle (по середине) и bottom (по нижнему краю). Кроме того, в некоторых браузерах, например Opera, поддерживается также атрибут NOWRAP, запрещающий перенос текста ячейки на следующую строку.
Самостоятельно создайте границу второй ячейки второй строки таблицы.