01. Кодирование таблиц

В практике сайтостроения таблицы используют для создания полей, рамок, выравнивания объектов, многоколонной верстки, наложения картинок… И, наконец, для отображения на экране табличного материала, но это — в последнюю очередь! В 90% случаев дизайнеры используют таблицы, как ни парадоксально это звучит, не для отображения таблиц.

Но обо всем по порядку.

На этой странице:

• Что такое таблица
• Как задать таблицу (элемент TABLE)
• Атрибуты элемента TABLE
  • Атрибут align
  • Атрибуты width и height
  • Атрибуты cellpadding и cellspacing
  • Атрибуты bgcolor и background
  • Атрибуты border и bordercolor
• Атрибуты элемента TR
  • Атрибуты align и valign
  • Атрибут bgcolor
• Атрибуты элементов TD и TН
  • Атрибут nowrap
  • Атрибут colspan=n
  • Атрибут rowspan=n
• Элемент CAPTION

Что такое таблица

Всем хорошо известна таблица умножения:

Она представляет собой прямоугольник, расчерченный на клетки. Вертикальные ряды клеток образуют столбцы, горизонтальные — строки. Каждая строка и столбец в таблице может иметь свой заголовок. Заголовки записываются в первой строке и первом столбце (вернее над первой строкой и слева от первого столбца содержимого таблицы).

Заголовками строк и столбцов в таблице умножения служат цифры от одного до девяти. Пользоваться таблицей очень просто. Если нужно узнать, например, результат умножения числа 6 на число 8, то нужно прочитать ответ в клетке, расположенной на пересечении столбца с заголовком “6” и строки с заголовком “8”. Или в клетке, расположенной на пересечении строки с заголовком “6” и столбца с заголовком “8”. Всё равно, какой из вариантов выбрать, потому что 6×8=8×6. В обеих этих клетках находится число 48.

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

Для таблицы умножения признаками служат значения сомножителей. Первый признак — это значение первого сомножителя, второй — значение второго.

Как задать таблицу (элемент TABLE)

Таблица задаётся элементом TABLE, который описывается парой тегов <TABLE>...</TABLE>. Между этими тегами задаются строки таблицы (пары тегов <TR>...</TR>). Наконец, внутри строк задаются клетки (ячейки) таблицы (пары тегов <TD>...</TD>). Таким вот образом, по строкам, описывается вся структура таблицы:

Пример задания таблицы, состоящей из трёх строк и двух столбцов:

На экране эта таблица отображается так:

Атрибуты элемента TABLE

Атрибуты элемента TABLE описаны ниже.

Атрибут align

Этот атрибут позволяет определять положение таблицы по отношению к соседним элементам документа. То есть атрибут align имеет для таблиц тот же смысл, что и для картинок.

Если атрибут не задан, таблица выравнивается по левому краю окна, а другие элементы страницы располагаются выше или ниже (обтекания не происходит):

Отметим, что обтекание, заданное атрибутом align, прекращается элементом BR с атрибутом clear:

Выровнять таблицу (в том числе без обтекания) можно, если поместить её код внутрь блочного элемента (например, в P или в DIV). Для блока указывается нужное выравнивание соответствующим атрибутом (align ) или соответствующим стилевым свойством (text-align).

Эта таблица

выровнена по правому краю без обтекания при помощи кода:

А эта таблица

выровнена по центру при помощи кода:

Атрибуты width height

Если эти атрибуты не задан, браузер нарисует таблицу минимальных размеров вокруг данных, которые она содержит. Записи width=число и height=число заставляет браузер рисовать таблицу шириной и высотой в указанное число пикселов.

  


<TABLE border=1 width= height=>
  

  


<TABLE border=1 width= height=>

В стандарте W3C описан только атрибут width, но современные браузеры поддерживают и атрибут height также.

Атрибуты cellpadding и cellspacing

