3 ТАБЛИЦЫ В ДОКУМЕНТАХ HTML

Сервер Web своими руками. Язык HTML, приложения CGI и ISAPI, установка серверов Web для Windows

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

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

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

В листинге 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. Вложенная таблица