Иллюстрированный самоучитель по Web-графике

Таблицы

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

Идея использования таблиц в качестве средства позиционирования проста. Вы мысленно разбиваете окно на ячейки (клетки) и решаете, какой элемент страницы в какую клетку поместить, – это хороший способ обойти "естественное" расположение элементов друг за другом, которое осуществляет браузер по умолчанию. В разделе 10.6 будет рассмотрен более "свободный" способ позиционирования элементов, позволяющий помещать элементы в любое место окна браузера. Но на практике, как правило, для позиционирования элементов вполне достаточно использовать простую схему таблицы.

Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов (колонок) и горизонтальных строк (рядов). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и даже другую таблицу.

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

Описание таблицы в документе HTML начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER, например:

<TABLE BORDER>

Атрибут BORDER может принимать аргумент (число), определяющий ширину рамки, например:

<TABLE BORDER=10>

Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который может принимать значения ТОР или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:

<CAPTION ALIGN=TOP> Моя таблица </CAPTION>

Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом < /TR>. Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <TH> и </TH>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>.

Тэги заголовков и данных должны располагаться между тэгами рядов <TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг <TABLE>), а затем внутри этого определения задаете строки (тэг <TR>) и содержимое ячеек (тэг <TD> – для данных, тэг <TH> – для названий заголовков столбцов).

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

<HTML>
  
<HEAD>
    <TITLE>Таблицы</TITLE>
</HEAD>
  
<BODY>
    <H2>Основные элементы таблиц</H2>
    <P>Ниже приведен пример простой таблицы
        <P>
            <TABLE BORDER>
                <CAPTION ALIGN=TOP>Список сотрудников</CAPTION>
                <TR>
                    <TH>Имя</TH>
                    <TH>Должность</TH>
                    <TH>Оклад</TH>
                </TR>
                <TR>
                    <TD>Иван</TD>
                    <TD>Директор</TD>
                    <TD>1000</TD>
                </TR>
                <TR>
                    <TD>Петр</TD>
                    <TD>Бухгалтер</TD>
                    <TD>800</TD>
                </TR>
                <TR>
                    <TD>Федор</TD>
                    <TD>Рабочий</TD>
                    <TD>50</TD>
                </TR>
            </TABLE>
</BODY>
  
</HTML>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.