Теория. Web-дизайн. "Таблицы в HTML"

§1. Использование таблиц в HTML

1.1.  Основные теги таблиц

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

            Таблицы в языке HTML всегда имеют прямоугольный вид и состоят из строк, которые в свою очередь состоят из ячеек. Все языковые конструкции, описывающие компоненты создаваемой таблицы, заключаются между тегами <TABLE> и </TABLE>.

            Заполнение таблицы происходит построчно; для обозначения строки используется пара тегов <TR>...</TR>. Строка состоит из ячеек, для задания которых используют либо теги <TH>...</TH>, если эти ячейки содержат заголовки столбцов, либо теги <TD>...</TD>. Заголовки выводятся полужирным шрифтом и располагаются по центру ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Для задания заголовка всей таблицы используются теги <CAPTION> и </CAPTION>.

Пример <TABLE> <CAPTION>Заголовок таблицы</CAPTION> <TR><TH>Заголовок1</TH> <TH>Заголовок2</TH></TR> <TR><TD>Ячейка 1</TD><TD>Ячейка 2</TD></TR> <TR><TD>Ячейка 3</TD><TD>Ячейка 4</TD></TR> </TABLE>

            Наличие в ячейках данных не обязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<TD></TD>), либо поместить в нее символ неразрывного пробела, задаваемого специальной последовательностью символов - &nbsp; (т. е. создать ячейку вида <TD>&nbsp;</TD>).

            Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тег <TR> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.

1.2. Основные атрибуты таблицы

Назначение основных атрибутов тега <TABLE> и значения, которые они могут принимать перечислены в таблице.

Атрибут	Назначение
BORDER=n	Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки
WIDTH=n	Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера
HEIGHT=n	Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера
ALIGN	Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию - left)
CELLPADDING=n	Добавляет свободное пространство между данными внутри ячейки и ее границами; по умолчанию значение равно 2
CELLSPACING=n	Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2
HSPACE=n	Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы
VSPACE=n	Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы
BGCOLOR=цвет	Устанавливает цвет фона всей таблицы
BACKGROUND=URL	Указывает фоновое изображение для таблицы, где URL -- адрес источника (имя файла с изображением)

Пример:

Если  тег <TABLE> оформить следующим образом:

<TABLE BORDER=1 ALIGN=center>

то ячейки таблицы будут обрамлены рамкой, a таблица выровнена по центру окна браузера.

            В HTML не предусмотрено специальных средств раскрашивания таблиц. Однако большинство браузеров имеют расширения, позволяющие изменять цвет ячеек и рамок. Вы можете изменить цвет фона ячейки при помощи атрибута BGCOLOR перед размещением в ней текста или изображения, а также использовать атрибут BORDERCOLOR для изменения цвета рамки ячейки. Теги <TABLE>, <TD>, <TH> и <TR> также допускают использование в них указанных атрибутов. Таким образом, вы можете изменить цвет всей таблицы, отдельной ячейки или строки таблицы.

1.3. Выравнивание данных в ячейках

 При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами <CAPTION>, <TR>, <TH> и <TD> в самых различных комбинациях. Ниже приведены значения атрибутов для перечисленных элементов.

Тег	Назначение атрибута
<TR>	Атрибут ALIGN может принимать значения left, center и right (по умолчанию - left для данных и center для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке Атрибут VALIGN может иметь значения top, bottom, middle и baseline (по умолчанию - middle); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии
<TH>	Атрибут ALIGN может принимать значения left, center и right (по умолчанию - center) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию - middle)
<TD>	Атрибут ALIGN может принимать значения left, center и right (по умолчанию - left) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию - middle)
<CAPTION>	Атрибут ALIGN может иметь значения top и bottom (по умолчанию - top); размещает заголовок таблицы сверху или снизу

            Смежные ячейки таблицы могут объединяться. Например, в таблице из нескольких столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области.

            Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тега <TH> или <TD>, например,

     <TD ROWSPAN=2>

            Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тегов, например,

     <TD COLSPAN=2>

1.4. Примеры таблиц

                                    Простая таблица

<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>

<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>

<TR> <TH> Рост </TH> <TH> Вес </TH> </TR>

<TR> <TD> Мужчины </TD> <TD ALIGN=center> 174 </TD> <TD ALIGN=center> 78 </TD> </TR>

<TR> <TD> Женщины </TD> <TD ALIGN=center> 165 </TD> <TD ALIGN=center> 56 </TD> </TR>

</TABLE>

	Среднее значение
	Рост	Вес
Мужчины	176	78
Женщины	167	56
Таблица №1

                                    Таблица с объединенными ячейками

<HTML>

<BODY>

<TABLE BORDER=1 ALIGN=center>

<TR><TH COLSPAN=3>Заголовок на 3 столбца</TH></TR>

<TR>

<TH>Заголовок на 1 строку</TH>

<TD>Ячейка 1</TD>

<TD>Ячейка 2</TD>

</TR>

<TR>

<TH ROWSPAN=3>Заголовок на 3 строки</TH>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

<TR><TD>Ячейка 5</TD><TD>Ячейка 6</TD></TR>

<TR><TD>Ячейка 7</TD><TD>Ячейка 8</TD></TR>

</TABLE>

</BODY>

</HTML>

Заголовок на 3 столбца
Заголовок на 1 строку	Ячейка 1	Ячейка 2
Заголовок на 3 строки	Ячейка 3	Ячейка 4
	Ячейка 5	Ячейка 6
	Ячейка 7	Ячейка 8

                                    Таблица с раскрашенными ячейками

<HTML>

<BODY>

<TABLE BORDER=8 WIDTH=90% BGCOLOR="white"

 CELLPADDING=10 ALIGN=center>

<TR>

 <TH WIDTH=20%>Простой заголовок</TH>

 <TH WIDTH=80% COLSPAN=2>Заголовок на 2 столбца</TH>

</TR>

<TR BGCOLOR="#CCCCCC">

 <TH WIDTH=20%>Заголовок на 1 строку</TH>

 <TD WIDTH=40%>Ячейка 1</TD>

 <TD WIDTH=40% BGCOLOR="teal">Ячейка 2</TD>

</TR>

<TR>

 <TH WIDTH=20% ROWSPAN=3>Заголовок на 3 строки</TH>

 <TD ALIGN=center>Ячейка 3</TD>

 <TD ALIGN=right>Ячейка 4</TD>

</TR>

<TR>

 <TD><FONT COLOR="red">Ячейка 5</FONT></TD>

 <TD ROWSPAN=2 ALIGN=center VALIGN=bottom>Ячейка 6</TD>

</TR>

<TR>

 <TD>Ячейка 7</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Простой заголовок	Заголовок на 2 столбца
Заголовок на 1 строку	Ячейка 1	Ячейка 2
Заголовок на 3 строки	Ячейка 3	Ячейка 4
	Ячейка 5	Ячейка 6
	Ячейка 7