Многоуровневая шапка таблицы: как связать группы и столбцы

Многоуровневая шапка нужна, когда столбцы образуют понятные группы: например, продажи по каналам, а внутри каждой группы — число заказов и выручка. Хорошая структура помогает сравнивать связанные показатели, не повторяя длинные подписи. В цифровой таблице она должна работать и визуально, и семантически: пользователь видит группировку, а вспомогательная технология получает те же связи.

Обычная таблица с одной строкой заголовков подходит, если у каждого столбца есть самостоятельное короткое название: «Дата», «Клиент», «Сумма». Дополнительный уровень оправдан, когда соседние колонки действительно принадлежат общей категории, а их сравнение имеет смысл именно внутри этой категории. Если группировка нужна только ради декоративной симметрии или общего фона, она добавит сложность без пользы.

Представьте отчёт по трём каналам обращений: сайт, телефон и чат. Для каждого нужны два показателя — число новых обращений и доля решённых. Шесть самостоятельных заголовков длинны и повторяют названия каналов. Два уровня сокращают повтор: верхняя строка называет канал, нижняя — показатели. Читатель сопоставляет «Решено» в одной колонке с «Решено» в соседней, не теряя принадлежности к каналу.

Уровни должны отвечать на разные вопросы. Верхний говорит «к какой группе относится колонка?», нижний — «какую именно величину она показывает?». Например, «Сайт» и «Чат» — это группы, а «Обращения» и «Решено, %» — конкретные измерения. Если оба яруса называют почти одно и то же, пересмотрите модель данных или оставьте один уровень.

Начните не с объединения ячеек, а с перечня сущностей, измерений и значений. Сущность — то, что сравнивают: канал поддержки, регион или продукт. Измерение — признак, который показывают для каждой сущности: количество, доля, период или сумма. Значение — конкретное число или текст. Такой разбор обнаруживает, какие колонки действительно образуют группу и какие подписи должны повторяться.

Запишите заголовок каждой колонки как путь от общего к частному. Для примера с обращениями это «Сайт → Обращения», «Сайт → Решено, %», «Телефон → Обращения» и так далее. Если путь для одной колонки короче, решите, относится ли она к общей группе или должна стоять отдельно. Не оставляйте пустую верхнюю ячейку, если читатель может принять её за пропущенное название.

Дальше проверьте симметрию структуры. Если одна группа содержит две метрики, а соседняя — три, причина может быть предметной: у канала чата дополнительно показывают время ответа. Это нормально, когда отличие явно подписано. Если же количество колонок случайно различается из-за непоследовательных формулировок, унифицируйте набор показателей до верстки.

Не превращайте подгруппу в длинную цепочку уровней. Два уровня часто достаточно для интерфейсной таблицы; третий добавляйте только тогда, когда он обозначает самостоятельную классификацию, а не служит способом уместить подпись. Чем глубже иерархия, тем больше контекста требуется для одной ячейки и тем сложнее удержать заголовки на узком экране.

Групповой заголовок и подпись колонки должны выглядеть связанными, но различаться по роли. Обычно верхний уровень получает немного больший вес, фон или нижнюю границу, а нижний — ясные короткие названия конкретных показателей. Не обязательно увеличивать кегль: различие можно показать отступом, линией-разделителем или спокойной заливкой. Сохраните достаточный контраст и не полагайтесь только на цвет.

Границы групп полезны, когда помогают увидеть набор колонок целиком. Тонкая вертикальная линия перед новой группой зачастую яснее сетки вокруг каждой ячейки. Сильные контуры и разные цвета для каждой группы конкурируют с числами, поэтому используйте их только если в таблице одновременно сравнивают несколько логических блоков. При печати проверьте, что граница различима и в чёрно-белом варианте.

Ширина группы складывается из ширины подчинённых колонок. Если заголовок «Поддержка по каналам» визуально растягивает группу, хотя под ней только один короткий столбец, баланс нарушается. Сократите подпись, разрешите ей переноситься на две строки или вынесите общий контекст в заголовок таблицы. Фиксированные переносы вручную применяйте осторожно: при изменении ширины окна они могут оставить неудачные разрывы.

Подпись нижнего уровня должна обозначать единицу или вид значения, когда их нельзя надёжно вывести из контекста. «Динамика» может означать количество, долю или изменение за период; «Изменение, п.п.» точнее, если показывается разница между процентными долями. Не перегружайте короткие заголовки пояснениями, но оставляйте рядом достаточно информации, чтобы число нельзя было прочитать в неверной шкале.

Выравнивание помогает сравнивать значения внутри группы. Текстовые категории обычно читаются от общего левого края, а числа — по правому краю или десятичному разделителю, если макет и шрифт это поддерживают. Заголовок числовой колонки может быть выровнен так же, как данные, чтобы глаз находил показатель быстрее. Не центрируйте всю шапку автоматически: одинаковое центрирование названий и чисел усложняет сканирование длинных рядов.

Внешний вид сам по себе не сообщает браузеру, что ячейка «Решено, %» принадлежит группе «Сайт». Для таблицы данных используйте семантические элементы: подпись таблицы через <caption>, заголовочные ячейки <th> и ячейки данных <td>. Группу нескольких колонок можно обозначить через scope="colgroup", а заголовок отдельного столбца — через scope="col", если структура таблицы соответствует такой группировке.

