Таблицы

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

Главные принципы

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

Как улучшить таблицу:

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

Виды таблиц

Простая таблица

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

Таблица с горизонтальной разлиновкой

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

Таблица с границами ячеек

Использовать в таблицах со сложными данными, например если есть объединенные ячейки. По дефолту — для верстки статей в Контур.Помощи.

Широкоформатная таблица

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

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

Выравнивание данных

Текст

Текст в таблице всегда выравнивайте по левой стороне — так будет удобнее считывать информацию, т..к мы читаем слева направо.

Текст в шапке таблицы выравнивается также, как текст или числа в столбцах.

Числа

Числа следует выравнивать по правой стороне. Так проще сопоставлять числа с разным количеством разрядов. Если разрядность одинаковая, допустимо выравнивать по центру. Исключение — когда цифры представляют собой код, порядковый номер. 

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

Шапка

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

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

Выравнивание должно соответствовать выравниваю данных в столбце. Может быть центральным, если объединяет несколько столбцов.

Окрашивание ячеек

Если хотите сделать смысловой акцент в таблице, заливайте ячейки цветом — серым, красным или зеленым. Можно окрашивать как ячейку, так и целый столбец или строку.

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

Иконки в ячейках

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

Не используйте одновременно слова и иконки/символы, если они несут один и тот же смысл.

Колонки вместо таблицы

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

Обратите внимание: если мы приводим несколько примеров, они должны  соотноситься между собой так же, как в таблице.

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

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

Больше о колоночной верстке в разделе «Выравнивание и колоночная верстка».

Типовые ошибки

Данные невозможно сопоставить по горизонтали и вертикали

Большие объемы текста

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

Списки в ячейках таблицы

Числовое значение разъехалось на несколько строк в ячейке

Неравномерное заполнение таблицы

Объединение ячеек

Картинки таблиц вместо таблиц

Таблица может быть сверстана в редакторе CMS, а может быть вставлена картинкой. Иногда это оправдано. Однако нужно учитывать, что данные с картинок не индексируются в поиске. Если таблица простая, ее лучше сверстать непосредственно в редакторе CMS..

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