<colgroup>
Элемент <colgroup> (от англ. column group — группа колонок) предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. Элемент <colgroup> можно использовать в комбинации с <col>, который определяет характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.
Разница между свойствами <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определённые группы, также при добавлении атрибута rules со значением groups к элементу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.
Для <colgroup> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.
Синтаксис
<table> <colgroup> <tr> <td>...</td> </tr> </table>
Атрибуты
- span
- Количество колонок, к которым следует применять параметры.
Также для этого элемента доступны универсальные атрибуты и события.
Устаревшие атрибуты
- align
- Устанавливает выравнивание содержимого колонки по краю.
- bgcolor
- Устанавливает цвет фона группы колонок.
- char
- Выравнивает содержимое колонки по заданному символу.
- charoff
- Сдвигает содержимое ячейки относительно заданного символа.
- valign
- Задает вертикальное выравнивание содержимого колонки.
- width
- Ширина колонок.
Пример
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>COLGROUP</title> </head> <body> <table> <col> <colgroup span="9"> <col span="5" class="y90"> <col span="4" class="y00"> </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> <th>Нефть</th><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> <th>Золото</th><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> <th>Дерево</th><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> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид таблицы при использовании <colgroup>
Спецификация
Спецификация | Статус |
---|---|
HTML Living Standard | Живой стандарт |
HTML 4.01 Specification | Заменённая рекомендация |
Браузеры
5 | 12 | 1 | 4 | 1 | 1 |
3 | 1 | 6 | 1 |