Группировка столбцов (colgroup, col)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 26
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий вы попрактикуетесь в группировке и стилизации столбцов таблицы с помощью тегов `<colgroup>` и `<col>`. Эти элементы позволяют применять стили к целым столбцам, а не к каждой ячейке по отдельности, что делает код чище и удобнее в поддержке. Задания построены по принципу "от простого к сложному": вы начнете с создания базовой группы столбцов, затем научитесь применять к ним стили и использовать атрибут `span` для одновременной работы с несколькими столбцами.
Список тем

Создание группы столбцов

id: 37838_colgroup-col-1

Для начала создадим базовую структуру для группировки столбцов. Внутри таблицы, сразу после тега `<caption>`, необходимо добавить элемент, который будет служить контейнером для определения свойств столбцов. Ваша задача — добавить этот контейнер.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.product-col {
  background-color: #f0f8ff;
}
HTML
<table>
  <caption>Каталог товаров</caption>
  <input1>
    <col class="product-col">
  </input1>
  <thead>
    <tr>
      <th>Товар</th>
      <th>Количество</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ноутбук</td>
      <td>15</td>
      <td>85000 ₽</td>
    </tr>
  </tbody>
</table>
Используйте парный тег `<colgroup>` для создания группы столбцов. Он должен располагаться после `<caption>` и перед `<thead>`, `<tbody>` или `<tr>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление определения для столбца

id: 37838_colgroup-col-2

Теперь, когда у нас есть контейнер `<colgroup>`, нужно указать, к какому именно столбцу применять стили. Добавьте внутри `<colgroup>` одиночный тег, который определяет свойства для одного столбца.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.price-col {
  background-color: #e6ffed;
  font-weight: bold;
}
HTML
<table>
  <caption>Прайс-лист</caption>
  <colgroup>
    <input1>
    <input2 class="price-col">
  </colgroup>
  <thead>
    <tr>
      <th>Услуга</th>
      <th>Время</th>
      <th>Стоимость</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Стрижка</td>
      <td>1 час</td>
      <td>1500 ₽</td>
    </tr>
  </tbody>
</table>
Для определения свойств одного столбца используется одиночный тег `<col>`. Поместите его внутрь тега `<colgroup>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут span для нескольких столбцов

id: 37838_colgroup-col-3

Чтобы не создавать тег `<col>` для каждого столбца, можно использовать атрибут, который указывает, на сколько столбцов распространяется его действие. Сделайте так, чтобы первые два столбца ('ФИО' и 'Должность') имели светло-серый фон, используя один тег `<col>`.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.info-cols {
  background-color: #f2f2f2;
}
HTML
<table>
  <caption>Список сотрудников</caption>
  <colgroup>
    <col input1="input2" class="info-cols">
  </colgroup>
  <thead>
    <tr>
      <th>ФИО</th>
      <th>Должность</th>
      <th>Отдел</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иванов И.И.</td>
      <td>Менеджер</td>
      <td>Продажи</td>
    </tr>
  </tbody>
</table>
Используйте атрибут `span` со значением `2` в теге `<col>`, чтобы применить стиль сразу к двум столбцам.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация разных групп столбцов

id: 37838_colgroup-col-4

Вы можете использовать несколько тегов `<col>` для стилизации разных столбцов. В этой таблице подсветите первый столбец ('Город') одним цветом, а третий и четвертый ('Температура' и 'Осадки') — другим.

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}
.city-col {
  background-color: #fffbe6;
}
.weather-cols {
  background-color: #e6f7ff;
}
HTML
<table>
  <caption>Прогноз погоды</caption>
  <colgroup>
    <input1 class="city-col">
    <col>
    <col input2="2" class="weather-cols">
  </colgroup>
  <thead>
    <tr>
      <th>Город</th>
      <th>Дата</th>
      <th>Температура</th>
      <th>Осадки</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Москва</td>
      <td>24.07</td>
      <td>+25°C</td>
      <td>Нет</td>
    </tr>
  </tbody>
</table>
Вам понадобится два тега `<col>`. Первый будет с классом `city-col`. Второй — с классом `weather-cols` и атрибутом `span` со значением `2`, так как он должен охватывать два столбца.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка с помощью <colgroup> и span

id: 37838_colgroup-col-5

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

CSS
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
.data-group {
  border: 2px solid #4CAF50;
}
HTML
<table>
  <caption>Финансовый отчет</caption>
  <input1> <input2="3" class="data-group">
  </input1>
  <thead>
    <tr>
      <th>Доход</th>
      <th>Расход</th>
      <th>Прибыль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>250 000 ₽</td>
      <td>180 000 ₽</td>
      <td>70 000 ₽</td>
    </tr>
  </tbody>
</table>
Добавьте атрибут `span` со значением `3` непосредственно к тегу `<colgroup>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Установка ширины столбцов

id: 37838_colgroup-col-6

Одна из частых задач — установка разной ширины для столбцов. Задайте первому столбцу ('Артикул') фиксированную ширину, а второму ('Название') — оставшееся пространство. Для этого нужно добавить классы к соответствующим тегам `<col>`.

CSS
table {
  width: 100%;
  table-layout: fixed; /* Важно для управления шириной */
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sku {
  width: 80px;
}
.name {
  width: auto;
}
HTML
<table>
  <caption>Складские остатки</caption>
  <colgroup>
    <col input1="sku">
    <col input2="name">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Артикул</th>
      <th>Название</th>
      <th>Кол-во</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>N-001-A</td>
      <td>Очень длинное название товара, которое не помещается</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
Добавьте теги `<col>` внутри `<colgroup>`. Первому `<col>` присвойте класс `sku`, а второму — класс `name`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинированное использование

id: 37838_colgroup-col-7

Давайте объединим полученные знания. В таблице расписания нужно выделить цветом столбцы с выходными днями ('Сб', 'Вс') и задать им немного меньшую ширину. Остальные столбцы должны остаться без изменений.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
.weekend {
  background-color: #ffebee;
  width: 40px;
}
HTML
<table>
  <caption>Расписание на неделю</caption>
  <colgroup>
    <col <input1>="5">
    <col <input2>="2" <input3>="weekend">
  </colgroup>
  <thead>
    <tr>
      <th>Пн</th>
      <th>Вт</th>
      <th>Ср</th>
      <th>Чт</th>
      <th>Пт</th>
      <th>Сб</th>
      <th>Вс</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Работа</td>
      <td>Работа</td>
      <td>Работа</td>
      <td>Работа</td>
      <td>Работа</td>
      <td>Отдых</td>
      <td>Отдых</td>
    </tr>
  </tbody>
</table>
Вам понадобится `<colgroup>` с несколькими тегами `<col>` внутри. Первые пять столбцов можно определить одним тегом `<col span="5">`. Для стилизации выходных используйте второй тег `<col span="2" class="weekend">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру