<col>

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

        
          
          <table>  <colgroup>    <col>    <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>    <th>Комментарий</th>  </tr>  <tr>    <td>1</td>    <td>Мария</td>    <td>28</td>    <td>Очень понравился фильм!</td>  </tr>  <tr>    <td>2</td>    <td>Алексей</td>    <td>34</td>    <td>Хотелось бы продолжения.</td>  </tr>  <tr>    <td>3</td>    <td>Ирина</td>    <td>25</td>    <td>Сюжет захватывающий!</td>  </tr></table>
          <table>
  <colgroup>
    <col>
    <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>
    <th>Комментарий</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Мария</td>
    <td>28</td>
    <td>Очень понравился фильм!</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Алексей</td>
    <td>34</td>
    <td>Хотелось бы продолжения.</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Ирина</td>
    <td>25</td>
    <td>Сюжет захватывающий!</td>
  </tr>
</table>

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

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

        
          
          <colgroup>  <col>  <col span="2" style="background: rgb(61 39 0 / 0.5)">  <col style="background: rgb(255 216 41 / 0.2)"></colgroup>
          <colgroup>
  <col>
  <col span="2" style="background: rgb(61 39 0 / 0.5)">
  <col style="background: rgb(255 216 41 / 0.2)">
</colgroup>

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

• Атрибут span позволяет применить один <col> сразу к нескольким колонкам подряд.
• Стили задаются через атрибут style или внешние CSS-правила.

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

Это особенно удобно, когда:

• таблица большая, и повторять стили в каждом <td> неудобно;
• нужен единый цвет или ширина для всей колонки;
• колонку нужно спрятать с помощью display: none.

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

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

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

💡 <col> работает только в связке с <colgroup>. Без него браузер проигнорирует тег.
💡 Стили, заданные через <col>, применяются к ячейкам <td> и <th> соответствующей колонки, если они не переопределены в самих ячейках.
💡 Чтобы колонка исчезла, можно прописать col { display: none } — и всё содержимое этой колонки исчезнет с глаз.