3. Таблицы в документах HTML

Очень часто приходится размещать в документе HTML табличные данные. Это можно сделать двумя способами.

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

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

Заметим, что таблицы можно использовать в документах HTML не только для отображения табличных данных, но и для решения других задач, например, для размещения различных объектов. Например, в ячейках таблицы могут располагаться графические изображения, ссылки и так далее.

Для ячейки таблицы можно указать цветовой фон и отступ, что позволяет изображать текст на цветном фоне с отбивкой. Этот прием часто используется в Internet, так как значительно улучшает внешний вид страницы.

Простейшая таблица

Прежде чем мы перейдем к подробному изучению возможностей языка HTML по созданию таблиц, покажем, как можно создать простейшую таблицу.

В тексте документа HTML таблица определяется между командами <TABLE> и </TABLE>. В простейшем случае строки таблицы ограничиваются командами <TR> и </TR>, а столбцы - командами <TD…> и </TD>, например:


<TABLE>
  <TR>
    <TD>000</TD><TD>001</TD><TD>002</TD>
  </TR>
  <TR>
    <TD>010</TD><TD>011</TD><TD>012</TD>
  </TR>
  <TR>
    <TD>100</TD><TD>101</TD><TD>102</TD>
  </TR>
</TABLE>

Первая строка, ограниченная операторами <TR> и </TR>, состоит из трех ячеек, в которых находятся строки “000”, “001” и “002”. Каждая такая строка ограничена операторами <TD> и </TD>.

Команды, которые мы использовали в этом примере, допускают использование параметров, которые мы рассмотрим позже. Эти параметры влияют на внешний вид таблицы.

В листинге 3.1 мы привели исходный текст документа HTML, в котором определены две таблицы. Первая из них состоит из трех строк и не имеет никакого дополнительного оформления. Вторая таблица отцентрирована, имеет рамку шириной 2 пиксела и ширину, составляющую 60 процентов от ширины окна просмотра навигатора.

Листинг 3.1. Файл chap3\table.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>

    <TABLE>
      <TR>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>

    <TABLE ALIGN=JUSTIFY BORDER=2 WIDTH=60%>
      <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
      <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
      <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
    </TABLE>
</BODY>
</HTML>

Внешний вид полученных таблиц показан на рис. 3.1.

Рис. 3.1. Простейшая таблица и таблица с рамкой

Как изменить внешний вид таблицы

В этом разделе мы кратко рассмотрим наиболее важные операторы языка HTML и их параметры, предназначенные для создания таблиц. Применяя эти параметры, вы можете создавать самые разные таблицы.

Прежде всего, мы рассмотрим параметры оператора <TABLE>, определяющие внешний вид таблицы в целом. Затем займемся операторами <TR> и <TD>, определяющими внешний вид строк и столбцов таблицы.

Параметры оператора <TABLE>

Для оператора <TABLE>, которым отмечается начало таблицы, вы можете указать многочисленные параметры, определяющие внешний вид таблицы в целом. Ниже мы привели наиболее важные из них:

