35 Værktøjer, scripts og plugins til at opbygge smukke HTML-tabeller

Data visualisering er nøglen til bedre forståelse af omfangsrig eller kompliceret information. Der er mange måder at visualisere dine data dvs. du kan designe kølige infografier eller oprette interaktive diagrammer ‐ det hele afhænger af dine data og hvordan du vil præsentere det.

Men min dags post er udelukkende på emnet tabeller og nogle virkelig nyttige ressourcer til at oprette forskellige typer af tabeller. Her er 35 tips, værktøjer, scripts og plugins, der kan hjælpe dig med at oprette en række forskellige tabeller for at præsentere dine data. Så lad os fortsætte med at diskutere hver ressource i detaljer.

Tabel jQuery uddrag

Disse Handy uddrag sammen med nemme forklaringer hjælpe dig med at udvikle interaktive tabeller. Disse uddrag giver f.eks. Mulighed for at tilføje rækker dynamisk, hente cellernes værdier mv.

Styling Tables

Et sæt tips og tricks, der hjælper med at effektivisere dine tabeller ved at forbedre deres layout, typografi, tekstjustering og meget mere. Desuden fortæller det også om Tilføj farver og grafik og tilpasse billedtekster sammen med andre aspekter af bordet.

Ingen flere borde

Et uddrag, der hjælper dig med at oprette mobil responsive tabeller, der viser hver række separat på små skærme. Du kan også ændre farve, skrifttype og skriftstørrelse mv ved hjælp af CSS.

Scroll-stand Tabel Body

Dette trick kan gøre din bordskrop scrollbar - en funktion findes i de fleste regnearkværktøjer som Google Sheets. Det betyder, at du kan Løs tabelhovedet, og bordlegemet eller indholdet ruller, som normalt gør bordet mere synligt end tidligere.

Fast tabeloverskrift

Et andet trick som over en, Fast Table Header hjælper med at lave et bord med et fast overskrift og scrollbart indhold. Du kan Tilpas bordet, herunder farver og skrifttyper, men dette trick er ikke så detaljeret og forklaret som Scroll-able Table Body.

Pure CSS Table Highlight

Et simpelt trick, der lader dig fremhæv en bestemt celle på svømmeren - lodret såvel som vandret. Endelig kan finalebordet tilpasses med brugerdefinerede farver og skrifttyper. Jeg finder dette trick er mest nyttigt, når du skal vise tal på bordet.

TABLEIZER!

TABLEIZER! er et online værktøj, der giver dig mulighed for Opret almindelige tabeller i HTML ved hjælp af data fra Excel, Google Sheets, eller et andet regnearkværktøj. Du kan også tilpasse finalebordet ved hjælp af CSS, ligesom enhver anden tabel i HTML.

HTML Tabel Generator

HTML Table Generator er en simpel bord generator, der hjælper dig opret og tilpasse næsten alle aspekter af bordet ved hjælp af skærmindstillinger. Hvad jeg kan lide er at du kan oprette en tabel manuelt, uploade en CSV-fil eller importere data fra et regnearkværktøj som Excel. Du kan også style bordet ved at vælge et tema fra sit sæt skabeloner.

Quackit HTML Tabel Generator

En anden online tabel generator, der hjælper dig med at oprette tabeller med et sæt customizability muligheder. Styling indstillinger omfatter størrelse, farve, grænse, osv. dog mulighed for at importere data mangler, i modsætning til ovenstående tabel generator.

Rapid Tables HTML Table Generator

HTML Table Generator ved Rapid Tables er endnu et værktøj som ovenstående to værktøj. Det giver flere tilpasningsmuligheder end det ovennævnte værktøj, som størrelse, kant, farve, justering og nogle flere. Men som det ovennævnte værktøj understøtter det kun Opret bordet manuelt og tillader ikke at importere filer eller tag data fra et regnearkværktøj som Google Dokumenter.

HTML Table Styler

