35 Nástroje, skripty a pluginy na zostavenie krásnych tabuliek HTML

Zobrazenie údajov je kľúčom k lepšiemu pochopeniu objemných alebo zložitých informácií. Existuje mnoho spôsobov, ako vizualizovať vaše dáta t. j. môžete navrhnúť cool infographics alebo vytvoriť interaktívne grafy ‐ to všetko záleží na vašich údajoch a na tom, ako ich chcete prezentovať.

Môj dnešný príspevok je však výhradne na témy tabuliek a niektoré naozaj užitočné zdroje na vytvorenie rôznych typov tabuliek. Tu je 35 tipov, nástrojov, skriptov a doplnkov, ktoré vám pomôžu vytvoriť rôzne tabuľky na prezentáciu vašich údajov. Takže sa poďme podrobne diskutovať o každom zdroji.

Tabuľkové úryvky jQuery

Títo praktické úryvky spolu s jednoduchými vysvetleniami vám pomôžu vytvoriť interaktívne tabuľky. Napríklad tieto úryvky umožňujú dynamické pridávanie riadkov, získavanie hodnôt buniek atď.

Štýlové tabuľky

Sada tipov a trikov, ktoré pomáhajú efektívne prispôsobiť vaše tabuľky zlepšením ich rozloženia, typografie, zarovnania textu a oveľa viac. Okrem toho to tiež hovorí pridávanie farieb a grafiky a prispôsobenie titulkov spolu s ďalšími aspektmi tabuľky.

Žiadne ďalšie tabuľky

Útržok, ktorý vám pomôže vytvoriť mobilné odpovedajúce tabuľky, ktoré zobrazujú každý riadok zvlášť na malých obrazovkách. Tiež môžete zmeniť farbu, veľkosť písma a veľkosť písma atď. Pomocou CSS.

Posúvateľné tabuľkové teleso

Tento trik dokáže prispôsobiť vaše tabuľkové telo - funkciu, ktorá sa nachádza vo väčšine nástrojov tabuľkového procesora, ako je napríklad tabuľka Google. To znamená, že môžete opravte záhlavie tabuľky a obsah alebo tabuľka sa posúva, ako zvyčajne, takže stôl je viditeľnejší ako predtým.

Záhlavie s pevnou tabuľkou

Ďalší trik ako nad jedným, Fixed Table Header pomáha vytvoriť tabuľku s pevnou záhlavím a posúvateľným obsahom. Môžeš prispôsobiť tabuľku vrátane farieb a písiem, ale tento trik nie je tak podrobný a vysvetlený ako Scroll-able Table Body.

Zvýraznenie čistej tabuľky CSS

Jednoduchý trik, ktorý vám umožní zvýraznite konkrétnu bunku na kurzor myši - vertikálne i horizontálne. Konečná tabuľka je tiež prispôsobiteľná vlastnými farbami a písma. Tento trik považujem za veľmi užitočný, keď potrebujete zobraziť čísla na stole.

TABLEIZER!

TABLEIZER! je on-line nástroj, ktorý vám umožní vytvárať jednoduché tabuľky v jazyku HTML pomocou údajov z aplikácie Excel, tabuľky Google, alebo iný nástroj tabuľkového procesora. Môžete tiež prispôsobiť výslednú tabuľku pomocou CSS, rovnako ako každá iná tabuľka v jazyku HTML.

Generátor tabuľky HTML

Generátor tabuliek HTML je jednoduchý generátor tabuliek, ktorý vám pomôže vytvárať a prispôsobovať takmer každý aspekt tabuľky pomocou možností na obrazovke. Čo sa mi páči, je, že môžete manuálne vytvoriť tabuľku, nahrať súbor CSV alebo importovať údaje z tabuľkového nástroja, akým je Excel. Štruktúru môžete tiež prispôsobiť výberom témy zo sady šablón.

Spravujte generátor tabuliek HTML

Ďalší generátor online tabuľky, ktorý vám pomôže vytvoriť tabuľky s množinou možností prispôsobiteľnosti. Styling Možnosti zahŕňajú veľkosť, farbu, okraj, atď chýba možnosť importovať údaje, na rozdiel od vyššie uvedeného generátora tabuľky.

Rýchle tabuľky Generátor tabuľky HTML

Generátor tabuliek HTML Rapid Tables je ďalším nástrojom, ako sú vyššie uvedené dva nástroje. To poskytuje viac možností prispôsobenia než vyššie uvedený nástroj, napríklad veľkosť, hraničná farba, farba, zarovnanie a ďalšie. Avšak, ako vyššie uvedený nástroj, podporuje iba manuálne vytvára tabuľku a nedovoľuje importovať súbory alebo prevziať údaje z tabuľkového nástroja, ako je napríklad Dokumenty Google.

