• Теория
  • Теория

Группировка колонок таблицы

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

В примере ниже ячейкам 1.1 и 1.2 (первый столбец) задаётся ширина 20%, а ячейкам 2.1, 2.2, 3.1 и 3.2 (второй и третий столбец) ширина — 80%:

<table>
  <col width="20%">
  <colgroup width="80%">
    <col>
    <col>
  </colgroup>
  <tr>
    <td>1.1</td> <td>2.1</td> <td>3.1</td>
  </tr>
  <tr>
    <td>1.2</td> <td>2.2</td> <td>3.2</td>
  </tr>
</table>

В CSS-таблицах столбцы группируются аналогично. Группа столбцов создаётся свойством display: table-column-group (аналог тега <colgroup>). Стилизуя группу, мы задаём правила для каждого дочернего столбца.

Давайте попробуем создать и стилизовать группу столбцов в CSS и наклеим обои позади всех остальных столбцов.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Таблицы на CSS» тренажёра «Табличные раскладки» можно после регистрации и оформления подписки.