HTML-тег <col>

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

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

Базовый пример HTML-тега <col>

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            .highlight {
                background-color: #f0f000;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Basic Example with <col> Tag</h2>
        <table border="1">
            <colgroup>
                <col class="highlight">
                <col>
            </colgroup>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
            </tr>
        </table>
    </body>
</html>

Пояснение: Первый столбец оформлен светлым фоном и жирным текстом с использованием класса .highlight примененного через тег <col> .

Атрибуты HTML-тега <col>

Тег <col> поддерживает следующие атрибуты:

  • span: определяет количество столбцов, к которым должен применяться элемент <col> . Значение по умолчанию — 1.
  • класс: присваивает класс столбцу для стилизации CSS.
  • id: присваивает столбцу уникальный идентификатор для целей CSS или JavaScript.
  • стиль: позволяет использовать встроенные стили CSS для столбца.

Пример для col с атрибутом span

Атрибут span позволяет применять стили или атрибуты к нескольким столбцам: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
              width: 100%;
            }
            .group {
                background-color: #d0e6f7;
            }
        </style>
    </head>
    <body>
        <h2>Example with Span Attribute</h2>
        <table border="1">
            <colgroup>
                <col span="2" class="group">
                <col>
            </colgroup>
            <tr>
                <th>Product</th>
                <th>Category</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Laptop</td>
                <td>Electronics</td>
                <td>$1200</td>
            </tr>
            <tr>
                <td>Chair</td>
                <td>Furniture</td>
                <td>$150</td>
            </tr>
        </table>
    </body>
</html>
Пример для col с атрибутом span

Объяснение: Атрибут span="2" применяет класс .group к первым двум столбцам, задавая им цвет фона и выравнивание по центру.

Стилизация столбцов с помощью CSS с использованием тега col

Вы можете применить стили к тегу <col> с помощью CSS, чтобы сделать определенные столбцы визуально разными: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
              width: 100%;
            }
            .red {
                background-color: #fdd;
            }
            .green {
                background-color: #dfd;
            }
        </style>
    </head>
    <body>
        <h2>Styling Columns with CSS</h2>
        <table border="1">
            <colgroup>
                <col class="red">
                <col class="green">
            </colgroup>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Inactive</td>
            </tr>
        </table>
    </body>
</html>
Пример стилизации столбцов с помощью CSS с использованием тега col

Результат: первый столбец имеет красный фон, а второй столбец — зеленый фон.

Особые примечания о теге <col>

  • Тег <col> используется исключительно внутри элемента <colgroup> .
  • Он не влияет на содержимое таблицы напрямую, но изменяет представление столбцов таблицы.
  • Атрибут span полезен для указания нескольких столбцов с помощью одного тега <col> .