Оновлено: 19.05.2025

colgroup

<colgroup>

Елемент <colgroup> (від англ. column group — група колонок) призначений для задання ширини та стилю однієї або декількох колонок таблиці. Цей елемент дозволяє зменшити код таблиці за рахунок скорочення атрибутів, що повторюються, також за його наявності браузер починає показувати вміст таблиці, не чекаючи її повного завантаження. Елемент <colgroup> <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>

 

 

Закриваючий тег

Не обов'язковий.

 

 

Атрибути

 

Атрибут alignАтрибут alignЗастаріло

Встановлює вирівнювання вмісту стовпчика по краю.

Атрибут charАтрибут charЗастаріло

Вирівнює вміст колонки за заданим символом.

Атрибут charoffАтрибут charoffЗастаріло

Зсуває вміст комірки відносно заданого символу.

Атрибут spanАтрибут span

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

Атрибут valignАтрибут valignЗастаріло

Задає вертикальне вирівнювання вмісту колонки.

Атрибут widthАтрибут widthЗастаріло

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

 

Приклад

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>COLGROUP</title>
 </head>
<body>
  <table width="100%" 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>&nbsp;</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>Oil</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>Gold</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>Tree</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>
 </body>
</html>