HTML Styler tabuľky

Nástroj na prispôsobenie tabuliek, HTML Styler tabuľky, vám umožňuje štýlovať tabuľky pomocou možnosti na obrazovke, ktoré generujú CSS pre vašu tabuľku v HTML. Tento nástroj prekvapivo ukazuje živý náhľad tabuľky, ktorý vám umožní vyskúšať a vyskúšať možnosti štýlu. Tiež to ponúka témy pre rýchle stvárnenie tabuľky, ktoré si môžete prispôsobiť.

Konverzné nástroje

Konverzné nástroje sú užitočné webové stránky pre každého, kto sa každodenne zaoberá tabuľkami a tabuľkami. Pomáha vám previesť tabuľku HTML do súboru CSV, súboru programu Excel do tabuľky HTML, súboru programu Excel do súboru CSV a urobiť oveľa viac konverzií.

Tabuľka HTML do konvertora Div

Online konvertorový nástroj, Tabuľka HTML do Div Converter vám umožňuje konvertovať tradičné tabuľky na tabuľky Div, t. J. Tabuľky vytvorené pomocou prvkov "div". Všetko, čo musíte urobiť, je skopírujte a vložte tabuľku na jej stránke a stlačte tlačidlo na konvertovanie na vytvorenie tabuľky div.

Handsontable

Handsontable je inovačný tabuľkový komponent pre webové aplikácie ktorý vám umožní rýchlo vyvíjať a ponúknuť v aplikáciách tabuľky. Ponúka širokú škálu funkcií, ako je podpora pre viacero rámcov, vysoký výkon s masívnym množstvom údajov, potrebné funkcie, ako je vyhľadávanie, filtrovanie atď., čo umožňuje vývojárom rýchlo stavať.

Dynatable.js

Interaktívny doplnok tabuľky, Dynatable.js používa HTML, jQuery a JSON na vytváranie tabuliek a iných tabulkových štruktúr. Môžete vytvárať tabuľky priamo z JSON a zahrnúť všetky základné funkcie, ako je vyhľadávanie, filtrovanie, počet záznamov a stránkovanie.

Bootstrap tabuľka

Tabuľka Bootstrap je rozšírená verzia tabuľky ponúkanej s nástrojom Bootstrap. Minimalizuje váš čas a úsilie pri vytváraní tabuliek a poskytuje citlivý dizajn. Prináša funkcie ako posúvateľné a pevné hlavičky a funkcie ako triedenie, paginácia, atď.

List.js

List.js je jednoduchý a výkonný JavaScript plugin, ktorý vám umožňuje vytvárať zoznamy a tabuľky s flexibilitou a funkčnými funkciami, ako je filter, vyhľadávanie a triedenie, atď Mám rád, že je postavený pomocou Java vanilky, takže nevyžadujete knižnicu tretích strán.

jExcel

jExcel je ľahký plugin jQuery, ktorý vám umožňuje vložte do svojej webovej stránky tabuľku kompatibilnú s programom Excel. Zásuvný modul pomáha pri vytváraní tabuľky typu Excel, umožňujúcej presunúť, meniť veľkosť, kopírovať, vkladať a robiť oveľa viac s údajmi listu.

DataTables

Veľmi flexibilný plugin pre jQuery, Data Tables vám umožňuje pridávať rozšírené ovládacie prvky interakcie do ľubovoľnej tabuľky HTML. Pomáha vám pridať stránkovanie, funkciu vyhľadávania, témy atď. Poskytuje tiež veľké množstvo rozšírení, ktoré pridávajú ďalšie funkcie.

jQuery Bootgrid

jQuery Bootgrid je elegantný a intuitívny plugin na vytváranie a spravovanie mriežok ako tabuľky. Poskytuje funkcie ako vyhľadávanie, paginácia atď. Spolu s prispôsobiteľnými šablónami.

jQuery-Tabledit

jQuery-Tabledit je on-line editor pre kompatibilné HTML tabuľky Bootstrap, ktorý umožňuje používateľom upravovať dáta v tabuľkách. Môžete poskytnúť na prepínanie medzi zobrazením a režimom úprav, zahrnúť tlačidlá pre zmazanie a obnovenie a prispôsobiť tabuľky pomocou CSS.

jsGrid

jsGrid je ľahký doplnok jQuery, ktorý pomáha vytvárať a spravovať dátové mriežky. Podporuje rôzne operácie na mriežkach, ako je filtrovanie, stránkovanie, triedenie atď. Umožňuje tiež prispôsobenie vzhľadu tabuľky a podporuje internacionalizáciu tiež.

Inteligentná tabuľka

