35 инструментов, скриптов и плагинов для создания красивых HTML-таблиц

  1. Таблица jQuery Snippets
  2. Столы для укладки
  3. Нет больше столов
  4. Прокручиваемое тело стола
  5. Фиксированный заголовок таблицы
  6. Pure CSS Table Highlight
  7. TABLEIZER!
  8. HTML Table Generator
  9. Quackit HTML Table Generator
  10. Быстрые таблицы HTML Table Generator
  11. HTML Table Styler
  12. Инструменты преобразования
  13. Конвертер HTML в таблицу
  14. Handsontable
  15. Dynatable.js
  16. Загрузочный стол
  17. List.js
  18. jExcel
  19. DataTables
  20. jQuery Bootgrid
  21. JQuery-TablEdit
  22. jsGrid
  23. Умный Стол
  24. HighchartTable
  25. TableExport
  26. табулятор
  27. FancyGrid
  28. KingTable
  29. stacktable.js
  30. Tabella.js
  31. TablePress
  32. Генератор таблиц данных от Supsystic
  33. Ценовая таблица от Supsystic
  34. Адаптивный Стол Magic Liquidizer
  35. Copytables

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

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

Читайте также: Вставьте CanIUse таблицы на свой сайт с помощью этого инструмента

Таблица jQuery Snippets

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

Д

Столы для укладки

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

Кроме того, он также говорит о добавлении цветов и графики и настройке подписей наряду с другими аспектами таблицы

Нет больше столов

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

С помощью CSS

Прокручиваемое тело стола

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

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

Фиксированный заголовок таблицы

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

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

Pure CSS Table Highlight

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

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

TABLEIZER!

TABLEIZER! это онлайн-инструмент, который позволяет создавать простые таблицы в формате HTML с использованием данных из Excel, Google Sheets или любого другого инструмента для работы с электронными таблицами. Вы также можете настроить финальную таблицу с помощью CSS, как и любую другую таблицу в HTML.

Вы также можете настроить финальную таблицу с помощью CSS, как и любую другую таблицу в HTML

HTML Table Generator

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

Вы также можете оформить таблицу, выбрав тему из набора шаблонов

Quackit HTML Table Generator

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

Однако, в отличие от генератора таблиц, опция импорта данных отсутствует

Быстрые таблицы HTML Table Generator

HTML Table Generator от Rapid Tables - еще один инструмент, похожий на два вышеупомянутых инструмента. Он предоставляет больше возможностей для настройки, чем вышеуказанный инструмент, таких как размер, граница, цвет, выравнивание и некоторые другие. Однако, как и вышеупомянутый инструмент, он поддерживает создание таблицы только вручную и не позволяет импортировать файлы или получать данные из инструмента электронных таблиц, такого как Google Docs.

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

HTML Table Styler

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

Кроме того, он предлагает темы для быстрого оформления таблицы , которые вы также можете настроить

Инструменты преобразования

Инструменты преобразования - это полезный веб-сайт для тех, кто ежедневно занимается таблицами и электронными таблицами . Он помогает вам преобразовать таблицу HTML в файл CSV, файл Excel в таблицу HTML, файл Excel в файл CSV и выполнить гораздо больше преобразований.

Он помогает вам преобразовать таблицу HTML в файл CSV, файл Excel в таблицу HTML, файл Excel в файл CSV и выполнить гораздо больше преобразований

Конвертер HTML в таблицу

Онлайн-конвертер HTML Table to Div Converter позволяет вам конвертировать традиционные таблицы в таблицы div, то есть таблицы, созданные с использованием элементов 'div'. Все, что вам нужно сделать, это скопировать и вставить таблицу на ее страницу и нажать кнопку преобразования, чтобы создать таблицу div .

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

Handsontable

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

, Что позволяет разработчикам быстро строить

Dynatable.js

