Как сделать красивую таблицу и не переборщить с «красотой»

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

Что делать? Главное здесь – это лаконичное простое оформление. Пользователь не должен отвлекаться на фишки и финтифлюшки. Главная цель подачи информации в таком формате – удобство обработки и анализа.

Главные принципы красивой верстки таблиц

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

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

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

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

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

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

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

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

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

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31975

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

Список тегов для оформления таблиц в HTML

Где бы вы ни делали красивую таблицу, можно выделить основные теги, которые будут задействованы при вёрстке:

• <table>: это основной табличный тег, её контейнер.
• <tr>: ряд (строка) в таблице. В него могут входить ячейки <td> или <th>.
• <td>: обычная табличная ячейка.
• <th>: заголовочная ячейка.
• <col>: тег для создания табличной колонки.
• <colgroup>: группировка колонок.
• <thead>: верхний колонтитул таблицы.
• <tbody>: основная часть (тело) таблицы.
• <tfoot>: нижний колонтитул таблицы.
• <caption>: задаёт общий заголовок, отдельный от таблицы.
• colspan: атрибут, показывающий число ячеек, которые надо объединить по горизонтали в строке.
• rowspan: аналогичный атрибут объединения, но не ячеек, а строк по вертикали.
• span: число колонок, которые объединяют, чтобы придать им единый стиль. Дефолтное значение — 1.
• border: атрибут, задающий толщину границы в пикселях. Дефолтное значение — ноль (таблица или ячейка не имеют видимой обводки).
• cellpadding: атрибут table, устанавливающий внутренние отступы в ячейках — от контента до границ.
• cellspacing: атрибут table, задающий ширину пространства между ячейками.

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

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

18 советов как сделать красивую таблицу на сайте

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

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

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

• Зафиксировать шапку

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

• Зафиксировать первую колонку

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

Читайте также!

Умная таблица в Excel: зачем нужна и как создать

Подробнее

• Функция регулирования ширины столбцов

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

• Грамотно стилизовать строки

Читабельность таблицы во многом зависит от стиля строк. Например, мелким табличкам 3 x 4 не нужна «зебра», да и от границ можно отказаться — они только отвлекают. Но в крупных датасетах без этих приёмов не обойтись, они помогают быстрее улавливать информацию и анализировать её.

• Регулировать плотность отображения

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

• Использовать сводки и дашборды

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

• Разбить контент на страницы

Изучив сводку, пользователь может захотеть сделать выборку для анализа из 10 или 50 строк. Если есть пагинация (постраничная разбивка контента), то эта задача сильно облегчается. Некоторые сайты даже позволяют пользователю самому задать количество строк на странице.

Это удобное решение для развлекательных и новостных порталов, а вот для работы с данными (сортировки их по столбцу, и т. п.) — не очень. Классическая пагинация в этом случае подходит больше, чем бесконечная подгрузка.

• Реакция на наведение мыши

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

• Внедрить онлайн-редактор

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

• Выводить быстрые сводки для строк

Такая сводка помогает моментально выхватить основные детали из всего массива строк.

• Добавить превью там, где возможно редактирование

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

• Использовать модальные окна

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

Дарим скидку от 60%
на обучение «Frontend-разработчик» до 01 декабря

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

• Использовать мультимодальные окна

Это решение может быть полезно, если вы хотите реализовать идею целостного рабочего стола.

• Переходить со строки к деталям

Переходить, например, в карточку товара можно по клику на любом месте строки.

• Функция сортировки по столбцам

Сортировка от большего к меньшему и от меньшего к большему даёт возможность пользователю быстро отыскать наиболее приоритетные строки.

• Фильтрация с настройкой выборки

Благодаря этому паттерну проектирования пользователь сам может устанавливать параметры для фильтрации по столбцу.

• Реализовать поиск по столбцам

Такой поиск даёт возможность быстро находить конкретную деталь в интересующей колонке таблицы.

Только до 25.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

• Возможность добавлять столбцы вручную

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

5 рекомендаций как сделать таблицу красивее и понятнее

Совет 1: Убедитесь в том, что текст нормально выровнен

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

Совет 2: Упростить типографику

Если хочется «поиграть со шрифтами», то таблица — неподходящая площадка для экспериментов. Гарнитуры с засечками вообще неуместны. Если вы выбираете между Arial и Times New Roman, то отдайте предпочтение шрифту без засечек (если, конечно, вы действительно стремитесь сделать красивую таблицу). Курсива, жирного начертания тоже желательно избегать.

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

Совет 3: Простота и лаконичность

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

Оптимальный вариант — использование двух основных цветов (как правило, белого и светло-серого) для контентных строк и акцентного цвета (для заголовочной строки или строки с ключевыми показателями — это важно, если сравниваются цены или есть раздел «Итого»).

Читайте также!

Суть языков программирования: для чего они нужны

Подробнее

Совет 4: Не дублировать информацию

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

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

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

Совет 5: Добавить воздух

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

Информация является стратегическим ресурсом, поэтому не только СМИ и правительство, но и банки, службы доставки, ритейл-гиганты, энергетические корпорации, учреждения здравоохранения и производственные фирмы собирают просто необъятные массивы big data — сведений о поведении потребителей.

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование