Широкие таблицы в учебной статье

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

В reading-lab уже есть сравнение отдельных HTML-страниц и готового HTML из Markdown. В этом уроке вы зададите плотность ячеек, различие заголовков и поведение широкого содержимого. Продолжайте состояние седьмого урока; добавление не меняет текст таблицы и не превращает её в независимый набор карточек.

Таблица и обычный текст читаются по-разному

Абзац имеет последовательный порядок: предложение следует за предложением. Таблицу часто читают по выбранной строке или колонке. Человек ищет значение «Адрес» для определённого подхода, затем сравнивает его с соседним. Поэтому визуальная сетка должна помогать удерживать эту ось сравнения.

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

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

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

Размер таблицы и локальная область

Создайте полный файл дополнения lesson-08.css:

.reading-lab .lab-table-wrap { max-width: 100%; min-width: 0; padding-block-end: .25rem; }
.reading-lab .lab-table { min-width: 40rem; table-layout: auto; font-size: .9375rem; line-height: 1.55; }
.reading-lab .lab-table caption { font-size: .875rem; padding-block: .25rem .75rem; }
.reading-lab .lab-table thead { background: var(--lab-surface); }
.reading-lab .lab-table th, .reading-lab .lab-table td { padding: .875rem 1rem; }
.reading-lab .lab-table tbody th { font-weight: 700; width: 24%; }
.reading-lab .lab-table tbody tr:last-child > * { border-bottom: 0; }

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

Значение 40rem выбрано для текущих четырёх текстовых колонок. Оно не подходит автоматически для всех сравнений библиотеки. Таблица с двумя короткими значениями может обходиться без такого минимума. Таблица с десятью параметрами потребует другой организации, а иногда и редакционного разделения на два последовательных сравнения. Минимум должен отражать данные.

table-layout: auto оставляет расчёт колонок связанным с содержимым. У фиксированного режима другое устройство: при известной ширине на распределение существенно влияют указанные ширины колонок и первая строка. Различие описано в MDN. Мы не переключаемся на fixed только ради одинаковых прямоугольников, поскольку содержимое наших ячеек разной длины.

Плотность без уменьшения до предела

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

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

Внутри ячейки допустимо несколько предложений, но большой мини-урок лучше вынести рядом. Таблица должна сопоставлять параметры, а не скрывать в каждом пересечении длинное независимое объяснение. Например, значение «Сохраняется по договору» можно пояснить в соседнем абзаце про URL. Так сохраняется краткость сравнения без потери условий.

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

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

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

Почему карточки могут потерять смысл

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

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

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

Если появятся числовые параметры, сначала укажите единицы в названиях или значениях. «Размер» без уточнения не позволяет сравнивать байты и килобайты. Это пример того, как оформление зависит от точности данных. Цветовая полоска или более жирное число не исправляют неодинаковое основание сравнения.

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