<col>: Элемент столбца таблицы

Элемент <col> HTML определяет один или несколько столбцов в группе столбцов, представленной его родительским элементом <colgroup>. Элемент <col> допустим только в качестве дочернего элемента элемента <colgroup>, у которого нет определенного атрибута span.

Этот элемент включает глобальные атрибуты.

span

Указывает количество последовательных столбцов, охватываемых элементом <col>. Значение должно быть положительным целым числом, большим нуля. Если не указано, значение по умолчанию — 1.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и для исторической информации.

align Устаревший

Указывает горизонтальное выравнивание каждой ячейки столбца. Возможные значения перечислимые — left, center, right, justify, и char. При поддержке значение char выравнивает текстовое содержимое по символу, определенному в атрибуте char, и по смещению, определенному атрибутом charoff. Обратите внимание, что этот атрибут переопределяет заданное align родительского элемента <colgroup>. Используйте вместо этого свойство CSS text-align для элементов <td> и <th>, так как данный атрибут устарел.

Примечание: Установка text-align для элемента <col> не имеет эффекта, так как <col> не имеет потомков, а значит, нет элементов, наследующих от него.

Если таблица не использует атрибут colspan, используйте CSS-селектор td:nth-of-type(an+b). Установите a в ноль и b в позицию столбца в таблице, например, td:nth-of-type(2) { text-align: right; } для выравнивания ячеек второго столбца по правому краю.

Если таблица использует атрибут colspan, эффект можно достичь, объединив соответствующие CSS-селекторы атрибутов, как [colspan=n], хотя это не тривиально.

bgcolor Устаревший

Определяет цвет фона каждой ячейки столбца. Значение — HTML-цвет; либо 6-значный шестнадцатеричный код RGB, префикс которого '#', либо ключевое слово цвета. Другие значения CSS <color> не поддерживаются. Используйте вместо этого свойство CSS background-color, так как этот атрибут устарел.

char Устаревший

Не выполняет никаких действий. Первоначально предназначался для указания выравнивания содержимого к символу в каждой ячейке столбца. Типичные значения включают точку (.) при попытке выравнивания чисел или денежных значений. Если align не установлено в char, этот атрибут игнорируется, хотя он по-прежнему переопределяет заданное char родительского элемента <colgroup>.

charoff Устаревший

Не выполняет никаких действий. Первоначально предназначался для указания числа символов для смещения содержимого ячейки столбца от символа выравнивания, указанного атрибутом char.

valign Устаревший

Указывает вертикальное выравнивание каждой ячейки столбца. Возможные перечислимые значения — baseline, bottom, middle, и top. Обратите внимание, что этот атрибут переопределяет заданное valign родительского элемента <colgroup>. Используйте вместо этого свойство CSS vertical-align для элементов <td> и <th>, так как этот атрибут устарел.

Примечание: Установка vertical-align для элемента <col> не имеет эффекта, так как <col> не имеет потомков, а значит, нет элементов, наследующих от него.

Если таблица не использует атрибут colspan, используйте CSS-селектор td:nth-of-type(an+b). Установите a в ноль и b в позицию столбца в таблице, например, td:nth-of-type(2) { vertical-align: middle; } для вертикального выравнивания ячеек второго столбца по центру.

Если таблица использует атрибут colspan, эффект можно достичь, объединив соответствующие CSS-селекторы атрибутов, как [colspan=n], хотя это не тривиально.

width Устаревший

Указывает ширину по умолчанию для каждого столбца. Помимо стандартных значений в пикселях и процентах, этот атрибут может принимать специальную форму 0*, что означает, что ширина каждого охватываемого столбца должна быть минимальной необходимой для отображения содержимого столбца. Также можно использовать относительные ширины, такие как 5*. Обратите внимание, что этот атрибут переопределяет заданное width родительского элемента <colgroup>. Используйте вместо этого свойство CSS width, так как этот атрибут устарел.

• Элемент <col> используется внутри элемента <colgroup>, у которого нет атрибута span.
• Элементы <col> не объединяют столбцы структурно. Это роль элемента <colgroup>.
• Только ограниченное количество свойств CSS влияют на <col>:
  • background : Различные свойства background установят фон для ячеек внутри столбца. Так как цвет фона столбца наносится поверх таблицы и групп столбцов (<colgroup>), но под цветами фона, применяемыми к группам строк (<thead>, <tbody> и <tfoot>), строкам (<tr>) и отдельным ячейкам (<th> и <td>), цвета фона, применённые к столбцам таблицы, видны только если каждый слой, нанесённый сверху, имеет прозрачный фон.
  • border: Применяются различные свойства border , но только если у <table> установлено свойство border-collapse: collapse.
  • visibility: Значение collapse для столбца приводит к тому, что все ячейки этого столбца не отображаются, а ячейки, охватывающие другие столбцы, обрезаются. Пространство, которое занимали эти столбцы, удаляется. Однако размер других столбцов все равно рассчитывается так, как будто ячейки в скрытых столбцах присутствуют. Другие значения для visibility не имеют эффекта.
  • width: Свойство width определяет минимальную ширину столбца, как будто установлено свойство min-width.

См. <table> для примера полной таблицы, демонстрирующего общие стандарты и лучшие практики.

В этом примере показана таблица из восьми столбцов, разделенных на три элемента <col>.

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

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <tr>
    <th>Period</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <th>a.m.</th>
    <td>Clean room</td>
    <td>Football training</td>
    <td>Dance Course</td>
    <td>History Class</td>
    <td>Buy drinks</td>
    <td>Study hour</td>
    <td>Free time</td>
  </tr>
  <tr>
    <th>p.m.</th>
    <td>Yoga</td>
    <td>Chess Club</td>
    <td>Meet friends</td>
    <td>Gymnastics</td>
    <td>Birthday party</td>
    <td>Fishing trip</td>
    <td>Free time</td>
  </tr>
</table>

Мы используем CSS вместо устаревших атрибутов HTML для задания цвета фона столбцов и выравнивания содержимого ячеек:

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}

Результат

• Урок: HTML таблицы
• <caption>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Другие элементы, связанные с таблицами
• background-color: Свойство CSS для задания цвета фона каждой ячейки столбца
• border: Свойство CSS для управления рамками ячеек столбцов
• text-align: Свойство CSS для горизонтального выравнивания содержимого каждой ячейки столбца
• vertical-align: Свойство CSS для вертикального выравнивания содержимого каждой ячейки столбца
• visibility: Свойство CSS для скрытия ячеек столбца
• width: Свойство CSS для управления шириной каждого столбца по умолчанию
• :nth-of-type, :first-of-type, :last-of-type: Псевдоклассы CSS для выбора нужных ячеек столбцов