Плагин для интерактивных таблиц Dynatable.js использует HTML, jQuery и JSON для создания таблиц и других табличных структур . Вы можете создавать таблицы непосредственно из JSON и включать все необходимые функции, такие как поиск, фильтрация, подсчет записей и разбиение на страницы.

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

Загрузочный стол

Bootstrap Table - это расширенная версия стола, предлагаемого Bootstrap. Это минимизирует ваше время и усилия при создании таблиц и обеспечивает адаптивный дизайн. Он содержит такие функции, как прокручиваемые и фиксированные заголовки и функции, такие как сортировка, разбиение на страницы и т. Д.

Д

List.js

List.js - это простой и мощный плагин JavaScript, который позволяет создавать списки и таблицы с гибкими и функциональными функциями, такими как фильтрация, поиск и сортировка и т. Д. Мне понравилось, что он построен с использованием стандартного JavaScript, поэтому вам не нужны никакие сторонние приложения. библиотека.

библиотека

jExcel

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

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

DataTables

Супер-гибкий плагин для jQuery, Data Tables позволяет добавлять расширенные элементы управления взаимодействием к любой HTML-таблице. Он помогает вам добавлять нумерацию страниц, функцию поиска, темы и т. Д. Кроме того, он предоставляет большое количество расширений для добавления дополнительных функций.

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

jQuery Bootgrid

jQuery Bootgrid - это элегантный и интуитивно понятный плагин для создания и управления сетками, такими как таблицы. Он предоставляет такие функции, как поиск, нумерация страниц и т. Д., А также настраиваемые шаблоны.

, А также настраиваемые шаблоны

JQuery-TablEdit

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

Вы можете предоставлять кнопки для переключения между режимами просмотра и редактирования , включать кнопки удаления и восстановления и настраивать таблицы с помощью CSS

jsGrid

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

Он также позволяет настраивать внешний вид таблицы и поддерживает интернационализацию

Умный Стол

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

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

HighchartTable

HighchartTable автоматически преобразует HTML-таблицы в диаграммы и графики . Идеально для представления аналитики и статистики проекта в виде графиков вместе с числовыми данными в таблицах.

Идеально для представления аналитики и статистики проекта в виде графиков вместе с числовыми данными в таблицах

TableExport

TableExport - это простая библиотека для экспорта таблицы HTML в файлы CSV, TXT или Excel . Используя эту библиотеку, вы можете легко создавать таблицы с помощью функции экспорта в файл.

табулятор

Tabulator - это плагин jQuery для создания интерактивных таблиц из таблицы HTML, массива JavaScript, JSON и т. Д. Он поддерживает почти все стандартные табличные функции, такие как поиск, сортировка, фильтрация и т. Д., И предлагает множество функций, таких как темы, обратные вызовы и локализация .

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

FancyGrid

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

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

KingTable

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

stacktable.js

Плагин jQuery для таблиц stacktable.js позволяет конвертировать любую широко распространенную таблицу в таблицу с двумя столбцами ключ / значение . Это идеальное решение для отображения больших таблиц на маленьких экранах, таких как мобильные устройства. Кроме того, вы можете сложить строки или столбцы по мере необходимости.

Кроме того, вы можете сложить строки или столбцы по мере необходимости

Tabella.js

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

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

TablePress

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

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

Генератор таблиц данных от Supsystic

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

Что мне кажется более интересным, так это то, что таблицы полностью редактируемы, а также экспортируются в форматы CSV, Excel или PDF

Ценовая таблица от Supsystic

Еще один плагин от Supsystic, Pricing Table, позволяет создавать таблицы цен без каких-либо препятствий. Вы можете выбрать шаблон, отредактировать ценовое содержание и опубликовать его в своем WordPress . Кроме того, таблицы, созданные с помощью этого плагина, являются адаптивными и элегантными на всех устройствах.

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

Читайте также: 25 креативных таблиц ценообразования для вдохновения

Адаптивный Стол Magic Liquidizer

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

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

Copytables

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