De laatste keer dat ik probeerde een tabel toe te voegen aan mijn WordPress blog, schrapte ik het hele ding en gebruikte in plaats daarvan een opsommingstabel.

Klinkt dat bekend?

Zoveel prachtige WordPress thema's komen met de mogelijkheid om geweldig uitziende tabellen te maken. En zeker, ze kunnen er aanvankelijk goed uitzien, maar je kunt er niet veel mee doen.

Wil je filterbare gegevens? Nee.

Wil je dat de tafel mobiel responsief is? Nee.

Wil je gegevens importeren uit een CSV? Geen kans.

Hier is het goede nieuws:

Met de juiste plugin kun je zeer functionele dynamische tabellen maken, waarmee je gegevens kunt weergeven die je kunt filteren.

Samen met grafieken en zo.

Laten we eens kijken hoe dat kan met wpDataTables.

Let op: Hoewel deze tutorial gericht is op interactieve tabellen, vind je onze tutorial over het maken van mobiel responsieve tabellen met wpDataTables misschien ook wel nuttig. Deze nieuwe tutorial houdt rekening met de vernieuwde gebruikersinterface en extra functies die onlangs in wpDataTables zijn uitgebracht.

Met deze plugin kun je prachtige tabellen maken zonder enige HTML kennis

wpDataTables is een premium WordPress plugin die het maken en publiceren van tabellen op uw website een fluitje van een cent maakt. Het is licht, intuïtief en klaart de klus in enkele minuten, zodat u minder code hoeft door te worstelen en meer tijd overhoudt om te bloggen.

Een van de belangrijkste punten van deze plugin is dat je hebben geen voorafgaande HTML-kennis nodig Alles wordt gedaan in een gemakkelijk te gebruiken instellingenpagina. Om te publiceren is het gewoon een kwestie van kopiëren en plakken van een shortcode en je kunt aan de slag.

Voor bloggers en bedrijven is dit geweldig nieuws, omdat u hiermee veel gegevens op een beknopte en gemakkelijk te verteren manier kunt weergeven.

Je zou het zelfs kunnen gebruiken voor:

• Een productcatalogus
• Vergelijkingstabellen voor producten
• Prijslijsten
• Gegevensverzameling bij gebruikers
• Sportresultaten
• Uw vooruitgang bijhouden voor alles wat met cijfers te maken heeft (bijvoorbeeld een verslag over de inkomsten uit uw blog)

De mogelijkheden zijn eindeloos.

Een tabel maken van begin tot eind: een stap-voor-stap handleiding

De plugin wpDataTables gebruiken om mooie, duidelijke en volledig functionele tabellen te maken op je WordPress website is eenvoudig.

Dit is hoe je kunt beginnen:

Stap 1 - Houd uw dossier klaar

Hieronder heb ik een voorbeeld van een Excel-document gemaakt voor een aantal willekeurige uitgaven. Dit bevat verschillende kolommen zoals datum, betalingswijze en kosten.

Zorg ervoor dat je gegevens op dezelfde manier worden weergegeven, anders zal de plugin moeite hebben om de kolommen in je tabel te definiëren.

Stap 2 - Maak een nieuwe tabel

Navigeer naar de wpDataTables aan de linkerkant van je WordPress Dashboard.

Als u op deze link klikt, komt u in het bovenstaande scherm, waar u uw nieuwe tabel aanmaakt en toevoegt:

Nadat u op de knop "Nieuw toevoegen" hebt geklikt, krijgt u dit scherm te zien. Hier begint u met het instellen van de parameters van uw tabel, zodat deze functioneert en eruit ziet zoals u wilt:

Stap 3 - Definieer uw tafeleigenschappen

In de eerste drie secties van de tabelinstellingspagina kunt u de volgende dingen doen:

• Maak een titel
• Kies of u de titel van uw tabel op de pagina wilt weergeven
• Selecteer een type invoerbron voor uw tabel

Dit zijn de meest elementaire tafelschikkingen.

Klik op "Bestand uploaden" en zoek uw document. De tabellen die u kunt maken, kunnen zo ingewikkeld zijn als u wilt.

Zoals u kunt zien, heb ik mijn tabel een relevante titel gegeven, het type Excel-bestand geselecteerd in het uitklapmenu, en mijn bestand geüpload naar WordPress.

Verderop op de pagina vindt u nog meer instellingen om uw tabel aan te passen:

Dit zijn:

• Responsief - Laat uw tabel anders weergeven op desktops, tablets en mobiele telefoons
• Verschuifbare - Hiermee kunt u uw tabel horizontaal scrollen
• Verberg tabel tot pagina volledig geladen is - Nuttig voor traag ladende pagina's
• Geavanceerd filteren - Voor het weergeven van een filter onder elke kolom
• Filter in vorm - Voor een filter in het formulier zelf
• Tabel gereedschap - Voor opties zoals kopiëren, opslaan in Excel en opslaan in CSV in uw formulier.
• Sorteren inschakelen - Hiermee kunt u uw tabellen sorteren
• Tabelindeling beperken - Beperk de breedte van de tabel tot 100% van de bovenliggende container.
• Weergave lengte - Bepaal hoeveel items op een pagina worden weergegeven