Параметр Описание
ALIGN Этот параметр определяет выравнивание таблицы. Допустимо указывать следующие значения:
LEFT таблица выравнивается по левому краю окна просмотра;
CENTER центрирование таблицы;
RIGHT выравнивание по правому краю;
JUSTIFY выравнивание по левому и правому краю
BACKGROUND Растровое графическое изображение, которое используется в качестве фона для отображения содержимого таблицы. Об использовании растровых изображений в документах HTML мы расскажем в следующей главе
BGCOLOR Цвет фона для таблицы
BORDER Установка толщины рамки в пикселах
BORDERCOLOR Установка цвета рамки. Этот параметр используется вместе с параметром BORDER
BORDERCOLORDARK Темный цвет, который используется для трехмерного выделения рамки
BORDERCOLORLIGHT Светлый цвет, который используется для трехмерного выделения рамки
CELLPADDING Расстояние между краями ячейки таблицы и содержимым этой ячейки
CELLSPACING Расстояние между рамкой таблицы и ячейками этой таблицы
CLEAR Форматирование текста, расположенного в документе HTML после таблицы
NO текст размещается сразу после таблицы;
LEFT текст размещается на первой строке после таблицы. Эта строка выравнивается по левой границе
RIGHT текст размещается на первой строке после таблицы. Эта строка выравнивается по правой границе
COLS Количество столбцов в таблице
FRAME Этот параметр определяет внешний вид рамки, расположенной вокруг таблицы. Возможны следующие значения:
BORDER рамка отображается со всех сторон таблицы (используется по умолчанию);
VOID рамка вокруг таблицы (внешняя) не отображается;
ABOVE отображается верхняя рамка
BELOW отображается нижняя рамка
HSIDES отображается верхняя и нижняя рамка
LHS отображается левая рамка
RHSXE "RHS" отображается правая рамка
VSIDESXE "VSIDES" рамка отображается с левой и правой стороны таблицы
BOXXE "BOX" рамка отображается только с внешней стороны таблицы
NOWRAP Если строки таблицы не помещаются по горизонтали в окне просмотра навигатора, они не переносятся на следующую строку, то есть не сворачиваются
RULES Параметр определяет внешний вид линий, которыми разделяются между собой ячейки таблицы. Он может принимать следующие значения:
NONE разделительные линии между ячейками таблицы не отображаются;
GROUPS отображаются горизонтальные разделительные линии между всеми группами таблиц, определенными операторами THEAD, TBODY, TFOOT и COLGROUP;
ROWS отображаются горизонтальные разделительные линии между всеми строками таблицы;
COLS отображаются вертикальные разделительные линии между столбцами таблицы;
ALL отображаются разделительные линии между всеми столбцами и строками таблицы
VALIGN Параметр определяет выравнивание таблицы по вертикали. Допустимы следующие значения;
TOP выравнивание по верхней границе;
MIDDLE выравнивание по середине окна;
BOTTOM выравнивание по нижней границе;
BASELINE выравнивание по базовой линии текста
WIDTH Ширина таблицы в пикселах или в процентах от ширины окна просмотра навигатора

Параметры оператора <TR>

Оператор <TR> предназначен для создания строк таблицы. Для него вы можете указать ряд параметров, определяющих внешний вид строки:

Параметр Описание
ALIGN Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие значения:
LEFT текст выравнивается по левому краю;
CENTER центрирование (используется по умолчанию);
RIGHT выравнивание по правому краю;
JUSTIFY выравнивание по левому и правому краю
BORDERCOLOR Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE>
BORDERCOLORDARK Темный цвет, который используется для трехмерного выделения рамки строки
BORDERCOLORLIGHT Светлый цвет, который используется для трехмерного выделения рамки строки
NOWRAP Если текст в строке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся на следующую строку, то есть не сворачиваются
VALIGN Параметр определяет выравнивание текста в строке по вертикали. Допустимы следующие значения;
TOP выравнивание по верхней границе ячейки;
MIDDLE выравнивание по центру ячейки;
BOTTOM выравнивание по нижней границе ячейки;
BASELINE выравнивание по базовой линии текста

Параметры оператора <TD>

При помощи оператора <TD> определяются ячейки таблицы. Для него вы можете указать следующие значения:

Параметр Описание
ALIGN Этот параметр определяет выравнивание текста в ячейках таблицы. Допустимо указывать следующие значения:
LEFT текст выравнивается по левому краю;
CENTER центрирование (используется по умолчанию);
RIGHT выравнивание по правому краю;
JUSTIFY выравнивание по левому и правому краю
BORDERCOLOR Установка цвета рамки. Этот параметр используется вместе с параметром BORDER оператора <TABLE>
BACKGROUND Растровое графическое изображение, которое используется в качестве фона для отображения содержимого ячейки
BGCOLOR Цвет фона для ячейки
BORDERCOLORDARK Темный цвет, который используется для трехмерного выделения рамки вокруг ячейки
BORDERCOLORLIGHT Светлый цвет, который используется для трехмерного выделения рамки вокруг ячейки
COLSPAN С помощью этого параметра можно указать, что элемент занимает несколько соседних ячеек, расположенных справа или слева в той же колонке. Значение параметра определяет количество объединяемых ячеек
HEIGHT Высота ячейки в пикселах
NOWRAP Если текст в ячейке не помещаются по горизонтали в окне просмотра навигатора, он не переносятся на следующую строку, то есть не сворачиваются
ROWSPAN Аналогично COLSPAN, но для строк таблицы
VALIGN Параметр определяет выравнивание текста в ячейке по вертикали. Допустимы следующие значения;
TOP выравнивание по верхней границе ячейки;
MIDDLE выравнивание по центру ячейки;
BOTTOM выравнивание по нижней границе ячейки;
BASELINE выравнивание по базовой линии текста
WIDTH Ширина ячейки в пикселах

