<col> - тег для стилізації стовпців таблиці

HTML-елемент<col> використовується для визначення спільних властивостей для одного або декількох стовпців у межах <colgroup> в HTML-таблиці.

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

Тег <col> не має вмісту і закриваючого тега.

HTML
<col>

Атрибути

Цей тег може мати глобальні атрибути.

span: Вказує, на скільки послідовних стовпців поширюються властивості, визначені цим тегом <col>. Значення має бути додатним цілим числом. Якщо атрибут не вказано, за замовчуванням використовується значення 1.
align: Визначає вирівнювання вмісту комірок стовпця. Можливі значення: left, center, right, justify, char. Для керування вирівнюванням рекомендується використовувати CSS властивість text-align.
bgcolor: Визначає колір фону для стовпця. Рекомендується використовувати CSS властивість background-color.
char: Вирівнює вміст стовпця по вказаному символу. Працює в парі з align="char".
charoff: Зміщує вміст стовпця відносно символу, вказаного в атрибуті char.
valign: Визначає вертикальне вирівнювання вмісту комірок. Можливі значення: top, middle, bottom, baseline. Рекомендується використовувати CSS властивість vertical-align.
width: Визначає ширину стовпця. Рекомендується використовувати CSS властивість width.

Важливі примітки

Важливо розуміти, що тег <col> може впливати лише на обмежений набір CSS-властивостей. Згідно зі специфікацією, це:

border
background
width
visibility (якщо visibility: collapse)

Інші CSS-властивості, такі як color, padding, font, не будуть застосовані до вмісту комірок через тег <col>. Для їх стилізації потрібно звертатися безпосередньо до тегів <td> або <th>.

Приклади використання

<table>
  <colgroup>
    <col span="2" style="background-color: #f2f2f2;">
    <col style="background-color: #e6e6fa; border: 2px solid #9370db;">
  </colgroup>
  <thead>
    <tr>
      <th>Ім'я</th>
      <th>Прізвище</th>
      <th>Вік</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Іван</td>
      <td>Петренко</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Марія</td>
      <td>Сидоренко</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #e2e2e2;
}

Підтримка браузерів



`col`
`align`
`char`
`charoff`
`span`
`valign`
`width`

<col> - тег для стилізації стовпців таблиці

Синтаксис

Атрибути

Важливі примітки

Приклади використання

Підтримка браузерів