01. Кодирование таблиц

В практике сайтостроения таблицы используют для создания полей, рамок, выравнивания объектов, многоколонной верстки, наложения картинок… И, наконец, для отображения на экране, собственно, табличного материала!

Так было до недавнего времени. Сегодня web-конструкторы стараются использовать таблицы только по прямому назначению — для вёрстки табличных данных, а визуальные задачи решать средствами CSS. Но обо всем по порядку.

На этой странице:

• Что такое таблица
• Как задать таблицу (элемент TABLE)
• Атрибуты элемента TABLE
  • Атрибут align
  • Атрибуты width и height
  • Атрибуты cellpadding и cellspacing
  • Атрибуты bgcolor и background
  • Атрибуты border и bordercolor
• Атрибуты элемента TR
  • Атрибуты align и valign
  • Атрибут bgcolor
• Атрибуты элементов TD и TН
  • Атрибут nowrap
  • Атрибут colspan=n
  • Атрибут rowspan=n
• Элемент CAPTION
• Другие элементы таблицы

Что такое таблица

Всем хорошо известна таблица умножения:

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

Заголовками строк и столбцов в таблице умножения служат цифры от одного до девяти. Пользоваться таблицей очень просто. Если нужно узнать, например, результат умножения числа 6 на число 8, нужно прочитать ответ в клетке, расположенной на пересечении столбца с заголовком “6” и строки с заголовком “8”. Или в клетке, расположенной на пересечении строки с заголовком “6” и столбца с заголовком “8”. Всё равно, какой из вариантов выбрать, потому что 6×8=8×6. В обеих этих клетках находится число 48.

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

Для таблицы умножения признаками служат значения сомножителей. Первый признак — это значение первого сомножителя, второй — значение второго.

Как задать таблицу (элемент TABLE)

Таблица задаётся элементом TABLE, который описывается парой тегов <TABLE>...</TABLE>. Между этими тегами задаются строки таблицы (пары тегов <TR>...</TR>). Наконец, внутри строк задаются клетки (ячейки) таблицы (пары тегов <TD>...</TD>). Таким вот образом, по строкам, описывается вся структура таблицы:

Пример задания таблицы, состоящей из трёх строк и двух столбцов:

  
<TABLE border=1>
  <TR>                 <!-- Первая строка -->
    <TD>(1,1)</TD>     <!-- Первая ячейка -->
    <TD>(1,2)</TD>     <!-- Вторая ячейка -->
  </TR>
  <TR>                 <!-- Вторая строка -->
    <TD>(2,1)</TD>     <!-- Первая ячейка -->
    <TD>(2,2)</TD>     <!-- Вторая ячейка -->
  </TR>
  <TR>                 <!-- Третья строка -->
    <TD>(3,1)</TD>     <!-- Первая ячейка -->
    <TD>(3,2)</TD>     <!-- Вторая ячейка -->
  </TR>
</TABLE>

На экране эта таблица отображается так:

Атрибуты элемента TABLE

Атрибуты элемента TABLE описаны ниже.

Атрибут align

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

Если атрибут не задан, таблица выравнивается по левому краю окна, а другие элементы страницы располагаются выше или ниже (обтекания не происходит):

Отметим, что обтекание, заданное атрибутом align, как и для картинок, прекращается элементом BR с атрибутом clear:

Выровнять таблицу по горизонтали без обтекания можно, используя значение auto стилевого свойства margin (см. в теме 2 раздел Горизонтальное форматирование).

Эта таблица

выровнена по правому краю без обтекания при помощи кода:

  
<TABLE style="margin: 1em 0 1em auto" border=1>
    ...
</TABLE>

А эта таблица

выровнена по центру при помощи кода:

  
<TABLE style="margin: 1em auto" border=1>
    ...
</TABLE>

Атрибуты width height

Если эти атрибуты не заданы, браузер нарисует таблицу минимальных размеров вокруг данных, которые она содержит. Записи width=число и height=число заставляет браузер рисовать таблицу шириной и высотой в указанное количество пикселов.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Ширина и высота таблицы</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <H2>Ширина и высота таблицы</H2>

         <TABLE border=1 width= height=>

  
      <TR>                
        <TD>(1,1)</TD>    
        <TD>(1,2)</TD>    
      </TR>
      <TR>                
        <TD>(2,1)</TD>    
        <TD>(2,2)</TD>    
      </TR>
      <TR>                
        <TD>(3,1)</TD>    
        <TD>(3,2)</TD>    
      </TR>
    </TABLE>

  </BODY>
</HTML>

Если реально для таблицы требуется больше места, значения width и height игнорируются. Если заданные размеры уводят таблицу за границы окна, браузер добавляет к окну полосы прокрутки.

