35 Инструменти, скриптове и плъгини за изграждане на красиви HTML таблици

Визуализацията на данните е ключът към по-доброто разбиране на обемисти или сложни данни. Има много начини за това визуализирайте данните си можете да създадете интелигентни графики или да създадете интерактивни диаграми ‐ всичко зависи от вашите данни и как искате да го представите.

Въпреки това, днешният ми пост е единствено по темата за таблиците и някои наистина полезни ресурси за създаване на различни типове таблици. Ето 35 съвета, инструменти, скриптове и приставки, които могат да ви помогнат да създадете различни таблици, за да представите данните си. Така че нека да разгледаме подробно всеки ресурс.

Таблица jQuery Фрагменти

тези удобни фрагменти заедно с лесни обяснения ще ви помогне да разработите интерактивни таблици. Например, тези фрагменти ви позволяват да добавяте динамично редове, извличане на стойностите на клетките и т.н..

Стайлинг таблици

Набор от съвети и трикове, които помагат ефективно да оформят таблиците ви, като подобряват оформлението, типографията, подравняването на текста и много повече. Освен това, той също разказва за добавяне на цветове и графики и персонализиране на надписи заедно с други аспекти на таблицата.

Няма повече таблици

Фрагмент, който ви помага да създадете мобилни отзивчиви таблици, които показват всеки ред поотделно на малки екрани. Също така можете да променяте цвета, шрифта и размера на шрифта и т.н. с помощта на CSS.

Скролиращо тяло на таблицата

Този трик може да превърне масата ви в тяло - функция, която се намира в повечето инструменти за електронни таблици, като Google Листове. Това означава, че можете коригирайте заглавието на таблицата и тялото или съдържанието на таблицата ще се превъртат, както обикновено, правейки масата по-видима от преди.

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

Друг трик, като например по-горе, Fixed Table Header помага да се направи таблица с фиксирано заглавие и превъртащо се съдържание. Можеш персонализирайте таблицата, включително цветове и шрифтове, но този трик не е толкова подробен и обяснен като Body Scroll-able Table.

Изчистете чистата таблица на CSS

Един прост трик, който ви позволява маркирайте определена клетка на мишката - вертикално и хоризонтално. Също така, финалната маса е персонализирана с персонализирани цветове и шрифтове. Намирам, че този трик е най-полезен, когато трябва да покажете числа на масата.

TABLEIZER!

TABLEIZER! е онлайн инструмент, който ви позволява създайте обикновени таблици в HTML, използвайки данни от Excel, Google Sheets, или друг инструмент за електронни таблици. Можете също така да персонализирате финалната маса с помощта на CSS, точно както всяка друга таблица в HTML.

HTML табличен генератор

HTML Table Generator е прост генератор на таблици, който ви помага създавайте и персонализирайте почти всеки аспект на таблицата, като използвате опциите на екрана. Това, което ми харесва, е да създадете таблица ръчно, да качите CSV файл или да импортирате данни от инструмент за електронни таблици като Excel. Можете също да оформите таблицата, като изберете тема от нейния набор от шаблони.

Quackit HTML табличен генератор

Друг онлайн генератор на таблици, който ви помага да създавате таблици с набор от опции за персонализиране. Стайлингът опциите включват размер, цвят, граница, и др опцията за импортиране на данни липсва, за разлика от горния табличен генератор.

Бързи таблици HTML табличен генератор

HTML Таблица Generator от бързи таблици е още един инструмент като горните два инструмента. Осигурява повече опции за персонализиране от горния инструмент, като размер, граница, цвят, подравняване и други. Въпреки това, както и горния инструмент, той само поддържа ръчно създаване на таблицата и не позволява импортиране на файлове или да вземат данни от инструмент за електронни таблици, като Google Документи.

HTML таблица Styler

Инструмент за персонализиране на таблици, HTML таблица Styler, ви позволява да оформите таблиците си екранни опции, които генерират CSS за вашата таблица в HTML. Този инструмент, изненадващо, показва преглед на масата на живо, което ви позволява да тествате и да изпробвате опциите за оформяне. Също така предлага теми за бързо стайлинг на маса, които можете да персонализирате, както добре.

Инструменти за реализации

Инструментите за реализация са полезен уебсайт за всеки, който се занимава ежедневно с таблици и електронни таблици. Тя ви помага да конвертирате една HTML таблица в CSV файл, Excel файл в HTML таблица, Excel файл в CSV файл и да правите много повече реализации.

HTML таблица към Div конвертор

Онлайн конвертор инструмент, HTML таблица за Div конвертор ви позволява да конвертирате традиционните таблици на Div таблици, т.е., таблици, създадени с помощта на "div" елементи. Всичко, което трябва да направите, е да копирайте и поставете таблица на нейната страница и натиснете бутона за конвертиране, за да генерирате div таблица.

Handsontable

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

Dynatable.js

Интерактивна приставка за таблица, Dynatable.js използва HTML, jQuery и JSON за създаване на таблици и други подобни на таблици структури. Можете да създавате таблици директно от JSON и да включите всички основни функции като търсене, филтър, брой записи и пагинация.

Таблица за стартиране

Bootstrap Table е разширена версия на таблицата, предлагана с Bootstrap. Минимизира времето и усилията ви при създаването на таблици и осигурява реагиращ дизайн. Тя носи характеристики като превъртащи се и фиксирани заглавия и функции като сортиране, страниране, и т.н..