Et bord tilpasningsværktøj, HTML Table Styler, lader dig style dine tabeller ved hjælp af on-screen muligheder, der genererer CSS til din tabel i HTML. Dette værktøj viser overraskende et levende eksempel på bordet, så du kan teste og prøve stylingsindstillingerne. Det tilbyder også temaer til hurtig styling af et bord, som du også kan tilpasse.

Konverteringsværktøjer

Konverteringsværktøjer er en nyttig hjemmeside til enhver, der beskæftiger sig med tabeller og regneark på daglig basis. Det hjælper dig med at konvertere et HTML-bord til en CSV-fil, en Excel-fil til en HTML-tabel, en Excel-fil til en CSV-fil og gøre mange flere konverteringer.

HTML tabel til Div Converter

Et online konverteringsværktøj gør det muligt at konvertere traditionelle tabeller til div tabeller, dvs. tabeller oprettet ved hjælp af div-elementer. Alt du skal gøre er at kopier og indsæt et bord på sin side og tryk på konverter knappen for at generere en div tabel.

Handsontable

Handsontable er en innovativ regnearkkomponent til webapps Det giver dig mulighed for hurtigt at udvikle og tilbyde regneark i dine apps. Det tilbyder en bred vifte af funktioner som støtte til flere rammer, høj ydeevne med masser af data, nødvendige funktioner som søgning, filtrering osv., så udviklere kan bygge hurtigt.

Dynatable.js

En interaktiv tabel plugin, Dynatable.js bruger HTML, jQuery og JSON til at oprette tabeller og andre tabellignende strukturer. Du kan oprette tabeller direkte fra JSON og inkorporere alle vigtige funktioner som søgning, filter, optælling og pagination.

Bootstrap Table

Bootstrap Table er en udvidet version af bordet, der tilbydes med Bootstrap. Det minimerer din tid og kræfter ved at oprette tabeller og giver et lydhørt design. Det bringer funktioner som Rulerbare og faste headers og funktioner som sort, pagination, etc.

List.js

List.js er et simpelt og kraftfuldt JavaScript-plugin, som lader dig oprette lister og tabeller med fleksibilitet og funktionelle funktioner som filter, søgning og sortering, osv. Jeg kunne godt lide at den er bygget ved hjælp af vanilla JavaScript, så du behøver ikke noget tredjepartsbibliotek.

JExcel

jExcel er et let jQuery-plugin, som giver dig mulighed for integrere et regneark, der er kompatibelt med Excel på din webside. Plugin hjælper med at oprette et Excel-lignende bord, så du kan flytte, ændre størrelse, kopiere, indsætte og gøre meget mere med arkdata.

DataTables

Et super fleksibelt plugin til jQuery, Datatabeller giver dig mulighed for at tilføje avancerede interaktionskontroller til ethvert HTML-bord. Det hjælper dig med at tilføje pagination, søgefunktion, temaer osv. Det giver også et stort antal udvidelser for at tilføje flere funktioner.

jQuery Bootgrid

jQuery Bootgrid er et slankt og intuitivt plugin til at oprette og administrere grids som tabeller. Det giver funktioner som søgning, pagination osv. Sammen med tilpassede skabeloner.

jQuery-Tabledit

jQuery-Tabledit er en online-editor til Bootstrap-kompatible HTML-tabeller, der lader brugerne redigere data i tabellerne. Du kan give knapper for at skifte mellem visning og redigeringstilstand, inkludere slet og gendan knapper og tilpass tabellerne ved hjælp af CSS.

jsGrid

jsGrid er et let jQuery-plugin, som hjælper Opret og administrer datanet. Den understøtter forskellige operationer på net, såsom filtrering, personsøgning, sortering osv. Det lader dig også tilpasse bordets udseende og støtter internationalisering såvel.

Smart tabel