Robustná knižnica Smart Table vám pomôže transformovať ľubovoľnú tabuľku HTML na inteligentnejšiu s možnosťami, ako je filtrovať, vyhľadávať, triediť, atď. Je spojený s ďalšími funkciami, ktoré pomáhajú pri tvorbe užitočnej a profesionálne vyzerajúcej tabuľky alebo dátovej siete s jej doplnkami.

HighchartTable

HighchartTable automaticky prevádza HTML tabuľky na grafy a grafy. Ideálne je reprezentovať analýzu projektov a štatistiky v grafoch spolu s číselnými údajmi v tabuľkách.

TableExport

TableExport je jednoduchá knižnica export tabuľky HTML do súborov CSV, TXT alebo Excel. Pomocou tejto knižnice môžete ľahko vytvárať tabuľky pomocou funkcie exportovať do súboru.

tabulator

Tabulátor je doplnok jQuery pre vytváranie interaktívnych tabuliek z tabuľky HTML, JavaScriptového poľa, JSON atď. Podporuje takmer všetky štandardné funkcie tabuľky, ako vyhľadávanie, triedenie, filtrovanie atď. a ponúka mnoho funkcií, ako je témy, spätné volania a lokalizácia.

FancyGrid

Knižnica grid, FancyGrid umožňuje vytvárať krásne stoly spolu s grafmi a grafmi. Podporuje množstvo dátových zdrojov, vrátane JSON, obsahuje rôzne funkcie ako sort, vyhľadávanie atď tematikou a modularizáciou a prináša mnoho ďalších funkcií.

KingTable

KingTable vám umožňuje stavať administratívne tabuľky s minimálnym kódovaním. Dodáva sa s pozoruhodným množstvom funkcií vrátane vyhľadávania, triedenia, filtrovania a ďalších bežných funkcií na strane klienta alebo servera. Môžete prispôsobiť vzhľad a dojem z tabuľky, pridať vlastné filtre a exportovať údaje do rôznych formátov, ako sú CSV, JSON a Excel.

stacktable.js

Plugin jQuery pre stoly, stacktable.js vám umožňuje konvertovať akúkoľvek tabuľku so širokým vzhľadom na tabuľku kľúčov / hodnôt s 2 stĺpcami. Ideálne riešenie pre zobrazovanie veľkých stolov na malých obrazovkách, ako sú mobilné zariadenia. Tiež môžete podľa potreby stackovať riadky alebo stĺpce.

Tabella.js

Tabella.js pomáha vytvárať citlivé tabuľky s pevnými hlavičkami a posúvateľnými údajmi - dokonca horizontálne, aby zahŕňali veľa stĺpcov, než je obvykle možné. Okrem toho môžete zahrňte viaceré tabuľky na rovnakej stránke a tiež vytvorte viacúčelové tabuľky.

TablePress

TablePress je fantastický plugin pre WordPress, ktorý vám umožní vytvárať a vkladať tabuľky do príspevkov, stránok a textových miniaplikácií pomocou krátkeho kódu. Tabuľky sú editovateľné v tabuľkovom rozhraní a môžu obsahovať všetky typy údajov vrátane vzorcov. Môžete tiež pridať funkcie, ako vyhľadávanie a triedenie a export dát do rôznych formátov.

Generovanie dátových tabuliek Supsystic

Dátové tabuľky Generátor pomáha pri vytváraní a správe tabuliek priamo z administrátorského panelu pomocou editora tabuľky frontend. Prekvapivo môžete tiež zahrnúť grafy a grafy vo svojich tabuľkách spolu s titulkami, hlavičkou a päte. Zaujímavosťou je, že tabuľky sú plne editovateľné a exportovateľné do formátu CSV, Excel alebo PDF.

Cenová tabuľka podľa Supysystic

Ďalším doplnkom Supsystic Pricing Table môžete vytvoriť cenové tabuľky bez akýchkoľvek prekážok. Môžeš vyberte šablónu, upravte cenový obsah a uverejnite ho vo svojom programe WordPress. Taktiež tabuľky vytvorené pomocou tohto pluginu sú na všetkých zariadeniach citlivé a elegantné.

Magic Liquidizer reagujúca tabuľka

Tabuľkový plugin pre WordPress, Magic Liquidizer Responsive Table transformuje akúkoľvek bežnú tabuľku do tabuľky citlivej pre mobilné zariadenia. Môžete vkladať obrázky, texty atď. Do svojich tabuliek a zobrazovať ich ako na všetkých zariadeniach - dokonca aj na tých, ktoré majú malé obrazovky.

Copytables

Kopírovateľné sú rozšírenie pre prehliadač Google Chrome, ktoré umožňuje kopírovať tabuľky z webových stránok. Môžeš vyberte bunky tabuľky, riadky alebo stĺpce na ľubovoľnej webovej stránke a priamo ich skopírujte .