List.js

List.js е прост и мощен плъгин за JavaScript, който ви позволява да създавате списъци и таблици с гъвкавост и функционални характеристики като филтър, търсене и сортиране, и т.н. Хареса ми, че е изградена с помощта на ванилия JavaScript, така че не се нуждаете от библиотека на трети страни.

jExcel

jExcel е лек плъгин jQuery, който ви позволява вградете в уеб страницата си всяка съвместима с Excel таблица. Приставката съдейства за създаването на таблица, подобна на Excel, като ви позволява да премествате, преоразмерявате, копирате, поставяте и правите много повече с данните за листа.

DataTables

Супер гъвкав плъгин за jQuery, Таблиците с данни ви позволява да добавяте усъвършенствани контроли за взаимодействие към всяка HTML таблица. Той ви помага да добавяте страници, функция за търсене, теми и т.н. Също така предоставя голям брой разширения, за да добавите повече функционалности.

jQuery Bootgrid

jQuery Bootgrid е елегантен и интуитивен плъгин за създаване и управление на мрежи като таблици. Той предоставя функции като търсене, страниране и т.н. заедно с персонализирани шаблони.

JQuery-Tabledit

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

jsGrid

jsGrid е лек плъгин jQuery, който помага създаване и управление на мрежови данни. Той поддържа различни операции на мрежи като филтриране, пейджинг, сортиране и т.н. Той също така ви позволява да персонализирате външния вид на таблицата и подкрепя интернационализацията също.

Интелигентна таблица

Здрава библиотека, интелигентната таблица ви помага да превърнете всяка HTML таблица в по-интелигентна с подобни опции филтър, търсене, сортиране, Той е съчетан с повече функции, които помагат за изграждането на полезна и професионално изглеждаща таблица или решетка с данни с нейните приставки.

HighchartTable

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

TableExport

TableExport е проста библиотека експортирате HTML таблица в CSV, TXT или Excel файлове. С помощта на тази библиотека можете лесно да създавате таблици с функцията за експортиране към файл.

табулатор

Табулаторът е плъгин за jQuery създаване на интерактивни таблици от HTML таблица, JavaScript масив, JSON и т.н. Поддържа почти всички стандартни таблични функции като търсене, сортиране, филтриране и т.н. и предлага много функции, като например теми, обаждания и локализация.

FancyGrid

Решетъчна библиотека, FancyGrid ви позволява да създавате красиви таблици заедно с диаграми и графики. Той поддържа много източници на данни, включително JSON, включва различни функции като сортиране, търсене и т.н., позволява тематизиране и модулация, и носи много повече функции.

KingTable

KingTable ви позволява да изграждате административни таблици с минимално кодиране. Той идва със значително количество функции, включително търсене от страна на клиента или сървъра, сортиране, филтриране и по-често срещани функции. Можете да персонализирате облика на таблицата, добавяйте персонализирани филтри и експортирайте данните в различни формати като CSV, JSON и Excel.

stacktable.js

JQuery плъгин за таблици, stacktable.js ви позволява конвертирате всяка таблица с широк изглед в таблица с ключ / стойност от 2 колони. Това е идеалното решение за показване на големи маси на малки екрани, като това на мобилни устройства. Също така можете да подреждате редове или колони, ако е необходимо.

Tabella.js

Tabella.js ви помага да изграждате отзивчиви таблици с фиксирани заглавки и превъртащи се данни - дори хоризонтално, за да включите много много колони, отколкото обикновено. Освен това можете включете няколко таблици на една и съща страница и създайте многоцелеви таблици.

TablePress

TablePress е фантастичен плъгин за WordPress, който ви позволява Създавайте и вграждайте таблици в публикации, страници и текстови джунджурии, използвайки шорткод. Таблиците могат да се редактират в интерфейс, подобен на електронна таблица, и могат да съдържат всички видове данни, включително и формули. Можете също да добавяте функции като търсене и сортиране и експортиране на данни в различни формати.

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

Генератор на таблици с данни помага при създаването и управлението на таблици директно от администраторския панел, като използва редактор на таблицата. Изненадващо можете да включите графики и графики в таблиците Ви, заедно с надписи, заглавие и долен колонтитул. Това, което намирам за по-интересно е, че таблиците са напълно редактируеми, както и експортирани в CSV, Excel или PDF формати.

Таблица за ценообразуване от Supsystic

Друг плъгин от Supsystic, Таблица за ценообразуване ви позволява да създавате таблици за ценообразуване без препятствия. Можеш изберете шаблон, редактирайте ценовото съдържание и го публикувайте в WordPress. Също така, таблиците, създадени с помощта на този плъгин, са отзивчиви, както и елегантни на всички устройства.

Magic Liquidizer Отзивчива маса

Таблица за таблица за WordPress, Magic Liquidizer Responsive Table превръща всяка обикновена таблица в мобилна отзивчива таблица. Можете да вмъквате изображения, текстове и т.н. в таблиците си и да ги показвате както е на всички устройства - дори и тези с малки екрани.

Copytables

Copytables е разширение за Google Chrome, което позволява копиране на таблици от уеб страници. Можеш изберете клетки, редове или колони на всяка уеб страница и ги копирайте директно .