Разметка таблицы с многоуровневыми заголовками (hierarchical headers) — это способ структурировать данные так, чтобы пользователь сразу понимал иерархию категорий. В веб-разработке это реализуется через атрибуты `colspan` и `rowspan` в теге `<th>`. Главная задача — обеспечить соответствие количества колонок в верхнем уровне сумме колонок всех нижних уровней.

Логика построения иерархии

Многоуровневая таблица строится на принципе вложенности. Верхний уровень (например, «Категория товара») охватывает несколько нижних уровней (например, «Тип», «Цвет», «Размер»).

Ключевое правило: сумма `colspan` всех ячеек одного уровня должна равняться общему количеству колонок таблицы.

Если у вас 12 колонок в таблице и первый заголовок — это общая категория, ему нужно задать `colspan=

Пошаговая инструкция по разметке

Шаг 1. Определите общую ширину таблицы. Подсчитайте количество всех независимых колонок (например, 12 штук). Это ваша базовая единица измерения.

Шаг 2. Создайте верхний уровень заголовков. Используйте тег `<thead>`. Внутри него разместите строку с основными категориями.

Шаг 3. Настройте атрибуты `colspan` и `rowspan`. Для ячейки, которая объединяет несколько колонок ниже, укажите в `colspan` количество этих колонок. Если заголовок должен тянуться вниз на несколько строк данных, используйте `rowspan`.

Шаг 4. Заполните тело таблицы (`<tbody>`). Каждая строка должна начинаться с ячеек, которые либо являются частью объединенного заголовка (они не повторяются в каждой строке), либо представляют собой конкретные данные из нижнего уровня иерархии.

Шаг 5. Проверьте баланс колонок. Визуально или программно убедитесь, что сумма ширины всех ячеек в любой строке равна общей ширине таблицы.

Практический пример кода

Ниже приведен условный пример HTML-кода. Таблица содержит 12 колонок. Первый заголовок «Электроника» занимает 4 колонки, второй «Одежда» — 8 колонок.

<table>

<thead>

<tr>

<th colspan="4">Электроника</th>

<th colspan="8">Одежда</th>

</tr>

<tr>

<!— Детализация для Электроники —>

<th>Товар</th><th>Цена</th><th>Склад</th><th>Статус</th>

<!— Детализация для Одежды —>

<th colspan="4">Мужская одежда</th>

<th colspan="4">Женская одежда</th>

</tr>

</thead>

<tbody>

<!— Строка данных для Электроники —>

<tr>

<td>Ноутбук</td><td>50000</td><td>12 шт</td><td>В наличии</td>

<!— Пустые ячейки или данные для Одежды, так как заголовки объединены —>

<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>

</tr>

<!— Строка данных для Мужской одежды —>

<tr style="border-top: 2px solid #ccc;"> <!— Визуальное разделение групп —></tr>

Как оценить результат и проверить корректность

Визуальная проверка. Откройте таблицу в браузере. Линии сетки должны проходить ровно под объединенными заголовками, не прерываясь на границах групп.

Проверка кода. Посчитайте атрибуты `colspan` в строке `<thead>`. Если их сумма не совпадает с общим числом колонок (или если есть незакрытые ячейки), таблица будет «сломана».

Адаптивность. Убедитесь, что при сжатии экрана объединенные заголовки не перетекают на другие строки или не создают горизонтальной прокрутки без необходимости.

Типичные ошибки и ограничения

Ошибка «Смещенная сетка». Часто возникает, когда в одной строке `<tbody>` количество ячеек меньше, чем должно быть из-за `colspan` заголовков. Решение: либо дублировать ячейки данных (если они относятся к разным группам), либо использовать CSS Grid/Flexbox для более гибкой верстки.

Ограничение CSS. Атрибуты `colspan` и `rowspan` работают только внутри табличной структуры `<table>`. Если вы пытаетесь реализовать сложную иерархию через чистый CSS без таблиц, используйте Grid-контейнеры с `grid-column: span N`.

Сложность редактирования. Таблицы с многоуровневыми заголовками трудно редактировать вручную в CMS (например, WordPress), если там нет специальных плагинов для управления структурой. Лучше генерировать такие таблицы через код или конструкторы.

Вопросы и ответы

Можно ли использовать rowspan вместе с colspan в одной ячейке?

Да, атрибуты `rowspan` и `colspan` могут использоваться одновременно. Это нужно, когда ячейка объединяет несколько строк и нескольких колонок сразу (например, заголовок «Всего» для блока данных).

Как сделать, чтобы объединенный заголовок не растягивался на всю ширину?

Это невозможно в стандартной таблице HTML. Если ячейка имеет `colspan=

<table>
  <thead>
    <tr>
      <th colspan="4">Электроника</th>
      <th colspan="8">Одежда</th>
    </tr>
    <tr>
      <th>Товар</th><th>Цена</th><th>Склад</th><th>Статус</th>
      <th colspan="4">Мужская одежда</th>
      <th colspan="4">Женская одежда</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ноутбук</td><td>50000</td><td>12 шт</td><td>В наличии</td>
      <!-- Пустые ячейки для баланса -->
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

Похожие статьи