2. Оформление таблиц

Возможностью выборочно оформлять ячейки таблицы можно управлять с помощью тега <colgroup> и составляющего ему пару тега <col/>. Объединяя ячейки с помощью этих тегов, можно определить столбцы данных, к которым применяются стили, а не оформлять отдельные строки или отдельные ячейки.

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

Пример. Использование тега <col>

<table width="400" border="0" cellpadding="5" cellspacing="0">

<col width="150" valign="top">

<col width="250" valign="top">

<tr>

<td style="background: #B0B28E">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</td>

<td style="background: #CCCCCC">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</td>

</tr>

</table>

Атрибуты

align

Устанавливает выравнивание содержимого колонки по краю.

char

Выравнивает содержимое колонки по заданному символу.

charoff

Сдвигает содержимое ячейки относительно заданного символа.

span

Количество колонок, к которым следует применять параметры.

valign

Задает вертикальное выравнивание содержимого колонки.

width

Ширина колонок.

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

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определенные группы, также при добавлении атрибута rules="groups" к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

Атрибуты <colgroup> такие же, как и у <col>.

Пример использования:

<table width="450" cellpadding="2" cellspacing="0" border="1" rules="groups">

<colgroup width="150">

<colgroup span="9" align="center" width="50">

<col span="5">

<col span="4">

</colgroup>

<tr>

<td> </td><td>1995</td><td>1996</td><td>1997</td>

<td>1998</td><td>1999</td><td>2000</td><td>2001</td>

<td>2002</td><td>2003</td>

</tr>

<tr>

<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>

<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>

</tr>

<tr>

<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>

<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>

</tr>

<tr>

<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>

<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>

</tr>

</table>