Атрибут cellpadding задаёт расстояние между рамкой (границей) таблицы и содержимым ячеек, атрибут cellspacing — расстояние между рамками соседних ячеек. Если атрибуты не заданы, браузер устанавливает эти расстояния по умолчанию, обычно cellpadding=1 и cellspacing=2.

cellpadding= cellspacing=

(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Заметим, что когда значение атрибута cellspacing отлично от нуля, каждая ячейка обрамляется отдельной рамкой.

Атрибуты bgcolor и background

Если эти атрибуты не заданы, элементы таблицы выводятся прямо на фон документа и таблица выглядит прозрачной. Атрибут bgcolor задаёт цвет фона таблицы, а атрибут background — “паркетный” фон.

Атрибуты border и bordercolor

Первый атрибут задает толщину рамки (границы) таблицы, второй — цвет этой рамки. Если задано значение border=0, то табличная рамка, а заодно и рамки клеток, не рисуются.

Если значение border отлично от нуля, то табличная рамка отображается с эффектом трёхмерности. Добавление атрибута bordercolor обеспечивает плоские рамки.

В браузере Opera атрибут bordercolor не работает.

border=0 cellpadding=10 cellspacing=0	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=2 cellpadding=10 cellspacing=1	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=5 bordercolor=red cellpadding=10 cellspacing=0	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=5 bordercolor=red cellpadding=10 cellspacing=5	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border= bordercolor= cellpadding= cellspacing=	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Атрибуты элемента TR

HTML-таблица состоит из строк, каждая из которых задаётся элементом:

Используя атрибуты элемента TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибуты align и valign

Атрибут align определяет горизонтальное выравнивание. Если атрибут не задан, содержимое ячеек выравнивается по левому краю ячейки, точно так же, как при значении align=left. Значение align=right задает выравнивание по правому краю ячейки, а значение align=center — по центру ячейки.

Атрибут valign определяет вертикальное выравнивание содержимого ячеек: top — по верхнему краю ячейки, bottom — по нижнему, middle — по центру ячейки. По умолчанию (если атрибут не задан) браузер центрирует содержимое ячеек по вертикали.

Атрибут bgcolor

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

Атрибуты элементов TD и TН

Каждая табличная строка состоит из ячеек, которые последовательно описываются элементами TD (обычная ячейка) и/или TН (ячейка-заголовок):

Содержимое обычной ячейки (TD) по умолчанию выравнивается слева по горизонтали и по центру по вертикали.

Содержимое ячейки-заголовка (TН) по умолчанию выравнивается по центру, как по горизонтали, так и по вертикали. Кроме того, текст в ячейке-заголовке выделяется (полужирным начертанием шрифта).

Атрибуты элементов TD и TН приведены в таблице:

Атрибуты, совпадающие с атрибутами для строки и таблицы, имеют тот же смысл, но относятся к отдельной ячейке.

Рассмотрим подробнее новые атрибуты.

Атрибут nowrap

Обычно браузер форматирует содержимое ячейки таблицы так же, как и текст абзаца на всей странице.

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

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

Как уже говорилось, горизонтальная прокрутка не способствует улучшению комфорта для пользователя, поэтому применение атрибута nowrap ограничивается специальными (и довольно редкими) случаями.

Атрибут colspan=n

Атрибут colspan=n определяет, сколько табличных столбцов (n) займёт ячейка в пределах строки.

Пример использования атрибута colspan приводится ниже.

Схема кода таблицы примера показана на рисунке:

Атрибут rowspan=n

Атрибут rowspan=n определяет, сколько табличных строк (n) займёт ячейка в пределах столбца. Пример использования атрибута rowspan показан ниже.

Схема кода таблицы примера показана на рисунке:

Элемент CAPTION

Элемент CAPTION помещается внутрь контейнера TABLE (вне табличных строк) и задаёт заголовок таблицы.

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

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

Разные браузеры немного по-разному выводят заголовок таблицы. Например, браузер IE выравнивает заголовок слева не по краю таблицы, а по уровню ячеек первого столбца.