W3docs
ru
Войти

HTML тег <colgroup>

Тег HTML <colgroup> группирует один или несколько столбцов таблицы для совместного оформления с помощью вложенных элементов <col>.

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

Тег <colgroup> вкладывается внутрь тега <table>, перед <thead>, <tbody>, <tfoot> и <tr>, а также после <caption>, если он используется (в теге <caption> размещается заголовок таблицы).

Одна таблица HTML может содержать несколько тегов <colgroup>.

Зачем использовать <colgroup>?

Ячейки HTML-таблицы записываются построчно, поэтому нет естественного места для применения стилей ко всему столбцу. Элементы <colgroup> и <col> решают эту задачу: они описывают столбцы таблицы один раз в начале и позволяют применить общие свойства (ширину, фон, границы) ко всем ячейкам этих столбцов одновременно.

Два практических преимущества:

  • Стилизация нескольких столбцов сразу. Установив ширину или фон для группы столбцов, не нужно повторять их для каждого <td> в каждой строке.
  • Разделение структуры и представления. Определения столбцов сосредоточены в одном небольшом блоке в начале таблицы, а не разбросаны по ячейкам, что упрощает чтение и поддержку разметки.

Синтаксис

Тег <colgroup> используется парами. Содержимое записывается между открывающим (<colgroup>) и закрывающим (</colgroup>) тегами.

Пример HTML тега <colgroup>:

Тег HTML <colgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

Result

Понимание атрибута span

Атрибут span определяет, сколько последовательных столбцов охватывает элемент, однако его значение немного различается в зависимости от того, где он указан:

  • span у <colgroup> означает, что группа сама охватывает указанное число столбцов. Используйте его, когда нужно обрабатывать несколько последовательных столбцов как один стилизованный блок без отдельных дочерних элементов <col>. Например, <colgroup span="3"> группирует первые три столбца.
  • span у дочернего <col> указывает, на сколько столбцов распространяется этот конкретный <col>. Это позволяет одному <colgroup> описывать несколько столбцов с разными правилами, как в примере выше, где <col span="2"> охватывает первые два столбца, а следующий <col> — третий.

Если <colgroup> содержит дочерние элементы <col>, именно они описывают столбцы, и атрибут span на самом <colgroup> указывать не следует.

Использование нескольких элементов <colgroup>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>
Result

Первый <colgroup> стилизует крайний левый столбец; второй, с атрибутом span="2", оформляет два столбца продаж как единую группу.

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

Самый правильный современный подход — сохранять разметку минималистичной и переносить оформление в таблицу стилей, применяя CSS к элементам <col> и <colgroup> вместо устаревших атрибутов align, valign и width. Через эти элементы работает ограниченный, но полезный набор CSS-свойств: background-color, background, border, width и visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Практический нюанс: background-color столбца отображается только там, где сами ячейки прозрачны. Если у <td> или <tr> задан собственный фон, цвет уровня ячейки перекрывает цвет столбца.

Доступность

Элементы <colgroup> и <col> носят исключительно презентационный характер — они влияют на внешний вид, но не несут семантической нагрузки для вспомогательных технологий. Программы чтения с экрана не объявляют группы столбцов, и использование этих элементов не связывает заголовки с ячейками данных. Чтобы таблица была доступной, используйте настоящие ячейки-заголовки (<th>) с соответствующими атрибутами scope; не полагайтесь на <colgroup> для передачи структуры.

Атрибуты

Примечание: презентационные атрибуты align, valign и width устарели в HTML5. Для оформления столбцов используйте CSS (text-align, vertical-align, width), применяя стили к элементам <col> и <colgroup>.

АтрибутЗначениеОписание
alignleft | right | center | justify | charЗадаёт выравнивание содержимого столбца. Не поддерживается в HTML5.
charсимволВыравнивает содержимое столбца по указанному символу. Используется только при align="char". Не поддерживается в HTML5.
charoffчислоСмещает содержимое ячейки относительно указанного символа. Используется только при align="char". Не поддерживается в HTML5.
spanчислоЗадаёт количество столбцов, к которым применяется элемент <col>. По умолчанию равно 1.
valigntop | middle | bottom | baselineВыравнивает содержимое по вертикали. Не поддерживается в HTML5.
width% | pixels | relative_lengthЗадаёт ширину столбца. Не поддерживается в HTML5.

Тег <colgroup> также поддерживает глобальные атрибуты и атрибуты событий.

Практика

Практика
Что правильно описывает HTML тег colgroup и его использование?
Что правильно описывает HTML тег colgroup и его использование?
Was this page helpful?