Sidste gang jeg prøvede at tilføje en tabel til min WordPress-blog, endte jeg med at skrotte det hele og bruge en punktliste i stedet.

Lyder det bekendt?

Så mange fantastiske WordPress-temaer har mulighed for at skabe flotte tabeller. Og selvfølgelig ser de måske godt ud i starten, men du kan ikke gøre meget med dem.

Vil du have data, der kan filtreres? Nej.

Vil du have, at bordet skal være mobilvenligt? Niks.

Vil du importere data fra en CSV-fil? Ikke en chance.

Her er den gode nyhed:

Med det rigtige plugin kan du oprette meget funktionelle dynamiske tabeller, der giver dig mulighed for at vise data, der kan filtreres.

Sammen med grafer og alt muligt.

Lyder det godt? Lad os se på, hvordan det kan gøres med wpDataTables.

Bemærk: Selv om denne vejledning er fokuseret på interaktive tabeller, kan du måske også finde vores vejledning om at skabe mobile responsive tabeller med wpDataTables nyttig. Klik her for at tjekke den ud. Denne nye vejledning tager højde for den opdaterede brugergrænseflade og de ekstra funktioner, der for nylig er blevet frigivet i wpDataTables.

Med dette plugin kan du oprette smukke tabeller uden HTML-kendskab

wpDataTables er et premium WordPress-plugin, der gør det nemt at oprette og offentliggøre tabeller på dit websted. Det er let, intuitivt og klarer opgaven på få minutter, så du har mindre kode at rode dig igennem og mere tid til at blogge.

Et af de vigtigste punkter ved dette plugin er, at du behøver ikke nogen forudgående HTML-kendskab for at få den op at køre. Alt foregår på en brugervenlig indstillingsside. For at udgive er det blot at kopiere og indsætte en shortcode, og så er du klar.

For bloggere og virksomheder er det en god nyhed, fordi det giver dig mulighed for at vise masser af data på en kortfattet og let forståelig måde.

Du kan endda bruge den til:

• Et produktkatalog
• Sammenligningsdiagrammer for produkter
• Prislister
• Indsamling af data fra brugerne
• Sportsresultater
• Sporing af dine fremskridt for alt, der involverer tal (f.eks. en blogindkomstrapport)

Mulighederne er uendelige.

Oprettelse af et bord fra start til slut: en trin-for-trin-guide

Det er nemt at bruge wpDataTables-plugin'et til at oprette smukke, klare og fuldt funktionelle tabeller på dit WordPress-websted.

Sådan kommer du i gang:

Trin 1 - Hav din fil klar

Nedenfor har jeg lavet et Excel-dokument eksempel for en række tilfældige udgifter. Dette indeholder flere kolonner såsom dato, betalingsmetode og omkostninger.

Sørg for, at dine data vises på en lignende måde, ellers vil plugin'et have svært ved at definere kolonnerne i din tabel.

Trin 2 - Opret en ny tabel

Naviger til wpDataTables i venstre side af dit WordPress Dashboard.

Hvis du klikker på dette link, kommer du til ovenstående skærmbillede, hvor du opretter og tilføjer din nye tabel:

Når du har klikket på knappen "Tilføj ny", vises denne skærm. Det er her, du begynder at indstille parametrene for din tabel, så den fungerer og ser ud, som du vil have den:

Trin 3 - Definer dine bordfunktioner

I de første tre afsnit på siden for opsætning af tabellen kan du gøre følgende ting:

• Opret en titel
• Vælg, om du vil vise din tabeltitel på siden
• Vælg en type inputkilde til dit bord

Dette er den mest grundlæggende borddækning.

Klik på "Upload File" og søg efter dit dokument. De tabeller, du kan oprette, kan være lige så komplicerede, som du har brug for det.

Som du kan se, har jeg givet min tabel en relevant titel, valgt Excel-filtypen i rullemenuen og uploadet min fil til WordPress.

Længere nede på siden finder du flere indstillinger, som du kan tilpasse dit bord:

Det drejer sig om:

• Responsiv - Gør det muligt at vise dit bord forskelligt på desktops, tablets og mobiler
• Scrollbar - Du kan rulle dit bord vandret
• Skjul tabellen, indtil siden er fuldt indlæst - Nyttigt til sider, der indlæses langsomt
• Avanceret filtrering - Til visning af et filter under hver kolonne
• Filter i formularen - For et filter i selve formularen
• Bordværktøj - For indstillinger som kopiere, gemme til Excel og gemme til CSV, der er indlejret i din formular
• Aktiver sortering - Dette giver dig mulighed for at sortere dine tabeller
• Begrænse bordlayout - Begrænser tabellens bredde til 100 % af den overordnede container
• Visningslængde - Definer, hvor mange poster der skal vises på en side

Ved at klikke på "Preview" kan du se din tabel og ændre de indstillinger, du finder nødvendige for at få den til at se ud, som du ønsker.

