Таблицы.

(X)HTML-таблицы используются не только традиционным образом (т.е. для представление данных в табличном виде). Они также применяются для управления расположением элементов на странице. Т.е. ячейки таблицы могут содержать изображения, фрагменты текста, списки и, даже, другие таблицы.

В (X)HTML таблица представляется в виде набора строк, каждая, из которых состоит из ячеек. Таблица создается при помощи тегов table, tr, td. Все эти теги являются контейнерными. Тег table описывает таблицу целиком, tr – строку, td – ячейку.

Давайте рассмотрим применение этих тегов на следующем примере. Нам не обходимо создать таблицу размером 2х3.

<table width=”300” border=”0”>

<tr>

<td>Num 11</td>

<td>Num 12</td>

<td>Num 13</td>

</tr>

<tr>

<td>Num 21</td>

<td>Num 22</td>

<td>Num 23</td>

</tr>

</table>

 

Num 11	Num 12	Num 13
Num 21	Num 22	Num 23

 

У тега table есть такие параметры:

· align – выравнивание таблицы (left | right | center);

· bgcolor – цвет фона;

· cellpadding – расстояние от текста до границы ячейки (в пикселях);

· cellspacing – расстояние между ячейками (в пикселях);

· width – ширина таблицы (задается в процентах или пикселях);

· border – толщина рамки таблицы (в пикселях);

· bordercolor – цвет рамки таблицы

У тега tr следующие параметры:

· align – выравнивание содержимого ячеек строки таблицы по горизонтали (left | right | center | justify);

· valign – выравнивание содержимого ячеек строки по вертикали (top | middle | bottom);

· bgcolor – цвет фона ячеек строки;

· bordercolor – цвет рамки ячеек строки;

У тега td следующие свойства:

· align – выравнивание содержимого ячейки по горизонтали (left | right | center | justify);

· valign – выравнивание содержимого ячейки по вертикали (top | middle | bottom);

· bgcolor – цвет фона ячейки;

· bordercolor – цвет рамки ячейки;

· height – высота ячейки (в пикселях или процентах);

· width – ширина ячейки (в пикселях или процентах);

· nowrap=”nowrap” – булевой параметр, запрещающий перенос содержимого ячейки на следующую строку (в этом случае, если содержимое не помещается в ячейку, то размер ячейки будет расширятся до необходимых размеров; для переноса текста придется применять тег <br />);

· rowspan – количество строк, занимаемых ячейкой;

· colspan – количество столбцов, занимаемых ячейкой;

 

Пример. Создадим таблицу, которая растягивается на всю ширину окна и состоит из четырех столбцов и двух строк. Первый столбец должен иметь ширину 10%, второй – 40%, третий – 30%, четвертый – 20%.

Для того, что бы установить ширину столбца достаточно указать ширину для только одной ячейки столбца.

<table width="100%" border="1">

<tr>

<td width="10%">&nbsp;</td>

<td width="40%">&nbsp;</td>

<td width="30%">&nbsp;</td>

<td width="20%">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

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

Для того, что бы построить таблицу, содержащую ячейки, которые объединяют несколько ячеек необходимо применять параметры colspan и rowspan.

Правило для определения правильной расстановки значений параметров colspan и rowspan:

1. Условно достраиваем таблицу до полной.

2. Начинаем «обрабатывать» ячейки по порядку слева направо, начиная с левой верхней.

a. Если в rowspan зарисуем количество занимаемых строк (только если больше 2), а в colspan – количество занимаемых столбцов (только если больше 2).

b. Каждую ячейку обрабатываем только один раз. Если ее ранее уже обработали, то ее пропускаем, даже не прописывая тега <td>…</td>.

Рассмотрим такую таблицу:

Достраиваем ее до полной:

Начинаем обрабатывать первую строку. Первая ячейка занимает две строки и два столбца, поэтому для нее устанавливаем значения rowspan=”2” и colspan=”2”. Вторая ячейка занимает две колонки, поэтому пишем colspan=”2”.

<tr>

<td colspan="2" rowspan="2">;&nbsp; </td>;

<td colspan="2">;&nbsp; </td>;

</tr>

Обрабатываем вторую строку. Первая ячейка уже обработана на прошлом шаге, поэтому ее пропускаем. Вторая ячейка занимает две колонки, поэтому джля нее colspan=”2”.

<tr>

<td colspan="2">;&nbsp; </td>;

</tr>

И так дальше. Полный (X)HTML-код для данной таблици:

<table width="300" border="1">

<tr>

<td colspan="2" rowspan="2">&nbsp;</td>

<td colspan="2">&nbsp;</td>

</tr>

<tr>

<td colspan="2">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td rowspan="2">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

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