Старайтесь формировать окно документа так, чтобы горизонтальная полоса прокрутки не появлялась в окнах шириной 800 пикселов. Во-первых, полоса прокрутки уменьшает полезный размер окна, во-вторых, затрудняет просмотр документа.

Можно задавать ширину и высоту таблицу в процентном отношении к ширине и высоте родительского элемента, который содержит таблицу и сам ограничен в размерах. В качестве такого родительского элемента чаще всего выступает окно браузера (элемент BODY).

Для указания процентного отношения используют запись width=процент (например, width=90%) и запись height=процент.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Ширина и высота таблицы</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <H2>Ширина и высота таблицы</H2>

          <TABLE border=1 width= height=>

  
      <TR>                
        <TD>(1,1)</TD>    
        <TD>(1,2)</TD>    
      </TR>
      <TR>                
        <TD>(2,1)</TD>    
        <TD>(2,2)</TD>    
      </TR>
      <TR>                
        <TD>(3,1)</TD>    
        <TD>(3,2)</TD>    
      </TR>
    </TABLE>

  </BODY>
</HTML>

В стандарте W3C описан только атрибут width, но современные браузеры поддерживают и атрибут height также.

Атрибуты cellpadding и cellspacing

Атрибут cellpadding задаёт расстояние между рамкой (границей) ячейки и её содержимым, атрибут cellspacing — расстояние между рамками соседних ячеек. Если атрибуты не заданы, браузер устанавливает эти расстояния по умолчанию, обычно cellpadding=1 и cellspacing=2.

cellpadding= cellspacing=

