Создание таблиц

Таблицы очень часто используют для позиционирования различных элементов на Web-странице.

Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов:
<TR>...</TR> - описание строки таблицы и
<TD>...</TD> - описание ячейки таблицы.

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

Рассмотрим пример простейшей таблицы:

<HTML> 
  <HEAD>
    <TITLE>Таблица</TITLE> 
  </HEAD> 
<BODY>
  <TABLE border="2">  <!-- Начало таблицы --> 
    <TR>
      <TD colspan=2 align=center>
        <B>Заголовок Таблицы.</В> 
      </TD> 
    </TR> 
   <TR>
     <TD align="center">
       Первая ячейка первой строки. 
     </TD> 
     <TD align="center">
       Вторая ячейка первой строки. 
     </TD> 
   </TR> 
   <TR>
     <td align="center">
       Первая ячейка второй строки. 
     </TD> 
     <TD align="center">
       Вторая ячейка второй строки. 
     </TD> 
   </TR>
 </TABLE>             <!-- конец таблицы --> 
</BODY> 
</HTML>

Результат этого кода вы можете посмотреть здесь.

Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>.

Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру.

Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно.

Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:

<TABLE border="l" width="100%"> 
<CAPTION>Пример таблицы</CAPTION>
  <TR>
    <TD width="66%" colspan="2"> 
      <P align="center">
      Две ячейки, объединенные по горизонтали
    </TD> 
  </TR> 
  <TR>
    <TD width="33%" rowspan="2" valign="middle">
      Две ячейки, объединенные по вертикали 
    </TD>
    <TD width="33%">
      no левому краю 
    </TD> 
  </TR> 
  <TR>
    <TD width="33%">
      <P align="right">
        no правому краю 
    </TD> 
  </TR> 
</TABLE>

Шаг 3 - Создание таблиц