<colgroup>

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

        
          
          <table>  <colgroup>    <col span="2" style="background: rgb(61 39 0 / 0.5)">    <col style="background: rgb(255 216 41 / 0.2)">  </colgroup>  <tr>    <th>Имя</th>    <th>Возраст</th>    <th>Город</th>  </tr>  <tr>    <td>Аня</td>    <td>25</td>    <td>Москва</td>  </tr>  <tr>    <td>Борис</td>    <td>31</td>    <td>Санкт-Петербург</td>  </tr>  <tr>    <td>Виктория</td>    <td>28</td>    <td>Казань</td>  </tr></table>
          <table>
  <colgroup>
    <col span="2" style="background: rgb(61 39 0 / 0.5)">
    <col style="background: rgb(255 216 41 / 0.2)">
  </colgroup>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Аня</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Борис</td>
    <td>31</td>
    <td>Санкт-Петербург</td>
  </tr>
  <tr>
    <td>Виктория</td>
    <td>28</td>
    <td>Казань</td>
  </tr>
</table>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Если не использовать <col>, можно задать атрибут span прямо у <colgroup>, но тогда к колонкам нельзя будет применять стили.

        
          
          <table>  <colgroup span="3"></colgroup></table>
          <table>
  <colgroup span="3"></colgroup>
</table>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно использовать только ограниченный набор CSS-свойств:

• width;
• background;
• background-color;
• visibility;
• border / border-* (только при border-collapse: collapse).

Остальные свойства просто не сработают.

В таблицах нельзя напрямую задать стили колонке как целому — только ячейкам (<td>, <th>). Чтобы стилизовать колонку как единое целое, применяют <colgroup> и <col>. Это удобно, когда:

• у вас десятки строк, но нужно покрасить один столбец;
• нужно задать фиксированную ширину столбцам;
• хотите скрыть одну или несколько колонок.

💡 Тег <colgroup> не отображается на странице сам по себе — он влияет только на стилизацию колонок.
💡 Атрибут span у тега <colgroup> не допускается, если внутри есть один или несколько элементов <col>.
💡 Если вы хотите задать ширину колонке, то лучше использовать style="width:…", а не width="…", так как CSS-стили работают точнее и гибче.
💡 Один <col> может применяться сразу к нескольким колонкам с помощью атрибута span.