Как оформить таблицу на сайте, чтобы её читали на телефоне

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

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

Человек должен понять, к какой строке и какому столбцу относится значение, сравнить нужное и не потерять условия. Если таблица целиком помещается на экран, но текст нельзя прочитать, задача не решена.

Начните с назначения данных. В одном случае посетитель сравнивает варианты по одинаковым признакам, в другом — читает подробности отдельных записей. Для сравнения важно видеть связи между столбцами; для последовательного чтения может подойти другое представление.

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

Из чего это складывается

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

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

Как это сделать по шагам

1. Определите действие читателя. Запишите, что он должен найти или сравнить. Отделите главные сведения от дополнительных пояснений, не удаляя важные условия ради ширины.
2. Проверьте структуру данных. Назовите заголовки строк и столбцов, уточните единицы и смысл пустых значений. Разделите несвязанные сведения, если они случайно собраны в одну большую сетку.
3. Выберите способ представления. Сравните собственную прокрутку, разделение и карточки на одной задаче. Не превращайте таблицу в карточки автоматически только из-за малого экрана.
4. Подготовьте реальное наполнение. Добавьте длинные названия, разные значения и разрешённые пустые случаи. Проверьте, как ведут себя строки при переносе текста.
5. Сохраните связи и подписи. Для HTML-таблицы используйте корректные заголовки. При переходе к карточкам явно показывайте, что означает каждое значение.
6. Проверьте чтение и управление. Пройдите задачу на телефоне, при увеличении текста и с клавиатуры. Убедитесь, что все данные и действия достижимы, а страница не уезжает вбок целиком.
7. Примите решение по результату. Сравните ошибки и затруднения, исправьте найденное и повторите исходную задачу. Зафиксируйте выбранное поведение для будущих таблиц сайта.

Когда оставить горизонтальную прокрутку

Если человек сравнивает значения по столбцам, сохранение таблицы часто оказывается разумной отправной точкой. Дайте блоку собственную область прокрутки, чтобы остальные текстовые части страницы оставались в пределах экрана.

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

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

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

Когда лучше разделить или сократить таблицу

Если одна сетка объединяет независимые темы, её можно разделить на несколько понятных частей. Например, описание условий и технические характеристики могут решать разные задачи. Каждая новая часть должна сохранять название объекта и необходимые пояснения.

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

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

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

Когда подойдут карточки

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

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

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

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

Как сохранить связь с заголовками

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

Для простой таблицы можно явно обозначить направление заголовка атрибутом scope. Значение col относится к столбцу, row — к строке. Например, заголовок столбца в исходном HTML выглядит так: <th scope='col'>Материал</th>. Это пример разметки, а не отдельный видимый блок интерфейса.

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

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

Как проверить читаемость

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

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

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

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

Частые ошибки

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

Как проверить

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

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

Читаемость поможет оценить типографика сайта. Дополнительно пройдите проверку сайта на телефоне и проверку с клавиатуры.

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

Горизонтальная прокрутка таблицы всегда считается ошибкой?

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

Почему нельзя просто уменьшить шрифт?

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

Когда карточки лучше таблицы?

Когда важнее последовательно читать отдельную запись, чем сравнивать значения по столбцам. У каждой характеристики нужна понятная подпись. Решение подтвердите на реальном сценарии, а не только на пустом макете.

Можно ли убрать часть столбцов на телефоне?

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

Нужно ли закреплять первый столбец?

Это может сохранить название записи при прокрутке, но занимает место на узком экране. Проверьте ширину оставшейся области, наложения и увеличение текста. Закрепление выбирают по результату проверки, а не как обязательное правило.

Достаточно ли визуально выделить заголовки?

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

Как проверить решение без большого исследования?

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