Между операторами <TD> и </TD> вы можете разместить текстовую строку или любой другой объект, например, ссылку на графическое изображение.

Для того чтобы создать пустую ячейку с рамкой, запишите в нее символ непрерывающего пробела:


<TD>&nbsp;</TD>

Этот же символ можно использовать для размещения по вертикали внутри ячейки таблицы элементов списка:


<P>&nbsp;<BR>

Параметры оператора <TH>

Обычно первая строка таблицы используется для размещения заголовков столбцов. С помощью оператора <TH> вы можете создать такую строку заголовка.

Параметры этого оператора аналогичны только что рассмотренным параметрам оператора <TD>, поэтому мы не будем их приводить отдельно.

Оператор <CAPTION>

С помощью оператора <CAPTION> вы можете снабдить таблицу подписью, расположенной сверху над таблицей или снизу под таблицей.

Для оператора <CAPTION> в стандарте языка HTML версии 3.2 определен параметр ALIGN. Этот параметр может иметь значения TOP или BOTTOM. В первом случае подпись будет расположена над таблицей, а во втором - под таблицей.

Ниже мы привели пример использования оператора <CAPTION>:


<TABLE BORDER WIDTH=100%>
  <CAPTION ALIGN=BOTTOM>Табл. 1. Таблица значений</CAPTION>
  <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
  <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
  <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
</TABLE>

Навигатор Microsoft Internet Explorer использует иную систему определения расположения подписи таблицы. Дополнительно к параметру ALIGN здесь используется параметр VALIGN.

С помощью параметра VALIGN, который может иметь значения TOP или BOTTOM, вы можете изменять расположение подписи по вертикали - над или под таблицей.

Параметр ALIGN в трактовке навигатора Microsoft Internet Explorer может принимать значения LEFT или RIGHT и определяет выравнивание подписи по горизонтали.

Например, в следующем фрагменте исходного текста документа HTML создается таблица с подписью, которая расположена над таблицей и выровнена по правой границе:


<TABLE BORDER WIDTH=100%>
  <CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 2. Таблица значений</CAPTION>
  <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
  <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
  <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
</TABLE>

Способ оформления подписей таблиц, предлагаемый фирмой Microsoft, имеет больше возможностей, однако этот способ несовместим с навигатором Netscape Navigator. Это ограничивает его применение.

Примеры оформления таблиц

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

Таблицы с заголовком

В листинге 3.2 вы найдете исходный текст документа HTML, содержащего таблицу со строкой заголовка, расположенной сверху. Для создания заголовка здесь использован оператор <TH>.

Листинг 3.2. Файл chap3\tableh.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>
      <TR>
        <TH>Столбец 1</TH><TH>Столбец 2</TH><TH>Столбец 3</TH>
      </TR>
      <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
      <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
      <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
    </TABLE>
  </BODY>
</HTML>

Внешний вид получившейся таблицы мы показали на рис. 3.2. На этом и следующих рисунках для экономии места мы не стали показывать внешний вид окна навигатора Microsoft Internet Explorer, вырезав из него только изображение таблицы.

Рис. 3.2. Таблица со строкой заголовка, расположенной сверху

Очень часто заголовок таблицы помещают не сверху, а слева. Вы можете создать такую таблицу на базе примера документа HTML, исходный текст которого показан в листинге 3.3.

