Тег <colgroup>

Тег <colgroup> служит для определения параметров одной или нескольких групп колонок таблицы. Используя тег <colgroup>, можно значительно сократить код таблицы, задав одинаковые стили целым столбцам, а не присваивать их ячейкам каждой строки отдельно. Тег <colgroup> имеет закрывающий тег, но может использоваться без него (если нет подгрупп <col>), и помимо своих атрибутов может использовать универсальные атрибуты и события. В коде тег <colgroup> прописывается после открывающего тега <table>, а при наличии тега <caption>, сразу после него:

            
  <table>
   <colgroup атрибуты>
   <tr>
    <td>содержимое ячейки</td>
   </tr>
  </table>
            
            

или, если присутствует тег <caption>:

            
  <table>
   <caption>Заголовок (описание таблицы)< /caption>
   <colgroup атрибуты>
   <tr>
    <td>содержимое ячейки</td>
   </tr>
  </table>
            
            

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

            
  <table>
   <colgroup атрибуты>
    <col атрибуты>
    <col атрибуты>
   </colgroup>
   <tr>
    <td>содержимое ячейки</td>
   </tr>
  </table>
            
            

Особой разницы между тегами <colgroup> и <col> нет. Просто использование тега <col> внутри colgroup дает возможность разбить колонки таблицы на более мелкие подгруппы и задать им иные параметры.

Атрибуты тега <colgroup>

width – задает колонкам ширину.

span - задает количество колонок, к которым необходимо применять параметры.

Пример:

        
<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег COLGROUP</title>
    <meta charset="utf-8">
  </head>
  <body>
  <table width="500" border="2" cellspacing="0" cellpadding="3">
   <colgroup style="background-color: #CCCCCC">
   <colgroup span="4" style="background-color: #FF0">
    <col span="2">
    <col span="2" style="background-color: #00FF00">
   </colgroup> 
   <tr>
    <th>Код</th>
    <th>№ Склада</th>
    <th>Товар</th>
    <th>Масс, кг</th>
    <th>Цена, роз</th>
    <th>Цена, опт</th>
   </tr>
   <tr> 
    <td>004677567</td>
    <td>53</td>
    <td>Ананасы</td>
    <td>450</td>
    <td>1000 р.</td>
    <td>950 р.</td>
   </tr>
   <tr> 
    <td>004568667</td>
    <td>43</td>
    <td>Бананы</td>
    <td>320</td>
    <td>860 р.</td>
    <td>810 р.</td>
   </tr>
  </table>
  </body>
</html> 
			
            
Смотреть пример