6. Страсти по табулированию

Таблицы в Web-документах используются гораздо шире, чем например в хорошо известном текстовом процессоре, будь это Word или Lexicon. Конечно, таблицы используются и для представления сравнительных (в том числе статистических) данных, то есть тех, для которых имеются давние традиции их организации именно в виде таблиц. Но существуют и способы представления по сути своей "нетабличных" данных именно в виде таблиц. Как вывести на экран рисунок с подписью, размещенной точно под рисунком? Это легко сделать в Word, так как там заранее задан размер листа бумаги; если же размер листа изменится, то Word не гарантирует, что и при новых размерах сохранится корректное размещение подписи относительно рисунка. В Web-страницах их размер неизвестен до самого момента вывода страницы на мониторе пользователя. И здесь лучшим способом будет создание таблицы из одного столбца и двух строк (если это можно назвать таблицей): в одну ячейку таблицы вставляется рисунок, в другую – подпись, а так как таблица – это нечто единое, то соответствие текста рисунку сохранится при любых манипуляциях с областью отображения.

Даже чисто текстовый документ может потребовать применения таблиц. Обычно мы имеем дело с однопотоковыми текстами, читаемыми строго линейно. Но особенностью гипертекстов является именно их нелинейная (неодномерная) структура, то есть мы можем читать впараллель несколько различных потоков текста и тогда очень хочется расположить текст в несколько колонок, установив некоторое соответствие между отрывками текста из разных колонок. Таблица может в этом помочь, если она двухколоночная (при необходимости – трех-, четырех- и более) и имеет неограниченную длину. Ну а совсем вырожденная таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя. За примерами достаточно обратиться на сервер колледжа (страница лимериков в главе, посвященной сетевой этике) или, например, на сервер Regie Autonome du Transport Parisien – www.ratp.fr – здась невидимая (!) таблица очень аккуратно увязывает текстовый материал, заголовки-выноски и фотографии.

Таким образом, таблица – это не просто разграфленная область листа (чаще всего графление-то и не требуется), а некоторый способ организации информации в двухмерном пространстве.

Внутренняя жизнь таблиц

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы – пожалуй, важнейшее улучшение в HTML 3.2 по сравнению с более ранними версиями языка HTML. В HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

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

Для представления таблиц используются нескольких видов тегов HTML:

• теги TABLE, которые обрамляют всю табличную спецификацию;

• необязательный элемент CAPTION, специфицирующий заголовок таблицы;

• теги TR, специфицирующие строки таблицы;

• теги TH, специфицирующие заголовки строк и столбцов;

• теги TD, специфицирующие содержимое табличных ячеек.

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

В простейшем варианте таблицы потребуются еще только два тега – <TR> начинает каждую новую строку таблицы, а <TD> начинает новую ячейку в текущей строке таблицы. Кроме того в стандарте определены теги </TR> и </TD>, заканчивающие соответствующие элементы таблицы. Некоторые браузеры позволяют опускать теги-терминаторы (</TD>, </TR>), так как понятно, что там, где начинается новая ячейка таблицы, заканчивается предшествующая; аналогично начало новой строки таблицы означает, что предыдущий ряд закончился. Тем не менее делать этого не следует; Вы не можете знать заранее, каким браузером будут просматривать Ваш документ; ну а кроме того стандарты меняются, браузеры – тоже с той или иной периодичностью, так что лучшим советом будет не пренебрегать тегами-терминаторами.

0.20	-0.70		0.60
0.40	0.40		-0.80
-0.60	0.10	0.10

В самом первом простейшем примере мы построим таблицу 3х3, в которой например представлены значения эффективности инвестиций в три предприятия при трех различных состояниях рынка (задача на инвестиции из курса МММ). Никакие заголовки создавать не будем.

<TABLE>

<TR> <TD> 0.20</TD> <TD>-0.70 </TD> <TD> 0.60</TD> </TR>

<TR> <TD> 0.40</TD> <TD> 0.40</TD> <TD> -0.80</TD> </TR>

<TR> <TD> -0.60</TD> <TD> 0.10</TD> <TD> 0.10</TD> </TR>

</TABLE>

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

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

Всякая таблица может иметь заголовок, хотя он и не является обязательным. Заголовок указывается в теле таблицы сразу после тега <TABLE> и обрамляется с обеих сторон тегами <CAPTION> ... </CAPTION>. Метка <CAPTION> может включать атрибут ALIGN. Допустимы только два значения для этого атрибута: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

Сам по себе тег <TABLE> может включать несколько атрибутов. Чаще всего используются атрибут ALIGN, устанавливающий расположение таблицы по отношению к полям документа. ALIGN=LEFT вызывает выравнивание таблицы по левой стороне страницы, ALIGN=CENTER размещает таблицу по середине страница, а ALIGN=RIGHT прижимает таблицу к правому краю.

Атрибут WIDTH задает ширину таблицы, которая может быть задана в пикселах экрана, например WIDTH=400, или в процентах от полной ширины страницы (например, WIDTH="80%"). Если этот атрибут опущен, то таблица займет всю ши­ри­ну поля отображения на экране.

Наконец, атрибут BORDER задает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

Для задания заголовков столбцов (а также для формирования боковика таблицы) предназначен тег <TH> и закрывающий тег </TH>. Элементы TH и ранее рассмотренный TD очень схожи; в частности, они имеют одни и те же атрибуты. У них несколько разное назначение: элемент TD предназначен для данных в таблице, а элемент TH - для заголовков столбцов или строк в таблице. Видимая разница заключается в том, что обычно элементы TH более выделены, чем элементы TD и выравнивание по умолчанию предполагает центрирование для TH и по левому краю для TD. Иногда совершенно не важно, используете ли Вы TD или TH, особенно, если это касается первого столбца (т.е. первого элемента каждой строки).

<P>Иллюстрация тегов CAPTION, TH и атрибута BORDER.</P>

<TABLE BORDER=1>

<CAPTION>Русские, английские и научные названия животных</CAPTION>

<TR><TH>Русское</TH><TH>Английское</TH><TH>Научное</TH></TR>

<TR><TD>лось</TD><TD>elk</TD><TD><I>Alces alces</I></TD></TR>

<TR><TD>белка</TD><TD>squirrel</TD><TD><I>Sciurus vulgaris</I></TD></TR>

<TR><TD>волк</TD><TD>wolf</TD><TD><I>Canis lupus</I></TD></TR>

</TABLE>

Заметьте, что некоторые табличные элементы в примере содержат разметку текста (в колонке научных названий используется наклонный шрифт); в данном случае есть специфические причины для этого. В принципе элементы текстовой разметки – размер шрифта, его начертание, выделения, цвет шрифта – можно задать для каждого элемента TH или TD независимо. Попробуйте самостоятельно выделить русские названия животных шрифтом другого размера или другого цвета, синим например.