Почему большие HTML-таблицы — это плохо и как правильно подавать информацию

Эта справка для редакторов сайтов объясняет, почему большие HTML-таблицы (с множеством столбцов и строк) создают проблемы на современных сайтах и какие альтернативные форматы использовать для удобства пользователей.

---

1. Что такое «большая таблица» и в чём проблема

Большая таблица — это HTML-таблица с:

• Более 3–4 столбцов (особенно с длинными заголовками или данными);
• Множеством строк (десятки позиций);
• Широким содержимым в ячейках (длинные тексты, числа, описания).

Основная проблема: таблицы не адаптируются под мобильные экраны

На смартфонах и планшетах большие таблицы:

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

Статистика: более 70% трафика на большинстве сайтов приходит с мобильных устройств. Если таблица нечитаема на телефоне — вы получаете большое количество недовольных пользователей.

---

2. Конкретные проблемы больших таблиц на мобильных

2.1. Горизонтальная прокрутка

• Пользователь вынужден скроллить таблицу влево-вправо, чтобы увидеть все столбцы.
• При этом теряется контекст: непонятно, к какой строке относятся данные.
• Заголовки столбцов уходят за пределы экрана — приходится постоянно возвращаться к началу.

2.2. Мелкий нечитаемый текст

• Чтобы уместить таблицу, браузер или CSS уменьшают шрифт.
• Текст становится слишком мелким, его невозможно прочитать без зума.
• Зум ломает структуру страницы и усложняет навигацию.

2.3. Потеря связи между заголовками и данными

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

2.4. Сложность сравнения и поиска информации

• В большой таблице на маленьком экране сложно сравнить несколько строк.
• Невозможно быстро найти нужный параметр или объект.
• Пользователь тратит много времени и усилий — и получает негативный опыт использования Вашего сайта.

2.5. Проблемы с доступностью

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

---

3. Когда таблица допустима, а когда — нет

✅ Таблица допустима, если:

• Не более 2–3 столбцов (например: Должность, Дата, Место);
• Компактные данные в ячейках (короткие слова, числа);
• Небольшое количество строк (до 7–12);
• Таблица адаптирована под мобильные (например, перестраивается в карточки или список).

❌ Таблица НЕ подходит, если:

• 4 и более столбцов с содержательными данными;
• Длинные тексты в ячейках (описания, характеристики);
• Десятки строк данных;
• Сложная структура (вложенные заголовки, объединённые ячейки);
• Нет адаптивной вёрстки под мобильные устройства.

---

Государственный стандарт СТБ 2304-2013 "Интернет-ресурсы. Общие требования доступности для инвалидов по зрению": Одна таблица должна иметь не более 15 ячеек. Уровень вложенности одной таблицы в другую должен быть не более трех.

---

4. Альтернативные форматы подачи информации

Вместо больших таблиц используйте современные форматы, которые удобны на всех устройствах.

4.1. Карточки (блоки)

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

Пример:

Было (таблица):

Название административной процедуры	ФИО специалиста	График приёма	Срок осуществления процедуры	Время действия документа	Стоимость	Документы, предоставляемые гражданином
6.2.1. Выдача в связи с изменением половой принадлежности документа об образовании, приложения к нему, документа об обучении	Иванов Иван Иванович - директор, каб. №7, тел. +375 17 777 77 77	вторник 8.00 – 18.00 обед с 13.00-14.00, 1,5-я суббота месяца 19.00-13.00	5 дней со дня подачи заявления, при необходимости запроса документов и (или) сведений от других государствен­ных органов, иных организаций – 1 месяц	бессрочно	0,1 базовой величины – за свидетельство об общем базовом образовании, аттестат об общем среднем образовании	заявление; паспорт или иной документ, удостоверяющий личность; ранее выданный документ; свидетельство о перемене имени; документ, подтверждающий внесение платы
6.1.1. Выдача дубликатов документа об образовании, приложения к нему, документа об обучении	Иванов Иван Иванович - директор, каб. №7, тел. +375 17 777 77 77	вторник 8.00 – 18.00 обед с 13.00-14.00, 1,5-я суббота месяца 19.00-13.00	5 дней со дня подачи заявления, при необходимости запроса документов и (или) сведений от других государствен­ных органов, иных организаций – 1 месяц	бессрочно	0,1 базовой величины – за дубликат свидетельства об общем базовом образовании, аттестата об общем среднем образовании	заявление с указанием причин утраты документа или приведения его в негодность; паспорт  или  иной документ, удостоверяющий личность; пришедший в негодность документ - в случае, если документ пришел в негодность; документ, подтверждающий внесение платы