(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Заметим, что когда значение атрибута cellspacing отлично от нуля, каждая ячейка обрамляется отдельной рамкой.

Атрибуты bgcolor и background

Если эти атрибуты не заданы, элементы таблицы выводятся прямо на фон документа и таблица выглядит прозрачной. Атрибут bgcolor задаёт цвет фона таблицы, а атрибут background — “паркетный” фон.

Атрибуты border и bordercolor

Первый атрибут задает толщину рамки (границы) таблицы, второй — цвет этой рамки. Если задано значение border=0, табличная рамка, а заодно и рамки клеток, не рисуются.

Если значение border отлично от нуля, табличная рамка отображается с эффектом трёхмерности. Добавление атрибута bordercolor обеспечивает плоские рамки.

В браузере Opera атрибут bordercolor не работает, а в Firefox относится только к рамке самой таблицы.

border=0 cellpadding=10 cellspacing=0	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=2 cellpadding=10 cellspacing=1	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=5 bordercolor=red cellpadding=10 cellspacing=0	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border=5 bordercolor=red cellpadding=10 cellspacing=5	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)
border= bordercolor= cellpadding= cellspacing=	(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Атрибуты элемента TR

HTML-таблица состоит из строк, каждая из которых задаётся элементом TR:

  
<TR>Описание ячеек табличной строки</TR>

Используя атрибуты элемента TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибуты align и valign

Атрибут align определяет горизонтальное выравнивание. Если атрибут не задан, содержимое ячеек выравнивается по левому краю ячейки, точно так же, как при значении align=left (для TD, а для TD — по центру). Значение align=right задает выравнивание по правому краю ячейки, а значение align=center — по центру ячейки.

Атрибут valign определяет вертикальное выравнивание содержимого ячеек: top — по верхнему краю ячейки, bottom — по нижнему, middle — по центру ячейки. По умолчанию (если атрибут не задан) браузер центрирует содержимое ячеек по вертикали.

Атрибут bgcolor

Если атрибут bgcolor не задан, содержимое ячеек таблицы выводится на фоне, установленном для таблицы или на фоне документа, если фон таблицы не задан. Атрибут bgcolor позволяет задать собственный фоновый цвет для всех ячеек в строке .

Атрибуты элементов TD и TH

Каждая табличная строка состоит из ячеек, которые последовательно описываются элементами TD (обычная ячейка) и/или TH (ячейка-заголовок):

  
<TH>Описание содержимого ячейки</TH>
<TD>Описание содержимого ячейки</TD>

Содержимое обычной ячейки (TD) по умолчанию выравнивается слева по горизонтали и по центру по вертикали.

Содержимое ячейки-заголовка (TH) по умолчанию выравнивается по центру, как по горизонтали, так и по вертикали. Кроме того, текст в ячейке-заголовке выделяется (полужирным начертанием шрифта).

Атрибуты элементов TD и TH приведены в таблице:

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

Рассмотрим подробнее новые атрибуты.

Атрибут nowrap

Обычно браузер форматирует содержимое ячейки таблицы так же, как и текст абзаца на всей странице.

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

Атрибут nowrap (у него нет присваиваемых значений) запрещает браузеру выполнять описанное выше автоматическое форматирование. При больших абзацах и небольших размерах окна этот приём вынуждает браузер показывать горизонтальную полосу прокрутки.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Атрибут nowrap</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <H2>Атрибут nowrap</H2>

      <TABLE border=1 cellpadding=10 cellspacing=1>
        <TR>                
          <TD>(1,1)</TD>    
          <TD>(1,2)</TD>    
        </TR>
        <TR>                
          <TD>(2,1)</TD>    
          <TD nowrap bgcolor=#ffcc00>
&#8212;&nbsp;Грозный Генька-генератор грубо грыз 
горох горстями&#133;&nbsp;&#8212; начала было 
машина, но Трурль подскочил к пульту управления, 
нажал на рубильник и, заслонив его собственным 
телом, промолвил сдавленным голосом:
          </TD>    
        </TR>
        <TR>                
          <TD>(3,1)</TD>    
          <TD>(3,2)</TD>    
        </TR>
      </TABLE>

 </BODY>
</HTML>

Как уже говорилось, горизонтальная прокрутка не способствует улучшению комфорта для пользователя, поэтому применение атрибута nowrap ограничивается специальными (и довольно редкими) случаями.

Атрибут colspan=n

Атрибут colspan=n определяет, сколько табличных столбцов (n) займёт ячейка в пределах строки.

Пример использования атрибута colspan приводится ниже.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Атрибут colspan</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <H2>Атрибут colspan</H2>
    <TABLE border=1 cellpadding=10 cellspacing=0>
      <TR>
        <TD colspan=2>
          Для этой ячейки задан атрибут 
          <CODE>colspan=2</CODE>.
        </TD>
      </TR>
      <TR>
        <TD>(2,1)</TD>
        <TD>(2,2)</TD>
      </TR>
      <TR>
        <TD>(3,1)</TD>
        <TD>(3,2)</TD>
      </TR>
    </TABLE>

 </BODY>
</HTML>

Схема кода таблицы примера показана на рисунке:

Атрибут rowspan=n

Атрибут rowspan=n определяет, сколько табличных строк (n) займёт ячейка в пределах столбца. Пример использования атрибута rowspan показан ниже.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Атрибут rowspan</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 

    <H2>Атрибут rowspan</H2>
    <TABLE border=1 cellpadding=10 cellspacing=0>
      <TR>
        <TD rowspan=2>
          Для этой ячейки задан атрибут 
          <CODE>rowspan=2</CODE>.
        </TD>
        <TD>(1,2)</TD>
      </TR>
      <TR>
        <TD>(2,2)</TD>
      </TR>
      <TR>
        <TD>(3,1)</TD>
        <TD>(3,2)</TD>
      </TR>
    </TABLE>

 </BODY>
</HTML>

Схема кода таблицы примера показана на рисунке:

Элемент CAPTION

Элемент CAPTION помещается внутрь контейнера TABLE (вне табличных строк) и задаёт заголовок таблицы.

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Элемент CAPTION</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black> 
    <H2>Элемент CAPTION</H2>
    <TABLE border=1 width=50%
           cellpadding=10 cellspacing=0>
      <CAPTION>Заголовок таблицы</CAPTION>
      <TR>
        <TD>(1,1)</TD>
        <TD>(1,2)</TD>
        <TD>(1,3)</TD>
      </TR>
      <TR>
        <TD>(2,1)</TD>
        <TD>(2,2)</TD>
        <TD>(2,3)</TD>
      </TR>
      <TR>
        <TD>(3,1)</TD>
        <TD>(3,2)</TD>
        <TD>(3,3)</TD>
      </TR>
    </TABLE>
 </BODY>
</HTML>

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

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

  
<TABLE border=1 width=50%
       cellpadding=10 cellspacing=0>
  <CAPTION align=bottom style="text-align:left"
           >Заголовок таблицы</CAPTION>

Разные браузеры немного по-разному выводят заголовок таблицы. Например, браузер IE выравнивает заголовок слева не по краю таблицы, а по уровню ячеек первого столбца.

Другие элементы таблицы

Откройте Спецификацию HTML 4.0 (или 4.01), и прочитайте раздел “11. Таблицы”.

Вы узнаете, что строки таблицы могут вкладываются в элемент TBODY (тело таблицы). Кроме TBODY строки могут группироваться в элементах THEAD (раздел верхнего заголовка) и TFOOT (раздел нижнего заголовка).

Более того, можно объявлять свойства столбцов в начале определения таблицы с помощью элементов COLGROUP и COL, что позволяет браузерам генерировать таблицу последовательно, без ожидания поступления с сервера всех табличных данных.