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

Интерактивный пример

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

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

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

td {
  text-align: center;
}

<col> позволяет стилизовать столбцы с помощью CSS, но не все свойства будут влиять на столбец (смотри спецификацию CSS 2.1 для получения списка).

Атрибуты

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

span

Этот атрибут содержит целое положительное число, указывающее количество последовательных столбцов, которые заполняет элемент <col>. Если он отсутствует, то его значение по умолчанию равно "1".

Устаревшие атрибуты

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

• align Устарело

  • : Этот атрибут enumerated указывает, как будет обрабатываться выравнивание содержимого ячейки каждого столбца по горизонтали. Возможными значениями являются:

    • left, выравнивание содержимого по левому краю ячейки
    • center, выравнивание содержимого по центру ячейки
    • right, выравнивание содержимого по правому краю ячейки
    • justify, добавляет пробелы в текстовое содержимое так, чтобы содержимое было выровнено по ширине ячейки

    If this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. If there are none, the left value is assumed.

    Примечание: Чтобы достичь того же эффекта, что и значения left, center, right или justify, не пытайтесь установить свойство text-align для селектора, задающего элемент <col>. Поскольку элементы <td> не являются потомками элемента <col>, они не унаследуют его.

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

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

• bgcolor Устарело

  • : Задний фон таблицы. Это 6-значный шестнадцатеричный RGB-код с префиксом "#`. Также можно использовать одно из предопределенных цветовых ключевых слов.

  Чтобы добиться аналогичного эффекта, используйте свойство CSS background-color.

• char Устарело

  • : Этот атрибут используется для установки символа, по которому будут выравниваться ячейки в столбце. Типичные значения для этого включают точку (.) при попытке выровнять числа или денежные значения. Если для align не задано значение char, этот атрибут игнорируется.

• charoff Устарело

  • : Этот атрибут используется для указания количества символов для смещения данных столбца по сравнению с символами выравнивания, указанными атрибутом char.

• valign Устарело

  • : Этот атрибут определяет выравнивание текста по вертикали в каждой ячейке столбца. Возможными значениями для этого атрибута являются:

    • baseline, располагает текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов вместо их нижней части. Если все символы имеют одинаковый размер, это имеет тот же эффект, что и нижний.
    • bottom, помещает текст как можно ближе к нижней части ячейки, насколько это возможно;
    • middle, помещает текст по центру ячейки
    • и top, помещает текст как можно ближе к верхней части ячейки, насколько это возможно;

    Примечание: Не пытайтесь установить свойство выравнивание по вертикали для селектора, дающего элемент <col>. Поскольку элементы <td> не являются потомками элемента <col>, они не унаследуют его.

    Если таблица не использует атрибут colspan, используйте CSS-селектор td:nth-child(an+b), где 'a' - общее количество столбцов в таблице, а 'b' - порядковый номер положение столбца в таблице. Только после этого выбора можно использовать свойство выравнивание по вертикали.

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

• width Устарело

  • : Этот атрибут определяет ширину по умолчанию для каждого столбца в текущей группе столбцов. В дополнение к стандартным значениям в пикселях и процентах, этот атрибут может принимать специальную форму 0*, что означает, что ширина каждого столбца в группе должна быть минимальной шириной, необходимой для размещения содержимого столбца. Также можно использовать относительную ширину, такую как "5*".

Примеры

Please see the <table> page for examples on <col>.

Техническое резюме

Спецификации

Совместимость с браузерами

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

• Свойства CSS и псевдоклассы, которые могут быть особенно полезны для оформления элемента <col>:
  • свойство width позволяет контролировать ширину колонок;
  • псевдо-селектор :nth-child чтобы задать стили определенным ячейкам;
  • свойство text-align для выравнивания текста внутри ячейки.