Et robust bibliotek, Smart Table hjælper dig med at omdanne ethvert HTML-bord til en smartere med muligheder som filtrere, søge, sortere, osv. Det er kombineret med flere funktioner til at hjælpe med at opbygge et nyttigt og professionelt udseende bord eller datanet med dens plugins.

HighchartTable

HighchartTable automatisk konverterer HTML-tabeller til diagrammer og grafer. Det er ideelt at repræsentere projektanalyser og statistikker i grafer sammen med numeriske data i tabeller.

TableExport

TableExport er et simpelt bibliotek til eksporter en HTML-tabel til CSV-, TXT- eller Excel-filer. Ved hjælp af dette bibliotek kan du nemt opbygge tabeller med eksport-til-fil-funktionen.

tabulator

Tabulator er et jQuery-plugin til skabe interaktive tabeller fra HTML-tabel, JavaScript-array, JSON osv. Det understøtter næsten alle standardtabelfunktioner som søgning, sortering, filter osv. og tilbyder mange funktioner som f.eks. temaer, tilbagekald og lokalisering.

FancyGrid

FancyGrid giver dig mulighed for at oprette smukke borde sammen med diagrammer og grafer. Den understøtter mange datakilder, herunder JSON, indeholder forskellige funktioner som sortering, søgning, osv., Tillader tema og modularisering, og bringer mange flere funktioner.

KingTable

KingTable lader dig bygge administrative tabeller med minimumskodning. Den leveres med en bemærkelsesværdig mængde funktioner, herunder klient- eller server-side søgning, sortering, filter og mere almindelige funktioner. Du kan tilpasse udseendet på bordet, Tilføj tilpassede filtre, og eksporter dataene til forskellige formater som CSV, JSON og Excel.

stacktable.js

Et jQuery-plugin til tabeller, stacktable.js lader dig konvertere et bredt udbredt bord til en 2-kolonne nøgle / værdi tabel. Det er en ideel løsning til visning af store borde på små skærme som mobilenheder. Du kan også stable rækker eller kolonner efter behov.

Tabella.js

Tabella.js hjælper dig med at opbygge lydhurtige tabeller med faste overskrifter og scrollbare data - selv vandret, så de indeholder mange mange kolonner end normalt. Desuden kan du inkludere flere tabeller på samme side og også oprette multifunktionelle tabeller.

TablePress

TablePress er et fantastisk plugin til WordPress, der lader dig oprette og indlejre tabeller i indlæg, sider og tekst widgets ved hjælp af en kortkode. Tabellerne kan redigeres i en regnearklignende grænseflade og kan indeholde alle typer data inklusive formler. Du kan også tilføje funktioner som søgning og sortere og eksportere data til forskellige formater.

Datatabeller Generator af Supsystic

Data tabeller Generator hjælper med at oprette og administrere tabeller direkte fra admin panel ved hjælp af en frontend tabel editor. Overraskende kan du også medtage diagrammer og grafer i dine tabeller sammen med billedtekster, header og footer. Hvad jeg finder mere interessant er, at tabellerne kan redigeres og eksporteres til CSV-, Excel- eller PDF-formater.

Prissætningstabel af Supsystic

Et andet plugin fra Supsystic, prissætningstabellen giver dig mulighed for at oprette prisborde uden forhindringer. Du kan vælg en skabelon, rediger prisindholdet og offentliggør det på din WordPress. Også de tabeller, der oprettes ved hjælp af dette plugin, er lydhøre og elegante på alle enheder.

Magic Liquidizer Responsive Table

En tabel plugin til WordPress, Magic Liquidizer Responsive Table forvandler ethvert almindeligt bord til et mobil-responsivt bord. Du kan indsætte billeder, tekster mv i dine tabeller og vise dem som på alle enheder - selv dem med små skærme.

Copytables

Copytables er en udvidelse til Google Chrome, der gør det muligt at kopiere tabeller fra websider. Du kan vælg tabelceller, rækker eller kolonner på en webside og kopier dem direkte .