3.2. Параметры тега <table>

Тег <table> имеет следующие основные необязательные параметры:

align="left | center | right"

Выполняет горизонтальное выравнивание таблицы на странице документа. Если параметр align опускается при определении таблицы, то таблица располагается по левому краю и ее обтекание текстом не происходит (рис. 3.3, а). Если устанавливается значение align=left или right, то таблица ориентируется по левому или правому краю с обтеканием текста (рис. 3.3, б). Если же выравнивание выполняется по центру, то обтекание таблицы текстом не происходит (рис. 3.3, в).

а)

 

б)

в)

Рис. 3.3 Взаимное расположение таблицы и текста: а – параметр align отсутствует; б – параметр align=right; в – параметр align=center

background="URL"

Данный параметр служит для задания фонового изображения таблицы. Следует отметить, что изображение, указанное в значении URL, не масштабируется под высоту и ширину таблицы и будет отображена только соответствующая часть изображения. Если изображение меньше по ширине и/или высоте таблицы, то оно повторяется, заполняя соответственно всю ее площадь.

bgcolor="цвет"

Устанавливает цвет фона таблицы. В качестве значения данного параметра допустимо использовать как заданные цветовые константы, типа red, green, blue и др., так и шестнадцатиричные значения цветов в формате #RRGGBB, например,

<table bgcolor="#CC0000">...</table>

соответствует красному цвету фона таблицы. Часто цвет фона таблицы делают близким к цвету фонового изображения, т.к. он отображается, пока фоновое изображение не загрузится с сервера, либо в случаях ошибки загрузки фонового изображения.

border="толщина"

С помощью параметра border устанавливается толщина рамки вокруг таблицы. По умолчанию border равен 0 и рамки в таблице не рисуются.

Отображение таблиц без рамок бывает весьма полезным при создании разметки HTML-страницы, когда содержимое ячеек воспринимается пользователем как единый документ. Также это полезно при создании многоколоночных текстов или списков в тексте и т.п.

Следует отметить, что параметр border устанавливает толщину рамки только вокруг таблицы, но не вокруг ячеек. Например, при определении значения border=10, приведет к следующему визуальному эффекту (рис. 3.4).

Рис. 3.4. Таблицы с параметром border=10

cellpadding="число"

Данный параметр определяет расстояние в пикселах между границей ячейки и ее содержимым. По умолчанию значение параметра равно 1. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing="число"

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

<table border=0 cellspacing=0 cellpadding=0>...</table>

то расстояния между ячейками будут отсутствовать и они сливаются, образуя единое неразрывное пространство. Это свойство таблиц очень удобно, например, для отображения графического меню, где в ячейках располагаются фрагменты единого изображения, и, сливаясь вместе, они образуют естественное визуальное восприятие такой информации в целом.

cols="число"

Атрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

frame="значение"

Определяет способ рисования рамки вокруг таблицы. Данный параметр может принимать следующие значения:

void – без рамки;
border – рисование рамки вокруг таблицы;
above – рисование рамки сверху таблицы;
below – рисование рамки снизу таблицы;
hsides – рисование рамки только сверху и снизу таблицы;
vsides – рисование только вертикальных границ;
rhs – рисование границы справа;
lhs – рисование границы слева.

По умолчанию данный параметр имеет значение border.

rules="значение"

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

Данный параметр может принимать следующие значения:

all – линия рисуется вокруг каждой ячейки таблицы;
groups – линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>;
cols – линия отображается между колонками;
none – все границы скрываются;
rows – граница рисуется между строками таблицы, созданных через тег <tr>.

width="значение"

Параметр width определяет желаемую ширину таблицы. По умолчанию браузеры вычисляют ширину и высоту таблиц автоматически, исходя из содержимого ячеек. Принцип формирования ширины исходит из того, что при чтении документа его удобно просматривать сверху вниз, не выполняя дополнительный скроллинг по горизонтали документа. Таким образом, браузеры пытаются установить ширину таблицы не превышающую ширину HTML-документа, чтобы исключить горизонтальный скроллинг. Однако бывают ситуации, когда Web-разработчику необходимо указать строго определенное значение ширины. Для этого можно использовать параметр width, который определяет ширину таблицы в пикселах, либо в процентах, например, так:

<table width=200>...</table>
<table width="100%">...</table>

В первом случае ширина будет установлена в 200 пикселов, во втором – она  будет масштабироваться по всей ширине документа. Соответственно при изменении ширины документа, таблицы также будет менять свою ширину.

При использовании данного параметра всегда следует помнить, что задается именно желаемая ширина таблицы. То есть, если браузер не сможет уменьшить ширину до величины, указанной в width, то таблица будет отображена более широкой. Например, если в ячейках таблицы находятся изображения и их общая ширина больше ширины, указанной в width, то таблица будет увеличена по ширине для корректного отображения всех данных.