Как сделать красивую таблицу

5 сервисов и программ для создания таблиц сравнения

Визуализируйте сравнение любых данных на сайтах или в презентациях с помощью этих средств.

1. Free Comparison Table Generator

• Платформы: веб.
• Стоимость: бесплатно.

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

2. Compare Ninja

• Платформы: веб.
• Стоимость: бесплатно или от 3 долларов в месяц.

Как и предыдущий, этот сервис предназначен для создания таблиц под сайты. Он такой же простой и удобный. Но Compare Ninja предлагает больше вариантов оформления и умеет конвертировать таблицы, созданные в Excel, в формат HTML.

Вместе с тем в сервисе действуют ограничения. Создавать больше трёх таблиц и использовать больше 10 строк и 5 столбцов в каждой из них можно только после оформления платной подписки.

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

3. Canva Charts

• Платформы: веб.
• Стоимость: бесплатно.

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

4. Edraw Max

• Платформы: Windows, macOS, Linux.
• Стоимость: от 179 долларов.

Edraw Max — это профессиональная программа для создания различных таблиц, карт мыслей, графиков и прочих схем. С её помощью можно генерировать таблицы сравнения любой сложности и сохранять их во множестве форматов: PDF, PPTX, HTML, PNG, JPG и не только.

Интерфейсом Edraw Max напоминает офисные приложения Microsoft. Чтобы перейти к созданию таблицы, нажмите «Создать» → «Диаграммы и графики» → «Диаграмма сравнения» и выберите подходящий шаблон. Далее вы сможете настроить его оформление и содержимое под свои нужды.

Фишка программы — инструменты для динамической визуализации данных. К примеру, если вы измените в шаблоне числовые данные, то добавленный в него график перестроится под них.

Вы можете скачать пробную версию Edraw Max, чтобы протестировать функции программы в течение 30 дней.

5. SmartDraw

• Платформы: веб, Windows.
• Стоимость: 10 долларов в месяц (веб) или 297 долларов (Windows).

Ещё один продвинутый конструктор таблиц сравнения и различных схем любой сложности. Результаты работы можно сохранять в таких форматах, как PDF, SVG, PNG, VSD, или сразу экспортировать в виде изображений в офисные программы Microsoft.

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

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

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

Главная цель любой таблицы – структурировать информацию, помочь пользователю быстро выделять нужные сведения, сравнивать, анализировать. Такой формат удобен для показа финансовых отчетов, описания технических характеристик, сравнения цен. Однако при не продуманном веб-дизайне почти всегда возникают трудности с пониманием материала, а задача пользователя остается нерешенной. Избежать досадных ошибок помогут правила оформления таблиц.

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

1. Просматривает большое количество информации, сведенной воедино. Данные должны быть как можно более краткими и четкими.
2. Сравнивает и анализирует информацию. Дайте пользователю эту возможность и немного схитрите – самые важные и выгодные для вас моменты (например, цену) выделите особо.
3. По возможности – редактирует, удаляет и вносит данные. Или хотя бы ставит галочку в нужной графе.

1. Правило простоты

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

2. Правило UX

Один из принципов UX, о которых мы подробно писали в этой статье, это принцип близости и сходства. Похожие данные должны выглядеть максимально похоже – это касается и текстов, и элементов веб-дизайна, и таблиц. Поэтому близкие по смыслу столбцы должны находиться рядом. Также можно выделить их с помощью цвета (но не злоупотребляйте – поговорим об этом ближе к концу статьи) или шрифта.

3. Правило выравнивания

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

Числа примыкают к правому краю

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

Буквы выравниваются по левому краю

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

Заголовки выравниваются по расположению данных

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

Выравнивание по центру и ширине недопустимо

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

4. Правило ширины

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

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

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

5. Правило заголовка

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

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

6. Правило шрифтов

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

1. Выбирать только моноширинные шрифты (буквы имеют одинаковую высоту и ширину с идентичным выравниванием) без засечек. Наиболее подходящими будут Roboto Mono и Open Sans.
2. Использовать маюскульные цифры – без свисающих элементов, не выходящие при написании за пределы строки, а по размеру равные буквам в тексте. Читателю легче, если все цифры будут одной ширины и выровнены вертикально – это облегчает восприятие.

7. Правило цвета

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

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

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

8. Правило границ

Границы и линии между строками и столбцами тоже лучше использовать по минимуму. Таблица – это не сетка. Границы уместны в случае, если выравнивания недостаточно.

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

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

9. Правило меток

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

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

10. Правило адаптивности

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

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

Сжатие

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

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

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

Размещение заголовков под наклоном

Бывает, что места не хватает по причине длинных слов в заголовках. В этом случае для экономии пространства текст заголовков стоит расположить под наклоном – это сделает страницу компактнее.

Изменение вида на вертикальный

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

Преобразование в список

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

Виды таблиц

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

1. С промежутками между строк

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

2. С закругленными углами

Это не такая строгая таблица – такой вид можно использовать на развлекательных сайтах, в блогах и статьях. Если у вас интернет-магазин и вы продаете товары для широкой аудитории – тоже смело используйте. А вот на научном ресурсе, СМИ, бизнес-сайте подобная таблица будет выглядеть, пожалуй, неуместно и несерьезно.

3. Таблица-календарь

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

4. Таблица-меню

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

5. Таблица-прайс

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

Заключение

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

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

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

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

1. Таблица с раздельными строками

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

Разметка HTML

Стили CSS

table <
border-spacing: 0 10px;
font-family: ‘Open Sans’, sans-serif;
font-weight: bold;
>
th <
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
>
th:first-child <
text-align: left;
>
th:last-child <
border-right: none;
>
td <
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
>
td:first-child <
border-left: 2px solid #56433D;
border-right: none;
>
td:nth-child(2) <
text-align: left;
>

2. Цветная таблица

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

Разметка HTML

Стили CSS

table <
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
>
th, td:first-child <
background: #AFCDE7;
color: white;
padding: 10px 20px;
>
th, td <
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
>
td <
background: #D8E6F3;
>
th:first-child, td:first-child <
text-align: left;
>

3. Таблица с закругленными углами

Благодаря добавлению в спецификацию CSS3 свойства border-radius , появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.

Разметка HTML
— аналогично с примером 2.

Стили CSS

table <
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
>
th <
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
>
th, td <
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
>
th:first-child, td:first-child <
text-align: left;
>
th:first-child <
border-top-left-radius: 10px;
>
th:last-child <
border-top-right-radius: 10px;
border-right: none;
>
td <
padding: 10px 20px;
background: #F8E391;
>
tr:last-child td:first-child <
border-radius: 0 0 0 10px;
>
tr:last-child td:last-child <
border-radius: 0 0 10px 0;
>
tr td:last-child <
border-right: none;
>

4. Таблица с раздельными ячейками

Разметка HTML

— аналогично с примером 2.

Стили CSS

table <
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
>
th <
font-size: 18px;
padding: 10px;
>
td <
background: #F5D7BF;
padding: 10px;
>

Источники:

https://lifehacker.ru/tablica-sravneniya/
https://idbi.ru/blogs/blog/gramotnyy-dizayn-tablits
https://it-media.kiev.ua/article/krasivoe-oformlenie-tablic-css.html