Из всех элементов, которые применяются при создании таблиц, включая используемые для улучшения доступности, вероятно, наиболее обделенным вниманием является элемент col. Этот элемент контролирует отображение другого содержимого, при этом сам не появляется на странице, как минимум без применения кода CSS, и позволяет нам избежать необходимости неоднократного применения классов к отдельным ячейкам таблицы.

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

Код HTML для примера таблицы ниже:

<table id=sprinters>
        <caption>World’s Fastest 100m Sprinters, 2012</caption>
        <col><col><col>
        <thead>
                <tr>
                        <th>Name
                        <th>Country
                        <th>Best Time
        </thead>
        <tfoot>
                <tr>
                        <td colspan="2">Average Time
                        <td>9.66 seconds
        </tfoot>
        <tbody>
                <tr>
                        <td>Usain Bolt
                        <td>Jamaica
                        <td>9.58 seconds
                <tr>
                        <td>Tyson Gay
                        <td>United States
                        <td>9.69 seconds
                <tr>
                        <td>Asafa Powell
                        <td>Jamaica
                        <td>9.72 seconds
        </tbody>
</table>

Для этой разметки применяется следующий код CSS:

#sprinters {
        border-collapse: collapse;
}
#sprinters caption {
        font-size: larger;
}
#sprinters td, #sprinters th {
        padding: .5rem;
}
#sprinters tfoot tr td {
        border-top: 1px solid #000;
}
#sprinters col:last-child {
        background: #ddd;
}
#sprinters thead {
        background: #000;
        color: #fff;
}

В результате получаем такую таблицу:

Количество элементов col должно совпадать с количеством ячеек таблицы в каждой строке. Можно растянуть элемент col, чтобы он управлял большим количеством столбцов, используя атрибут <span> в подобной записи:

<col span="2"><col>

С такой записью количество элементов col будет равняться трем, и любые стили, примененные к первому элементу col, будут влиять на внешний вид первых двух столбцов.

Столбцы таблицы могут быть сгруппированы вместе с помощью элемента colgroup, например, таким образом:

<colgroup>
        <col><col>
</colgroup>
<col>

И к элементу col, и к элементу colgroup можно применить стили для улучшения внешнего вида таблиц.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора псевдоэлемента
• Использование селектора элемента в CSS
• Использование цветовой модели RGB в CSS