Пример для двух каналов можно записать так: в первой строке два заголовка группы «Сайт» и «Чат» каждый охватывают две колонки; во второй — четыре заголовка «Обращения» и «Решено, %». Визуально это одна цельная шапка, а семантически ячейка с числом имеет понятную связь с каналом и конкретным показателем. В W3C WAI есть отдельное руководство по заголовкам таблиц и пример с несколькими заголовками для колонки.

Для сложной таблицы, где ячейку нельзя однозначно связать только по горизонтали или вертикали, W3C рекомендует явно связать заголовки и ячейки данных через уникальные id у заголовков и перечисление этих идентификаторов в атрибуте headers у ячейки. Это точнее, но дороже в поддержке: при перестановке столбцов или добавлении метрики связи легко рассинхронизировать. Используйте явные связи тогда, когда обычная структура с заголовочными группами действительно не описывает данные.

Не используйте визуально объединённую ячейку как единственный признак группы. Семантическую разметку проверяйте на реальной таблице после изменений: заголовки должны последовательно читаться при перемещении между ячейками с клавиатуры и экранным диктором. Ссылка W3C WAI объясняет различия между регулярными и сложными заголовками; специфика HTML описывает роли scope, headers и групп колонок. Ориентируйтесь на структуру, а не на стили.

Сначала проверьте, может ли таблица сохранять колонки при горизонтальной прокрутке. Если да, шапка должна оставаться связанной с данными: у таблицы нужен видимый контекст, а при фиксации верхних строк не должно закрываться содержимое. На мобильном ширина часто заставляет заголовки переноситься; сравните фактические группы, чтобы название не отрывалось визуально от нижнего уровня.

Если таблицу превращают в карточки, не удаляйте контекст группы. В карточке можно вывести короткую подпись вроде «Сайт · Решено, %» рядом со значением. Повторяйте название группы ровно настолько, чтобы отдельная карточка оставалась понятной вне табличного ряда; для плотного списка это может означать повтор в каждой карточке, а не надежду, что пользователь запомнит заголовок сверху.

Короткий экран — повод проверить, не скрылась ли главная метрика за прокруткой и одинаково ли названы заголовки при сворачивании групп. Не создавайте переключатель, который оставляет рядом с числом непонятное сокращение. Если нужны сокращения, расшифруйте их в подписи таблицы или подсказке, доступной с клавиатуры и сенсорного управления, и не используйте подсказку как единственное место для критически важного контекста.

Для внутренней проверки удобно взять одну строку данных и попросить коллегу назвать полное значение ячейки: например, «доля решённых обращений в чате за выбранную неделю». Если приходится вспоминать заголовок над таблицей, угадывать единицу или читать соседние значения, шапка не передаёт нужный путь. Затем проверьте не только первую строку, но и последнюю группу, длинные подписи и ячейки, где значение отсутствует.

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

Визуально повторять его в каждом нижнем заголовке обычно не нужно, иначе шапка становится длинной. Однако значение каждой ячейки должно сохранять связь с группой для человека, который читает таблицу по ячейкам. В HTML задайте эту связь подходящими заголовками и, для действительно сложного случая, явными идентификаторами.

Используйте его для заголовка, который относится к группе столбцов, когда колонки действительно объединены в соответствующую группу. Отдельные подписи нижнего уровня обычно обозначают свои колонки через scope="col". Если структура нестандартна, проверьте рекомендацию W3C WAI и выбирайте явную связь заголовков только при необходимости.

Отмечайте заголовки как заголовочные ячейки, сохраняйте логическую структуру строк и колонок и связывайте каждое значение с нужными заголовками. Для сложных таблиц используйте уникальные id и атрибут headers по рекомендации W3C. Проверьте таблицу с клавиатурой и экранным диктором, а не только визуально.

Для данных, где группа меняет значение показателя, нет: человек должен понимать, к какой категории относится ячейка и при последовательном чтении. Если группировка лишь декоративная и не добавляет информации, удалите её. Если смысловая, отразите её в HTML, чтобы структура не зависела от линии или цвета.

Сначала проверьте, можно ли сократить термин без потери смысла или перенести общий контекст в подпись таблицы. Затем задайте разумную ширину и проверьте перенос на целевых размерах экрана. Не оставляйте длинный заголовок обрезанным без доступного полного значения.

Она нужна только если на телефоне сохраняется логическая группировка. При карточном представлении выводите группу и конкретный показатель рядом со значением. При горизонтальной прокрутке оставляйте заголовки связанными с колонками, чтобы пользователь не потерял контекст.

Надёжная многоуровневая шапка начинается с ясной структуры данных: верхний уровень называет группу, нижний — конкретный показатель. Визуально покажите границы спокойно, а в HTML свяжите заголовки с ячейками через подходящую семантику. Затем проверьте таблицу на узком экране и при чтении по ячейкам. Если создаёте собственный шрифт для интерфейса, проверьте его на реальных названиях групп, коротких метриках и числовых столбцах с помощью Fontgenerator.