Når du har valgt de indstillinger, der passer bedst til den type tabel, du ønsker at vise, er det tid til at klikke på knappen "Gem".

Hvis du ønsker at tilpasse dine kolonner yderligere, kan du rulle længere ned på siden for at få flere muligheder, når du har klikket på "gem". Standardindstillingerne genereres automatisk, men du kan ændre hver enkelt kolonnefarve, kolonne og filtertype (f.eks. dato, tid og tekst).

Nedenfor har jeg tilføjet nogle farver og ændret kolonnetyperne til tekst, tal og streng.

Trin 4 - Gem og kopier shortcode

Når du har gemt din tabel klikker du på "Luk" og du vil blive ført tilbage til plugin'ets hjemmeside. Du bør nu se din tabel du har oprettet, titlen og typen af din tabel, shortcode til indtastning i dit indlæg eller side og muligheden for at duplikere den.

Jeg ønsker at vise denne tabel på en side, og derfor skal jeg kopiere shortkoden og derefter navigere til den side, jeg ønsker at redigere.

Trin 5 - Tilføj en genvejskode til et indlæg eller en side

For at tilføje din tabel til en side er det lige så enkelt som at indsætte din genvejskode i sideeditoren. Vælg, hvor på siden du ønsker at vise din tabel, indsæt din kode, og fortsæt med at lave dit indhold:

Trin 6 - Offentliggør

Når du har trykket på udgivelsesknappen på din side, skal din tabel se nogenlunde sådan ud. Som du kan se, er den klar, konsistent, perfekt justeret og indeholder alle mine data på en nem måde at navigere i:

Valgmulighederne i toppen af tabellen giver brugerne mulighed for at eksportere tabellens indhold i forskellige formater. Du kan også filtrere resultaterne nemt i frontenden af dit websted.

Hvilke andre tabeller kan du oprette?

Du er dog ikke kun begrænset til simple CSV-baserede tabeller. WP Data Tables kan vise en lang række data i flere forskellige formater.

Her er et eksempel på en fuldt fungerende, responsiv og redigerbar tabel med flere kolonner og muligheder.

Denne tabel er MySQL-baseret med filtre til at sortere indholdet afhængigt af brugerens behov:

Denne PHP array-baserede tabel er serialiseret og indeholder billeder - dette tilføjer en helt anden dynamik og funktionalitet, som mange e-handelsbutikker vil finde særlig nyttig:

Du er heller ikke begrænset til CSV-filer alene. WP Data Tables tillader også brug af Excel-baserede filer, så du kan gøre brug af de mange specifikke funktioner, der følger med:

Andre wpDataTable-funktioner, der er værd at nævne

• wpDataChart-guiden - Giver dig mulighed for at omdanne dine data til en graf eller et diagram i nogle få nemme trin. Den understøtter i øjeblikket 3 rendermotorer - Google Charts, Highcharts og Chart.js. Find mere dokumentation her.
• Betinget formatering - Giver dig mulighed for at fremhæve celler, rækker og kolonner baseret på deres indhold. Det er især nyttigt, hvis tabellen er helt numerisk. Find mere dokumentation her.
• Formel kolonner - Gør det muligt at tilføje en kolonne, som kan bruges til at beregne et tal baseret på tallene i andre celler. Find mere dokumentation her.
• Datotidssøjler - Bruges til celler, der både indeholder datoer og tidspunkter. De vises automatisk i det format, du har indstillet på indstillingssiden. Find mere dokumentation her.
• Sum/totaler række - Bruges til numeriske kolonner og giver dig mulighed for at beregne summen af alle værdierne. Find mere dokumentation her.
• Rapportbygger - Er en tilføjelse til wpDataTables. Report Builder opretter øjeblikkeligt dokumenter og regneark, der fylder dine skabeloner med faktiske data fra dit WordPress-websted. Find mere dokumentation her.
• Master-detaljeringstabeller - Er en tilføjelse til wpDataTables, som giver dig og dine besøgende på webstedet mulighed for at se detaljer for hver række med et enkelt klik. Find mere dokumentation her.

Sidste tanker

Tabeller er en fantastisk måde at vise data på, og når du tilføjer dynamiske funktioner som f.eks. filtrering, gør du det hele meget bedre for de besøgende på dit websted.

Jeg har gennemgået, hvordan du kan oprette en dynamisk tabel i WordPress ved at uploade data fra Microsoft Excel (eller ved hjælp af et andet regneark). Men der er meget mere muligt.

Du kan endda omdanne alle dine tabeller til diagrammer eller grafer og meget mere.

Nu er det tid til at gå i gang med at lave dit eget bord - god fornøjelse!

Relateret læsning: 5 kraftfulde og mobilvenlige bordplugins til WordPress.

Offentliggørelse: Dette indlæg er sponsoreret, men vores meninger er vores egne.