Door op "Voorbeeld" te klikken, kunt u uw tabel bekijken en de instellingen wijzigen die u nodig acht om hem eruit te laten zien zoals u wilt.

Zodra u de opties hebt geselecteerd die het best passen bij het type tabel dat u wilt weergeven, is het tijd om op de knop "opslaan" te klikken.

Als u uw kolommen verder wilt aanpassen, kunt u, nadat u op "opslaan" hebt geklikt, verder naar beneden scrollen voor meer opties. De standaardinstellingen worden automatisch gegenereerd, maar hiermee kunt u elke kolomkleur, kolom en filtertype (zoals datum, tijd en tekst) wijzigen.

Hieronder heb ik wat kleuren toegevoegd en de kolomtypen bewerkt tot tekst, getal en string.

Stap 4 - Opslaan en kopiëren van de shortcode

Zodra je je tabel hebt opgeslagen klik je op "Sluiten" en je keert terug naar de homepage van de plugin. Je zou nu je tabel moeten zien die je hebt gemaakt, de titel en het type van je tabel, de shortcode om in je bericht of pagina in te voeren en de optie om hem te dupliceren.

Ik wil deze tabel weergeven in een pagina, daarom moet ik de shortcode kopiëren en vervolgens navigeren naar de pagina die ik wil bewerken.

Stap 5 - Voeg shortcode toe aan bericht of pagina

Om uw tabel aan een pagina toe te voegen, is het echt zo eenvoudig als het plakken van uw shortcode in de pagina-editor. Selecteer waar op de pagina u uw tabel wilt weergeven, plak uw code en ga verder met het maken van uw inhoud:

Stap 6 - Publiceren

Als je eenmaal op de publiceerknop van je pagina hebt gedrukt, zou je tabel er ongeveer zo uit moeten zien. Zoals je ziet is hij duidelijk, consistent, perfect uitgelijnd en bevat hij al mijn gegevens op een gemakkelijk te navigeren manier:

Met de opties bovenaan de tabel kunnen gebruikers de inhoud van de tabel in verschillende formaten exporteren. U kunt de resultaten ook gemakkelijk filteren op de voorkant van uw site.

Welke andere tabellen kun je maken?

U bent echter niet beperkt tot eenvoudige CSV-tabellen. WP Data Tables kan een breed scala aan gegevens in verschillende formaten weergeven.

Hier is een voorbeeld van een volledig functionerende, responsieve en bewerkbare tabel met meerdere kolommen en opties.

Deze tabel is gebaseerd op MySQL met filters om de inhoud te sorteren volgens de behoeften van de gebruiker:

Deze op PHP array gebaseerde tabel is geserialiseerd en bevat afbeeldingen - dit voegt een heel andere dynamiek en functionaliteit toe die veel e-commerce winkels bijzonder nuttig zouden vinden:

U bent ook niet beperkt tot alleen CSV-bestanden. WP Data Tables staat ook het gebruik van Excel-bestanden toe, zodat u gebruik kunt maken van de vele specifieke functies die daarbij horen:

Andere vermeldenswaardige functies van wpDataTable

• wpDataChart wizard - Hiermee kunt u uw gegevens in een paar eenvoudige stappen omzetten in een grafiek of diagram. Het ondersteunt momenteel 3 render engines - Google Charts, Highcharts en Chart.js. Meer documentatie vindt u hier.
• Voorwaardelijke opmaak - Hiermee kunt u cellen, rijen en kolommen markeren op basis van hun inhoud. Het is vooral nuttig als de tabel volledig numeriek is. Meer documentatie vindt u hier.
• Formule kolommen - Hiermee kunt u een kolom toevoegen waarmee u een cijfer kunt berekenen op basis van de getallen in andere cellen. Meer documentatie vindt u hier.
• Datetime kolommen - Wordt gebruikt voor cellen die zowel datums als tijden bevatten. Ze verschijnen automatisch in het formaat dat u op de instellingenpagina hebt ingesteld. Meer documentatie vindt u hier.
• Som/Totalen rij - Gebruikt voor numerieke kolommen, waarmee u de som van alle waarden kunt berekenen. Meer documentatie vindt u hier.
• Rapportagebouwer - Is een add-on voor wpDataTables. Report Builder creëert onmiddellijk documenten en spreadsheets die uw sjablonen vullen met actuele gegevens van uw WordPress site. Meer documentatie vindt u hier.
• Master-Detail Tables - Is een add-on voor wpDataTables waarmee u en uw sitebezoekers met een simpele klik de details van elke rij kunnen zien. Meer documentatie vindt u hier.

Laatste gedachten

Tabellen zijn een geweldige manier om gegevens weer te geven. En wanneer u dynamische functies toevoegt, zoals filteren, maakt u het voor de bezoekers van uw website een stuk beter.

Ik heb je laten zien hoe je een dynamische tabel in WordPress kunt maken door gegevens te uploaden vanuit Microsoft Excel (of een ander spreadsheetprogramma). Maar er is nog veel meer mogelijk.

U kunt zelfs al uw tabellen omzetten in grafieken en meer.

Nu is het tijd om aan uw eigen tafel te beginnen - geniet ervan!

Verwante lectuur: 5 Krachtige en mobiele tabel plugins voor WordPress.

Openbaarmaking: Dit bericht is gesponsord, maar onze meningen zijn onze eigen.