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.
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.
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.
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.
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.
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.
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.
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.
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.
