Een responsieve tabel maken in WordPress

Een responsieve tabel maken in WordPress

In de begindagen van het bouwen van websites, tabellen werden voornamelijk gebouwd voor desktopweergave, waar schermruimte overvloedig was. Toen websites steeds meer complexe gegevens begonnen te bevatten, werden tabellen een populaire manier om grote hoeveelheden informatie netjes te ordenen. 

Met de opkomst van mobiel gebruik werd de behoefte aan responsieve tabellen van vitaal belang. Steeds meer gebruikers bekeken websites op telefoons en tablets, waar traditionele tabellen frustraties opwekten doordat ze horizontaal moesten scrollen of zoomen om de inhoud te kunnen lezen.

Tegenwoordig zijn responsieve tabellen niet alleen handig; ze zijn essentieel voor SEO en toegankelijkheid, vooral met Google's mobiel-eerst indexering. Hoewel het standaard Tabelblok van WordPress geen ingebouwde responsiviteit heeft, heb je methoden zoals CSS-aanpassingen of plugins nodig om dat probleem op te lossen. 

In deze handleiding behandelen we de eenvoudigste manier om voor mobiele apparaten geoptimaliseerde tabellen te maken in WordPress met behulp van een plugin.

Stap 1: De Tableberg-plugin installeren en activeren

De eerste stap is eenvoudig. Ga naar je WordPress Dashboard en navigeer naar Plugins > Nieuwe toevoegen. Zodra je daar bent, typ je Tafelberg en zoek de plugin. Zodra je het hebt gevonden, klik je op Nu installeren. Na de installatie hoeft u alleen nog maar Activeer het. Klik op Activeren om de plugin in te schakelen op je site.

De Tableberg-plugin installeren en activeren

Stap 2: Een nieuwe tabel maken met Tableberg

Klik in je WordPress Editor op de knop plus (+) pictogramzoeken naar Tafelbergen voeg dan het Tableberg-blok toe. 

Een nieuwe tabel maken


Kies het aantal rijen en kolommen voor je tabel en klik op de knop Maken. Voor deze tutorial hebben we gekozen voor een tabel met 4 rijen en 5 kolommen. 

Rijen en kolommen selecteren

Stap 3: Gegevens toevoegen aan uw tabel

Na je tabel makenkom je in de tabeleditor, waar je inhoud aan elke cel kunt toevoegen. Klik op een cel, tik op de plusteken (+), Typ het gewenste blok en ga verder met het invoeren van tekst, afbeeldingen, lijsten, sterbeoordelingen, knoppen of wat dan ook dat aan uw eisen voldoet. 

Gegevens toevoegen aan je tabel

Stap 4: Responsieve instellingen inschakelen

Om ervoor te zorgen dat je tabel goed wordt weergegeven op alle apparaten, biedt Tableberg een gestructureerde Responsiviteitsinstellingen sectie. Selecteer eerst de ouderbloknaar de instellingen aan de rechterkant van de editor en scroll naar beneden om de optie Responsiviteitsinstellingen

Responsiviteitsinstellingen zoeken

Kies vervolgens het apparaat waarvoor je de responsiviteit wilt configureren. Boven aan het paneel Responsiviteitsinstellingen zie je opties voor Desktop, Tableten Mobiel. Selecteer het apparaat dat je wilt aanpassen, omdat dit zal bepalen hoe de tabel zich gedraagt op die specifieke schermgrootte. Hier hebben we Mobiel geselecteerd. 

Apparaat selecteren

Schakel de optie Breakpoint inschakelen optie om responsief gedrag te activeren voor het gekozen apparaat. Met deze instelling kan de tabel responsieve aanpassingen toepassen wanneer de schermbreedte op of onder de waarde ligt die je hebt ingesteld in Max Breedte. Als je bijvoorbeeld Max. breedte instelt op 1024px, past de tabel zich aan op schermen die smaller zijn dan 1024px. Onder deze instelling vind je de instelling Make Bovenste rij koptekst optie die de eerste rij van je tabel als koptekst aanwijst en specifieke stijlen of opmaak toepast om deze van andere rijen te onderscheiden.

Schakel Breakpoint in en kies de Max. breedte

Gebruik tot slot de Modus optie om te kiezen hoe de tabel zich gedraagt op kleinere schermen. Je kunt Scroll om horizontaal scrollen mogelijk te maken en gebruikers door de tabel te laten vegen als deze te breed is. Je kunt ook kiezen voor Stapel om de tabelinhoud verticaal te herschikken. Bij gebruik van de Stack-modus zijn er extra opties zoals Stapel Richting kun je de stapelrichting regelen en Items per rij Hiermee kun je instellen hoeveel items er per rij moeten verschijnen voor meer maatwerk voor kleinere schermen.

Selecteer modus

En klaar is kees: je tabel is helemaal klaar om te schitteren op schermen van elk formaat. Publiceer hem en laat je gegevens soepel stromen op desktops, tablets en telefoons!

Conclusie

Responsive tabellen zijn niet zomaar een feature, ze zijn een must-have in de WordPress wereld van vandaag. Met Tableberg, heb je traditionele tabellen veranderd in iets dat zich aanpast, buigt en schittert op elk scherm. Je site biedt nu een schonere, toegankelijkere manier om gegevens te presenteren, of je ze nu bekijkt op een desktop, tablet of telefoon. U kunt afscheid nemen van lompe schermen en hallo zeggen tegen een gebruikerservaring die net zo soepel stroomt als uw inhoud. Uw publiek zal blij zijn met de upgrade en zoekmachines ook.



Het Tableberg-team