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

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

Попробуйте

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <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>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</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;
}

Атрибуты

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

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: либо шестизначным шестнадцатеричным кодом RGB с префиксом #, либо ключевым словом цвета. Другие значения <color> CSS не поддерживаются. Вместо этого используйте 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>.
• На <col> влияют только некоторые свойства CSS:
  • background: различные свойства background задают фон ячеек внутри столбца. Фон столбца отображается поверх таблицы и групп столбцов (<colgroup>), но позади цветов фона, заданных для групп строк (<thead>, <tbody> и <tfoot>), строк (<tr>) и отдельных ячеек (<th> и <td>). Поэтому фоны столбцов таблицы видны только в том случае, если фон каждого расположенного поверх них слоя прозрачен.
  • border: применяются различные свойства border, но только если для <table> задано значение border-collapse: collapse.
  • visibility: значение collapse для столбца приводит к тому, что все ячейки этого столбца не отображаются, а ячейки, охватывающие другие столбцы, обрезаются. Пространство, которое занимали бы эти столбцы, удаляется. Однако размеры остальных столбцов по-прежнему рассчитываются так, как если бы ячейки в свёрнутых столбцах присутствовали. Другие значения visibility не оказывают эффекта.
  • width: свойство width задаёт минимальную ширину столбца, как если бы было задано min-width.

Пример

Полный пример таблицы с описанием общепринятых стандартов и рекомендаций см. в разделе <table>.

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

HTML

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

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <thead>
    <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>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

CSS

Для задания цвета фона столбцов и выравнивания содержимого ячеек мы используем 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;
}

Результат

Техническая сводка

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

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

См. также

• <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 для выбора нужных ячеек столбцов