Практика: таблица с заголовками строк и колонок

Назначение

В сравнительной таблице число или короткий ответ часто понятны только на пересечении строки и колонки. Упражнение помогает сохранить оба направления контекста через заголовочные ячейки.

Как это работает

В верхней строке задайте scope="col", в первой ячейке каждой строки данных — scope="row". Caption объясняет предмет сравнения. Здесь сравниваются условные учебные задания, а не характеристики коммерческих продуктов.

Пример

<style>.two-headings{border-collapse:collapse}.two-headings th,.two-headings td{border:1px solid #afc5b6;padding:.7rem;text-align:left}.two-headings th{background:#e6f1ea}</style>
<table class="two-headings"><caption>Состав учебных заданий</caption><thead><tr><th scope="col">Задание</th><th scope="col">HTML</th><th scope="col">CSS</th></tr></thead><tbody><tr><th scope="row">Карточка</th><td>Структура</td><td>Оформление</td></tr><tr><th scope="row">Список</th><td>Группировка</td><td>Отступы</td></tr></tbody></table>

Что должно получиться

Слово «Отступы» относится одновременно к заданию «Список» и колонке CSS. Подписи остаются текстовыми, а фон только помогает зрительно отделить заголовки.

Граница применения и частая ошибка

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

Самостоятельная проверка

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

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

Связанные материалы

• Таблицы
• Группировка полей
• Клавиатурная проверка