Группирование строк и столбцов таблицы colgroup и col

Антон Шепель Фев 20, 2023 • 1 min read

Элементы colgroup и col используются для группировки столбцов таблицы в HTML. Они позволяют задавать общие стили для группы столбцов, а также указывать ширину каждого столбца.

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

Пример использования элементов colgroup и col:

<table>  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: green;">
    <col style="background-color: orange;">
  </colgroup>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
</table>

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

Можно также использовать атрибуты элементов col и colgroup для определения ширины столбцов:

<table>
  <colgroup>
    <col width="20%">
    <col width="60%">
    <col width="20%">
  </colgroup>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
  </tr>
  <tr>
    <td>Ячейка 4</td>
    <td>Ячейка 5</td>
    <td>Ячейка 6</td>
  </tr>
</table>

Этот код создает таблицу с тремя столбцами, каждый из которых занимает соответствующий процент ширины таблицы.

Важно отметить, что элементы col и colgroup не могут использоваться для группировки строк таблицы. Для этого следует использовать элементы tbody, thead и tfoot.