Листинг 3.3. Файл chap3\tableh1.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>
      <TR>
        <TH>Строка 1</TH>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TH>Строка 2</TH>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TH>Строка 3</TH>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

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

Таблица с заголовком строк, расположенным слева, показана на рис. 3.3.

Рис. 3.3. Таблица с заголовком строк, расположенным слева

Объединение ячеек таблицы

Для объединения ячеек таблицы, расположенных в одной и той же строке, вы можете воспользоваться параметром COLSPAN. Аналогично, для объединения ячеек, расположенных в одной и той же строке, используется параметр ROWSPAN.

В документе HTML, исходный текст которого приведен в листинге 3.4, мы показали, как можно использовать объединение ячеек для создания общего заголовка к двум столбцам таблицы.

Листинг 3.4. Файл chap3\tableh2.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>
      <TR>
        <TH>Столбец 1</TH>
        <TH COLSPAN=2>Столбец 2 и 3</TH>
      </TR>
      <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>
      <TR><TD>010</TD><TD>011</TD><TD>012</TD></TR>
      <TR><TD>100</TD><TD>101</TD><TD>102</TD></TR>
    </TABLE>
  </BODY>
</HTML>

Здесь параметр COLSPAN указан в операторе <TH>, определяющем вторую ячейку заголовка, и имеет значение, равное двум. Внешний вид таблицы, которая получится в результате, показан на рис. 3.4.

Рис. 3.4. Таблица с общим заголовком для двух столбцов

Аналогично вы можете создать общий заголовок для строк таблицы, воспользовавшись параметром ROWSPAN. Исходный текст документа HTML, в котором имеется таблица с общим заголовком для двух строк, показан в листинге 3.5.

Листинг 3.5. Файл chap3\tableh3.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>
      <TR>
        <TH ROWSPAN=2>Строка 1 и 2</TH>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TH>Строка 3</TH>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Внешний вид соответствующей таблицы мы привели на рис. 3.5.

Рис. 3.5. Таблица с общим заголовком для двух строк

Многослойные заголовки

Строки или столбца таблицы могут иметь несколько заголовков, расположенных слоями. В листинге 3.6 мы привели исходный текст документа HTML с двойным заголовком столбцов.

Листинг 3.6. Файл chap3\tableh4.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>
      <TR>
        <TH COLSPAN=3>Заголовок для всех столбцов</TH>
      </TR>
      <TR>
        <TH COLSPAN=2>Стобец 1 и 2</TH>
        <TH>Столбец 3</TH>
      </TR>
      <TR>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Первый заголовок в этом документе относится ко всем столбцам. Второй заголовок расположен под первым. В нем используется объединение соседних ячеек для первого и второго столбца. Внешний вид получившейся таблицы показан на рис. 3.6.

Рис. 3.6. Таблица с двойным заголовком

Таблицы с подписью

Помимо заголовка, вы можете снабдить таблицу подписью, для чего следует воспользоваться оператором <CAPTION>.

В листинге 3.7 мы привели исходный текст документа HTML, в котором создается таблица с подписью. Для оформления подписи мы использовали здесь расширение навигатора Microsoft Internet Explorer - параметр VALIGN оператора <CAPTION>.

Листинг 3.7. Файл chap3\caption1.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком и подписью</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER WIDTH=100%>
      <CAPTION VALIGN=TOP ALIGN=RIGHT>Табл. 1.1. Таблица с двойным заголовоком</CAPTION>
      <TR>
        <TH COLSPAN=3>Заголовок для всех столбцов</TH>
      </TR>
      <TR>
        <TH COLSPAN=2>Стобец 1 и 2</TH>
        <TH>Столбец 3</TH>
      </TR>
      <TR>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Внешний вид этой таблицы при ее просмотре в навигаторе Microsoft Internet Explorer показан на рис. 3.7.

Рис. 3.7. Результат просмотра таблицы с подписью в навигаторе Microsoft Internet Explorer

