Создание таблиц. Базовые элементы.

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

Таблицы строятся с помощью элементов следующих типов:

• table - собственно контейнер, содержащий таблицу. Этот элемент может содержать только элементы группировки строк (thead, tfoot и tbody).
• tbody - тело таблицы. Внутри этого элемента должны размещаться только строки таблицы.
• tr - служит для создания строк таблицы. В строке могут размещаться элементы данных таблицы (td) или элементы заголовка (th).
• td - элемент данных таблицы.
• th - элемент заголовка таблицы.

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

<table>
 <tbody>
 <tr>
 <td>ASP.NET</td>
 <td>Мэтью Макдональд</td>
 <td>2003</td>
 </tr>
 <tr>
 <td>XHTML</td>
 <td>Дональд Макмэтью </td>
 <td>2004</td>
 </tr>
 <tr>
 <td>Использование PHP 5</td>
 <td>Мак Мэтью</td>
 <td>2005</td>
 </tr> 
 ...
 </tbody>
</table>

Как вы сами можете убедиться, полученная таблица выглядит не совсем так, как хотелось бы. У привычных нам таблиц есть по крайней мере рамки! Добиться "нормального" внешнего вида нам помогут атрибуты элемента table:

• border - данный атрибут определяет наличие и толщину рамки таблицы. Если border имеет значение больше 0, то таблица, а так же каждая ее непустая ячейка, приобретет рамку. Кроме того, толщина внешней рамки таблицы определяется присвоенным значением.
• width - ширина всей таблицы. При этом, ширина каждого столбца таблицы подбирается автоматически на основании длины значений ячеек, составляющих данный столбец. Ширину таблицы можно указывать в пикселях или в процентах. В последнем случае сразу после числа ставится знак "%".
• cellspacing - размер внешнего отступа от границ ячеек до соседних ячеек или рамки таблицы.
• cellpadding - размер внутреннего отступа от границ ячеек до содержимого.
• align - выравнивание таблицы. Отменен! Для выравнивания всей таблицы используют SS.

С учетом вышеописанного модифицируем код примера 5.1.1 следующим образом:

<table border="1" width="500" cellspacing="0" cellpadding="3">
 <tbody>
 <tr>
 <td>ASP.NET</td>
 <td>Мэтью Макдональд</td>
 <td>2003</td>
 </tr>
 <tr>
 <td>XHTML</td>
 <td>Дональд Макмэтью </td>
 <td>2004</td>
 </tr>
 <tr>
 <td>Использование PHP 5</td>
 <td>Мак Мэтью</td>
 <td>2005</td>
 </tr> 
 ...
 </tbody>
</table>

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

<table border="1" width="500" cellspacing="0" cellpadding="3">
 <tbody>
 <tr>
 <th>Название</th>
 <th>Автор</th>
 <th>Год Издания</th>
 </tr> 
 ...
 </tbody>
</table>

<table border="1" width="500" cellspacing="0" cellpadding="3">
 <tbody>
 <tr style="background-image:url(bg01.jpg);"> 
 ...
 </tbody>
</table>

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

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

<table border="1" width="500" cellspacing="0" cellpadding="3">
 <caption>Библиотека web-мастера</caption>
 <tbody>
 <tr style="background-image:url(bg01.jpg);"> 
 ...
 </tbody>
</table>

Надпись обычно выравнивается по центру относительно таблицы. Для изменения выравнивания используйте стилевое правило text-align.

Более тонко настроить внешний вид таблицы можно при помощи атрибутов элементов <tr>, <td> и <th>.

Выравнивание данных таблиц

Выравнивать данные таблицы можно для каждой конкретной ячейли, для всей строки и для группы строк или столбцов (<tbody>, <thead>, <tfoot> и пр.; ). Кроме того, данные можно выравнивать по горизонтали и вертикали. Для горизонтального выравнивания используется атрибут  align, который может принимать следующие значения:

• left - по левой стороне ячейки
• center - по правой стороне ячейки
• right - по центру ячейки
• justify - по ширине ячейки.

Для вертикальоного выравнивания используется атрибут  valign. Значения этого атрибута могут быть следующими:

• top - по верху ячейки
• middle - по центру ячейки
• bottom - по низу ячейки.

Для какого бы элемента вы ни указали атрибуты  align или  valign (<td>, <th>, <tr> или группе), выравнивание происходит относительно границ каждой ячейки. Указав выравнивание для элемента <td>, мы расположим соответственно только его содержимое. Задав выравнивание для всей строки <tr>, мы задаем выравнивание для всех ячеек данной строки. Аналогичным образом и для групп строк или столбцов.

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

 ...
 <tr>
 <td>XHTML</td>
 <td align="center">Дональд Макмэтью </td>
 <td align="right">2004</td>
 </tr>
 <tr>
 <td>Использование PHP 5</td>
 <td align="center">Мак Мэтью</td>
 <td align="right">2005</td>
 </tr> 
 ...

Управление размерами ячеек

Для ячеек <td> и <th> можно указать размеры, используя стилевые свойства width и height:

• width:ширина;
• height:высота;

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

Пример:

 ...
 <tr>
 <td style="width: 220px;">XHTML</td>
 <td style="width: 150px;" align="center">Дональд Макмэтью </td>
 <td style="width: 60px;" align="right">2004</td>
 </tr>
 <tr>
 <td style="width: 220px;">Использование PHP 5</td>
 <td style="width: 150px;" align="center">Мак Мэтью</td>
 <td style="width: 60px;" align="right">2005</td>
 </tr> 
 ...

Очевиден тот факт, что при указании размеров каждой ячейки таблицы, вы формируете столбцы заданной ширины. Это означает, что общая ширина всей таблицы будет равна суммарной ширине столбцов. Поэтому указывать общую ширину таблицы в этом случае не следует. В нашем примере первый столбец имеет ширину 220 пикселей, второй - 150 пикселей и третий - 60 пикселей. Суммарная ширина таблицы составит 430 пикселей (без учета ширины рамки).

Объединение ячеек

В некоторых задачах приходится строить таблицы, ячейки которых "покрывают" несколько столбцов или строк. Чаще всего это относится к ячейкам заголовков, реже к ячейкам данных таблицы. Ниже представлен пример такой таблицы:

Обратите внимание на "шапку" таблицы. Она состоит уже из двух строк. Это следует принимать во внимание при оформлении таблицы.

Управление объединением ячеек происходит с помощью атрибутов элементов <td> и <th>:

• colspan="N" - объединяет N столбцов
• rowspan="N"- - объединяет N строк.

Код приведенной таблицы представлен ниже:

<table border="1" cellpadding="2" cellspacing="0">
 <tbody>
 <tr style="background-color: #dddddd;">
 <td rowspan="2" style="width: 200px;">&nbsp;</td>
 <td colspan="2" style="width: 100px;">&nbsp;</td>
 </tr>
 <tr style="background-color: #dddddd;">
 <td style="width: 40px;">&nbsp;</td>
 <td style="width: 60px;">&nbsp;</td>
 </tr>
 <tr>
 <td style="width: 200px;">&nbsp;</td>
 <td style="width: 40px;">&nbsp;</td>
 <td style="width: 60px;">&nbsp;</td>
 </tr>
 ... 
 </tbody>
</table>

Строкам "шапки" в примере присвоен одинаковый фоновый цвет.

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