Стало (карточки):

 

Преимущества:

• Отлично читается на мобильных;
• Легко сканировать глазами;
• Можно добавить кнопки, изображения, акценты;
• Гибкая вёрстка под любой экран.

---

Полученные карточки (блоки) можно так же по разному выводить на экран:

а) Списком  - пример приведен выше

б) Аккордеоны (спойлеры)

Как работает:
Пользователь видит список заголовков и раскрывает нужную карточку по клику.

Преимущества:

• Экономит место на экране;
• Пользователь видит только нужную информацию;
• Удобно на мобильных.

в) Вкладки (табы)

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

Преимущества:

• Структурирует информацию;
• Уменьшает когнитивную нагрузку;
• Удобно на всех устройствах.

г) Список карточек с фильтрами и сортировкой

Как работает:
Список карточек - с возможностью фильтрации и сортировки.

Преимущества:

• Быстрый поиск нужного;
• Не перегружает экран;
• Интуитивно понятно.

---

4.2. Адаптивные таблицы (для сложных случаев)

Если таблица всё же необходима (например, финансовые отчёты, сравнительные данные), используйте адаптивную вёрстку:

• Горизонтальный скролл с фиксированным первым столбцом;
• Автоматическая перестройка в карточки на мобильных (каждая строка = карточка);
• Скрытие второстепенных столбцов на маленьких экранах;
• Липкие заголовки (sticky headers), которые остаются видимыми при прокрутке.

Важно: это вариант требует работы разработчика и трудоёмок для последующего редактирования.

---

5. Пошаговый алгоритм для редактора

Когда вы сталкиваетесь с необходимостью разместить большой объём табличных данных:

Шаг 1. Оцените размер таблицы

• Сколько столбцов? Сколько строк?
• Насколько длинные данные в ячейках?

Шаг 2. Проверьте на мобильном

• Откройте страницу на телефоне (или в режиме мобильной версии браузера).
• Читаема ли таблица? Нужна ли горизонтальная прокрутка?

Шаг 3. Если таблица неудобна — преобразуйте ее в карточки (блоки) и выводите на экран:

• Списком
• Аккордеонами (спойлерами)
• Вкладками (табами)
• Списком с фильтрами

Шаг 4. Согласуйте с дизайнером/разработчиком

• Если нужен нестандартный формат или адаптивная таблица — запросите помощь разработчиков.

Шаг 5. Реализуйте и протестируйте

• Разместите контент в новом формате.
• Проверьте на разных устройствах (телефон, планшет, десктоп).

---

6. Общие рекомендации

1. Думайте о мобильных пользователях в первую очередь.
   Более половины посетителей зайдут с телефона — информация должна быть удобной для них.

2. Не размещайте таблицы с 4+ столбцами без адаптации.
   Если таблица не помещается на экран телефона — ищите другой формат.

3. Разбивайте большие массивы данных.
   Разбивайте таблицу на карточки (блоки), используйте фильтры, аккордеоны, вкладки.

4. Тестируйте на реальных устройствах.
   Не полагайтесь только на десктопную версию — проверяйте на телефоне.

5. Консультируйтесь с командой.
   Если не уверены, как лучше подать информацию — спросите дизайнера или разработчика.

---

7. Краткая формулировка политики

Запрещено размещать большие HTML-таблицы (4+ столбца, множество строк) без адаптации под мобильные устройства.
Для представления объёмных данных используйте:

• Карточки (блоки):
  • Списком;
  • Аккордеоны (спойлеры);
  • Вкладки (табы);
  • Список с фильтрами;
• Адаптивные таблицы — только по согласованию с разработчиком.

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

---

8. Чек-лист для редактора

Перед размещением таблицы на сайте ответьте на вопросы:

• В таблице менее 4 столбцов?
• Данные в ячейках короткие (1–2 слова, числа)?
• Таблица помещается на экран телефона без горизонтальной прокрутки?
• Текст читаем на мобильном без зума?
• Пользователь может быстро найти нужную информацию?

Если хотя бы на один вопрос ответ «нет» — рассмотрите альтернативный формат подачи информации.