ТАБЛИЦЫ

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

Например, нужно оформить на HTML следующую таблицу.

Код будет выглядеть следующим образом:

<TABLE>
<CAPTION> Прайс-лист </CAPTION>
<TR>   <TH>Наименование</TH>
          <TH>Модель</TH>
          <TH>Цена, р.</TH>
</TR>
<TR>   <TD>Процессор</TD>
          <TD>AMD Phenom</TD>
          <TD>2 800</TD>
</TR>

<TR>   <TD>Память</TD>
          <TD>DIMM, 6 Г</TD>
          <TD>1 653</TD>
</TR>
<TR>   <TD>Материнская плата</TD>
          <TD>IWILL, 4HT-S</TD>
          <TD>3 500</TD>
</TR>
<TR>   <TD>BR-ROM</TD>
          <TD>Creative</TD>
          <TD>3 125</TD>
</TR>
</TABLE>

Как видно, у таблицы нет внешних и внутренних границ. Чтобы они появились, в теге <TABLE> нужно приписать параметр BORDER. Есть и другие параметры, влияющие на внешнее представление таблицы и ее содержимого. В приведенной ниже таблице в круглых скобках указывается соответствущее устаревшему параметру свойство стиля.

ALIGN (не рекомендуется спецификацией)	left / right /center	выравнивание таблицы / содержимого ячеек по горизонтали
BACKGROUND (background-image)	путь к файлу-картинке	вставка фонового рисунка
BGCOLOR (background-color)	число / название цвета	цвет фона всей таблицы / строки / ячейки
BORDER	число	толщина линий сетки таблицы
BORDERCOLOR (border или border-color)	число / название цвета	цвет линий сетки таблицы / строки / ячейки
BORDERCOLORDARK (border-style)	число / название цвета	цвет сетки с дополнительным эффектом трехмерности
BORDERCOLORLIGHT (border-style)	число / название цвета	цвет сетки с дополнительным эффектом трехмерности
CELLPADDING	число пикселей	ширина промежутка между ячейками
CELLSPACING	число пикселей	ширина поля между содержимым ячейки и ее границей
HEIGHT (height)	число пикселей / число процентов	длина таблицы
VALIGN (vertical-align)	top / middle / bottom	выравнивание содержимого ячейки по вертикали относительно содержимого соседних ячеек строки
WIDTH	число пикселей / число процентов	ширина таблицы

В таблице через знак “/” показаны различные варианты значений параметров и возможность применения параметра либо к тегу <TABLE>, либо к <TR>, либо к <TD>.

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

ROWSPAN	число ячеек	объединяет ячейки по столбцам
COLSPAN	число ячеек	объединяет ячейки по строкам

<TABLE BORDER>
<TR>   <TD ROWSPAN = 2>Процессор</TD>
          <TD> Pentium II </TD>
          <TD> 2 800 </TD>
</TR>
<TR>   <TD> Celeron 500 MГц </TD>
          <TD> 2 100 </TD>
</TR>

</TABLE>

Для более гибкого оформления таблицы предусмотрены теги структурирования, располагающиеся внутри контейнера <TABLE>.

<THEAD>   </THEAD>	объединяет строки заголовочной части (голова)
<TBODY>   </TBODY>	объединяет строки основного содержания (тело)
<TFOOT>    </TFOOT>	объединяет строки итоговой части таблицы (ноги)
<COLGROUP> </COLGROUP>	объединяет столбцы в группы для задания единого стиля
<COL>  </COL>	задает характеристики одной или нескольких (span) колонок таблицы. Можно использовать совместно с тегом <colgroup>

<table cellpadding="2" rules="groups" border="3">

<colgroup width="90">  </colgroup>

<colgroup span="3" width="90">  </colgroup>

<colgroup span="3" width="90">

<col> <col style="border: 2px dashed red;"> <col> </colgroup>

<colgroup span="3" width="90">  </colgroup>

<tr style="background: black; color: white; font-weight: bold">
    <td>Страна</td>
    <td>Население в 1975</td>
    <td>Население в 1976</td>
    <td>Население в 1977</td>
    <td>Женщины в 1975</td>
    <td>Женщины в 1976</td>
    <td>Женщины в 1977</td>
    <td>Мужчины в 1975</td>
    <td>Мужчины в 1976</td>
    <td>Мужчины в 1977</td>
</tr>
<tr>
    <td>Австрия</td>
    <td>7578903</td>
    <td>7565525</td>
    <td>7568430</td>
    <td>4618455</td>
    <td>4644100</td>
    <td>4710300</td>
    <td>4462800</td>
    <td>4517200</td>
    <td>4558800</td>
</tr>
<tr>
    <td>Албания</td>
    <td>2401602</td>
    <td>2455497</td>
    <td>2509909</td>
    <td>2550193</td>
    <td>2558469</td>
    <td>2567052</td>
    <td>2506844</td>
    <td>2512827</td>
    <td>2519844</td>
</tr>
<tr>
    <td>Андорра</td>
    <td>26558</td>
    <td>28500</td>
    <td>29396</td>
    <td>1554000</td>
    <td>1572900</td>
    <td>1621400</td>
    <td>1581100</td>
    <td>1639500</td>
    <td>1660800</td>
</tr>
</table>

В приведенном примере с помощью тегов <COLGROUP> в таблице выделен первый столбец и три группы по три столбца. Во второй группе с помощью тегов <COL> выделяется каждый столбец в группе, а средний из них стилем border обрамляется пунктирной линией.

Есть еще ряд атрибутов для тега <TABLE>, с помощью которых можно гибко оформлять границы таблицы. Первый атрибут FRAME (поддерживается не всеми браузерами). Его множество значений приведено в таблице ниже.

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

Пример.

Потребительская корзина
Продукты	Цена, р.	Вес, г
Масло	70	200
Сыр	35	500
Хлеб	5,50	500
Итого	110,50	1200

<TABLE  RULES = GROUPS>

<CAPTION>Потребительская корзина </CAPTION>

<THEAD>

<TR>
    <TH>Продукты</TH>
    <TH>Цена, р.</TH>

    <TH>Вес, г</TH>
</TR>

</THEAD>

<TBODY>

<TR><TD>Масло</TD><TD>70</TD><TD>200</TD></TR>

<TR><TD> Сыр </TD><TD> 35 </TD><TD> 500 </TD> </TR>

<TR><TD> Хлеб </TD><TD> 5,50 </TD><TD> 500 </TD> </TR>

</TBODY>

<TFOOT>

<TR>
    <TD> <B> Итого </B> </TD>
    <TD><B> 110,50 </B></TD>
    <TD><B> 1200 </B></TD>
</TR>

</TFOOT>

 </TABLE>