2.5.3.2. Рамка таблицы. Атрибуты border и bordercolor

Атрибут BORDER тега <TABLE> управляет изображением рамки вокруг каждой ячейки, которые, по сути, дают линии сетки таблицы, и вокруг всей таблицы. По умолчанию рамки не рисуются, и на экране пользователь увидит лишь ровно расположенный текст ячеек таблицы. Существует немало ситуаций, когда использование таблиц без рамок вполне оправданно, например, для многоколонных списков, реализованных при помощи таблиц, или задания точного взаимного расположения рисунков и текста. Однако в большинстве случаев для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице.

Для добавления в таблицу рамок необходимо включить в код <TABLE> параметр BORDER, который может иметь численное значение. Например:

<TABLE BORDER>

или

<TABLE BORDER=10>.

Численное значение параметра определяет толщину рамки в пикселях, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения обычно оно принимается равным минимальному значению (1), хотя для различных браузеров стиль показа рамок может отличаться.

Атрибут BORDERCOLOR тега <TABLE> позволяет указать свет рамки таблицы. Формальные обозначения для наиболее часто используемых цветов приведены в таблице 2.3.

Пример таблицы с рамкой красного цвета толщиной 10 пикселей приведен на рис. 2.15.

Рис. 2.15. Таблица с рамкой толщиной 10 пикселей красного цвета

2.5.3.3 Цвет фона таблицы и фоновый рисунок. Атрибуты bgcolor и background

Применение данных атрибутов тега <TABLE> полностью аналогично одноименным атрибутам тега <BODY>, рассмотренным в пунктах 1.1 и 1.2 лекции 4.

2.5.3.4 Расстояние между ячейками. Атрибут cellspacing

Форма записи атрибута: CELLSPACING=num, где num — численное значение в пикселах, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками (точнее между рамками ячеек) как по горизонтали, так и по вертикали. По умолчанию значение принимается равным двум. Заметим, что традиционно в издательских системах смежные ячейки таблицы имеют общую границу. В HTML-таблицах по умолчанию между ними оставляется место, что хорошо видно на приведенном выше рисунке (рис. 2.15). При задании CELLSPACING=0 рамки смежных ячеек сольются и создадут впечатление единой сетки таблицы (рис. 2.16).

Рис.2.16. Таблица со значением CELLSPACING=0

2.5.3.5. Отступ между рамкой таблицы и содержимым ячейки. Атрибут cellpadding

Форма записи атрибута аналогична CELLSPACING. Величина num определяет размер свободного пространства (отступа) между рамкой ячейки и данными внутри ячейки. По умолчанию значение принимается равным единице. Установка атрибута CELLPADDING равным нулю может привести к тому, что некоторые части текста ячейки могут касаться ее рамки, что выглядит не очень эстетично.

На рис. 2.17 показан пример таблицы со значением CELLPADDING=10.

Рис. 2.17. Таблица со значением CELLPADDING=10

2.5.3.6. Ширина и высота таблицы. Атрибуты width и height

При отображении таблиц их ширина и высота автоматически вычисляются браузером и зависят от многих факторов: значений параметров, заданных в описании всего документа, данной таблицы, отдельных ее строк и ячеек, содержимого ячеек, а также параметров, задаваемых при просмотре документа в том или ином браузере, например, типа и размеров шрифта, размеров окна просмотра и др. При отображении расчет размеров таблиц выполняется автоматически с учетом этих факторов, при этом делается попытка представить таблицу в наиболее удобном виде — расположить таблицу так, чтобы она помещалась и окне просмотра. Общая схема просмотра больших документов, как правило, сводится к линейной прокрутке содержимого документа по вертикали и чтении текста, перемежаемого различными таблицами, изображениями и т. п. Это относится как к HTML-документам, так и к обычным документам, создаваемым в любых текстовых редакторах. Большинство как текстовых редакторов (например, Microsoft Word), так и HTML-браузеров автоматически форматируют текст так (если возможно), чтобы длина строк не превосходила ширину окна просмотра. Это позволяет избежать необходимости горизонтальной прокрутки документа. Аналогичные действия предпринимаются браузерами с таблицами — по возможности форматировать их таким образом, чтобы ширина таблицы не превосходила ширины окна просмотра. Можно сделать вывод, что ширина таблиц является более важным, первостепенным параметром, расчет которого выполняется в первую очередь по сравнению с высотой.

В большинстве случаев динамическое определение размеров таблицы дает в результате эстетически соразмерное изображение с эффективным использованием реальной площади окна просмотра. Однако бывает необходимо принудительно указывать ширину или высоту таблицы. Для этой цели используются атрибуты WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега <TABLE>. Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна браузера. Последний вариант указания высоты и ширины (в %) активно используется, к примеру, при применении таблиц для разметки страницы:

<TABLE WIDTH=100%>.

Аналогичные атрибуты могут задаваться и для отдельных строк и столбцов (ячеек). В примере, приведенном на рисунке 2.18 ширина таблицы составляет 100% от размера окна браузера. Из них 30% приходится на столбец 1 и 70% - на столбец 2. Высота таблицы составляет 100% от размера окна браузера. Из них 20% - первая строка, 20% - вторая строка и 60% - третья строка.

Р ис. 2.18. Таблица с указанием параметров ширины и высоты в % от размера окна