На данном этапе развития методов форматирования Web-страниц таблицы являются мощнейшим средством компоновки контента. Края таблицы могут быть невидимыми, тогда пользователь даже не понимает, что использованы таблицы.
Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если необходимо создать несколько строк в таблице, используется столько же тегов <TR> и </TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым.
Для создания заголовков столбцов и строк вместо простой строки, создается заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые атрибуты.
Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для того, что бы текст помещался в одной строке (ячейка при этом расширяется).
Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире вышерасположенных или нижерасположенных, то используется этот тег. Величина х указывает количество объединяемых горизонтальных ячеек.
Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он объединяет x вертикальных ячеек.
Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR> и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах. Оптимальным значением является WIDTH=50%.
Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения:
UNIT=EN - в en-пробелах,
UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы,
UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей.
Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание по правому краю.
Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую.
Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. X - число пикселей.
Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:
ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,
ALIGN=CENTER - по центру,
ALIGN=RIGHT - по правому краю,
ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю.
Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения:
VALIGN=TOP - выравнивание содержимого по верхней границе,
VALIGN=MIDDLE - центрирует по вертикали,
VALIGN=BOTTOM - выравнивает по нижней границе.
Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ.
Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как получена такая точная компоновка содержимого. Напротив, толстые границы привлекают внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет похожа на настоящую рамку.
Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.
С помощью таблиц можно сделать красивые выпуклые панели с графикой или текстом.
Пример 5.
<HTML>
<HEAD>
<TITLE>
Простая таблица
</TITLE>
</HEAD>
<BODY>
<TABLEBORDER>
<CAPTION ALIGN=TOP>Мои друзья</ CAPTION>
<TR>
<TH>Имя</TH>
<TH>Год рождения</TH>
<TH>Курс</TH>
</TR>
<TR>
<TD>Ольга</TD>
<TD>1980</TD>
<TD>5</TD>
</TR>
<TR>
<TD>Марина</TD>
<TD>1982</TD>
<TD>3</TD>
</TR>
<TR>
<TD>Игорь</TD>
<TD>1982</TD>
<TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>