Если же вы попытаетесь просмотреть этот документ при помощи навигатора Netscape Navigator, который “не понимает” параметр VALIGH и по другому трактует параметр ALIGN, то увидите таблицу, показанную на рис. 3.8.

Рис. 3.8. Результат просмотра таблицы с подписью в навигаторе Netscape Navigator

В документе HTML, исходный текст которого показан в листинге 3.8, мы расположили подпись под таблицей, использовав для этого способ, совместимый как с навигатором Netscape Navigator, так и с навигатором Microsoft Internet Explorer.

Листинг 3.8. Файл chap3\caption2.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Таблицы с заголовком и подписью</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER WIDTH=100%>
      <CAPTION ALIGN=BOTTOM>Табл. 1.2. Таблица с двойным заголовоком</CAPTION>
      <TR>
        <TH COLSPAN=3>Заголовок для всех столбцов</TH>
      </TR>
      <TR>
        <TH COLSPAN=2>Стобец 1 и 2</TH>
        <TH>Столбец 3</TH>
      </TR>
      <TR>
        <TD>000</TD><TD>001</TD><TD>002</TD>
      </TR>
      <TR>
        <TD>010</TD><TD>011</TD><TD>012</TD>
      </TR>
      <TR>
        <TD>100</TD><TD>101</TD><TD>102</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Внешний вид полученной таблицы показан на рис. 3.9.

Рис. 3.9. Подпись расположена под таблицей

Выравнивание текста в ячейках таблицы

С помощью параметров ALIGN и VALIGN можно выполнять выравнивание текста, расположенного в ячейках таблицы. В листинге 3.9 мы привели исходный текст документа HTML, содержащего достаточно сложную таблицу с многослойными заголовками, расположенными как сверху, так и слева от таблицы. В операторах, определяющих ячейки таблицы, мы использовали различные комбинации параметров выравнивания.

Листинг 3.9. Файл chap3\align.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Выравнивание в таблицах</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>

      <TR>
        <TD>
          <TH ROWSPAN=2></TH>
          <TH COLSPAN=3>Тип выравнивания</TH>
        </TD>
      </TR>

      <TR>
        <TD>
          <TH>По левому краю</TH>
          <TH>Центрирование</TH>
          <TH>По правому краю</TH>
        </TD>
      </TR>

      <TR>
         <TH ROWSPAN=2>Направление</TH>
         <TH>По вертикали</TH>
         <TD>Этот текст выровнен по левому краю</TD>
         <TD ALIGN=CENTER>Этот текст отцентрирован</TD>
         <TD ALIGN=RIGHT>Этот текст выровнен по правому краю</TD>
      </TR>

      <TR>
        <TH>По горизонтали</TH>
        <TD VALIGN=TOP>Вверху</TD>
        <TD ALIGN=CENTER>Посередине</TD>
        <TD VALIGN=BOTTOM ALIGN=RIGHT>Внизу</TD>
      </TR>

    </TABLE>
  </BODY>
</HTML>

Внешний вид таблицы показан на рис. 3.10.

Рис. 3.10. Различные способы выравнивания текста в ячейках таблицы

Таблицы внутри таблиц

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

В листинге 3.10 мы привели исходный текст документа HTML, в котором создается такая вложенная таблица.

Листинг 3.10. Файл chap3\nested.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Вложенные таблицы</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <TABLE BORDER>

      <TR>
        <TD>
          <TABLE BORDER>
            <TR>
              <TD>01</TD>
              <TD>02</TD>
            </TR>

            <TR>
              <TD>11</TD>
              <TD>12</TD>
            </TR>
          </TABLE>
        </TD>

        <TD>001</TD>
        <TD>002</TD>
      </TR>

      <TR>
        <TD>100</TD>
        <TD>101</TD>
        <TD>102</TD>
      </TR>

      <TR>
        <TD>200</TD>
        <TD>201</TD>
        <TD>202</TD>
      </TR>

    </TABLE>
  </BODY>
</HTML>

На рис. 3.10 показан внешний вид таблицы, содержащей в левой верхней ячейке другую таблицу.

Рис. 3.11. Вложенная таблица