Тег <col>
Тег <col> (укр. — “стовпець”) в HTML використовується всередині таблиці для визначення властивостей окремих стовпців або групи стовпців. Він сам не відображає контенту, а застосовується для стилізації та логічної структури таблиць.
Завжди використовується всередині контейнера <colgroup>. Особливо корисний при необхідності задавати ширину, фон, межі або інші стилі стовпцям.
Атрибути
Специфічні атрибути
- span — визначає кількість стовпців, до яких застосовується цей тег. За замовчуванням 1. Наприклад:
<col span="2">Глобальні атрибути
Тег <col> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор. Наприклад:
<col id="price-column">- class — для CSS-стилізації. Наприклад:
<col class="highlight-column">- style — для інлайн-стилів. Наприклад:
<col style="background-color: #f9f9f9;">Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання col</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.name-column {
background-color: #e0f7fa;
}
.price-column {
background-color: #fce4ec;
text-align: right;
}
</style>
</head>
<body>
<h2>Таблиця зі стилізацією стовпців через col:</h2>
<table>
<colgroup>
<col class="name-column">
<col class="price-column">
</colgroup>
<thead>
<tr>
<th>Товар</th>
<th>Ціна</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ноутбук</td>
<td>1500</td>
</tr>
<tr>
<td>Смартфон</td>
<td>800</td>
</tr>
</tbody>
</table>
</body>
</html>Додаткові моменти
- Тег
<col>не може містити жодного вмісту — це самозакривальний тег. - Застосовується лише разом із контейнером
<colgroup>. - Стилізація через
<col>дозволяє швидко застосовувати стилі одразу до всього стовпця без дублювання у кожній комірці. - Значно спрощує підтримку та редагування таблиць.
- Підтримується усіма сучасними браузерами.
- Може комбінуватись із атрибутом
span, якщо потрібно застосувати стилі до декількох стовпців поспіль.
