Таблицы
Довольно часто на 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>