Таблицы
Таблицы
Довольно часто на Web-страницах встречаются таблицы. Простейший пример табличной организации данных — прайс-лист. Однако таблицы можно использовать просто как способ форматирования текста, поскольку таблица в HTML-документе может не содержать всех или некоторых разграничительных линий (сетки). Заметим, что в большинстве случаев элементы текста позиционируются как табличные.
Идея использования таблиц в качестве средства позиционирования проста. Вы мысленно разбиваете окно на ячейки (клетки) и решаете, какой элемент страницы в какую клетку поместить, — это хороший способ обойти «естественное» расположение элементов друг за другом, которое осуществляет браузер по умолчанию. В разделе 10.6 будет рассмотрен более «свободный» способ позиционирования элементов, позволяющий помещать элементы в любое место окна браузера. Но на практике, как правило, для позиционирования элементов вполне достаточно использовать простую схему таблицы.
Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов (колонок) и горизонтальных строк (рядов). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и даже другую таблицу.
Таблицы состоят из трех основных частей: названия таблицы, заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с левого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна быть заполнена (для создания пустых ячеек используются пробелы).
Описание таблицы в документе HTML начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER, например:
<TABLE BORDER>
Атрибут BORDER может принимать аргумент (число), определяющий ширину рамки, например:
<TABLE BORDER=10>
Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который может принимать значения ТОР или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:
<CAPTION ALIGN=TOP> Моя таблица </CAPTION>
Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом </TR>. Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <ТН> и </тн>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>.
Тэги заголовков и данных должны располагаться между тэгами рядов <TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг <TABLE>), а затем внутри этого определения задаете строки (тэг <TR>) и содержимое ячеек (тэг <TD> — для данных, тэг <ТН> — для названий заголовков столбцов).
Приведем пример описания простой таблицы, встроенной в некоторый текст. Обратите внимание на порядок заполнения ячеек таблицы. Сначала определяется строка заголовков столбцов таблицы, затем аналогичным образом создаются строки данных путем указания того, какие данные должны располагаться в ячейках таблицы. Строка заголовков столбцов задается так же, как и строка данных. Отличие состоит лишь втом, что при создании строки заголовков внутри тэга <TR> используется тэг <ТН>, а при создании строки данных — тэг <TD>.
<HTML>
<НЕАD> <ТIТLЕ>Таблицы</Т1ТLЕ> </НЕАD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<P>
Ниже приведен пример простой таблицы
<P>
<TABLE BORDER>
<CAPTION ALIGN=TOP>Cпиcoк сотрудников</САРТION>
<TR>
<ТН>Имя</ТН> <ТН>Должность</ТН> <ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD> <ТD>Директор</ТD> <ТD>1000</ТD> </TR> <TR>
<ТD>Петр</ТD> <ТD>Бухгалтер</ТD> <ТD>800</ТD> </TR> <TR>
<ТD>Федор</ТD> <ТD>Рабочий</ТD> <ТD>50</ТD>
</TR>
</TABLE>
</BODY>
</HTML>
