Het is goed om als webdesigner ook zelf te bloggen. Ik merk dat ik dan vaak probleempjes tegenkom waar mijn klanten ook mee tobben. Daarom heb ik veel plezier van mijn website Portugal Portal, ooit opgezet als oefenproject om van alles uit te proberen, inmiddels uitgegroeid tot een webmagazine over Portugal. Nu zijn er meer dan 20 columnisten en ben ik de eindredacteur. Ik redigeer elke week een aantal posts. Zo kwam ik laatst een post met een tabel tegen.
De tabel gaat over de documenten die nodig zijn bij het kopen van een huis in Portugal. Moet dit wel in een tabel? In Word gebruik je vaak tabellen voor iets waarvoor ze eigenlijk niet bedoeld zijn.
Wanneer gebruik je een tabel?
Tables are for tabular data. Hier zijn enkele voorbeelden: een overzicht van producten of prijzen, wedstrijduitslagen, personeelsgegevens, financiële data, een agenda, een voedingswaarde informatie tabel, de oplossing van een puzzel, etc.
Als je twijfelt of jouw data geschikt zijn voor een tabel, doe dan de spreadsheet test. Is het logisch om deze data in een spreadsheet te presenteren? Zo ja, dan is een HTML tabel de juiste keuze. Zo nee, overweeg dan een lijst of een ander element om de data te presenteren.
Semantisch
Op websites (en ook in Word) zie je nog vaak dat tabellen worden gebruikt voor voor het positioneren van elementen. Als je een 3-vlaks verhouding wilt, maak je een tabel met 1 rij en 3 cellen; simpel, en begrijpelijk. Maar niet semantisch.
HTML de code waaruit webpagina’s bestaan, is niet alleen bedoeld om een webpagina op een bepaalde manier weer te geven in de browser. HTML tags zeggen ook iets over de informatie die ze omsluiten. Zulke tags geven betekenis (semantiek) aan hetgeen ze omsluiten. Zo moeten de <table> </table> tags eigenlijk tabular data omsluiten. Tekst in een artikel moet opgedeeld zijn in <p>paragrafen</p> en een lijstje met links moet met een HTML lijst (<ul> of <ol>) gemaakt zijn.
Tabel of geen tabel?
Dit is de tabel. Op de laptop ziet hij er best goed uit.
Op de smartphone echter niet. En stel je voor wat er gebeurt als een tabel meerdere kolommen heeft.
Semantisch gezien is het beter om hier geen tabel te gebruiken, maar een opsommingslijst.
Dit ziet er bovendien op alle schermformaten prima uit.
Laptop:
Smartphone:
Bekijk het resultaat op Portugal Portal
Zijn jouw data wel geschikt voor en tabel? Dan lees je hier hoe je in WordPress een responsive tabel maakt.