• Spring naar de hoofdnavigatie
  • Door naar de hoofd inhoud
  • Spring naar de voettekst

+351 914 128 590

info@alva-design.com

  • Facebook
  • LinkedIn
  • Twitter
Alva Design

Alva Design

Webdesign, grafisch ontwerp en advies

  • Webdesign
    • Maatwerk website
    • Professional website
    • Starter website
    • E-mail nieuwsbrief
    • Hosting en onderhoud
  • Grafisch ontwerp
  • Advies
    • Website verbeteren
    • Zoekmachine optimalisatie (SEO)
    • WordPress hulp
    • Veel gestelde vragen
  • Portfolio
    • Websites
    • Nieuwsbrieven
  • Blog
Contact

Een tabel op je website is vaak niet nodig

Laatst bijgewerkt op 6 juli 2018 Reageer

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.

Bron: A Complete Guide to the Table Element

Category iconTips Tag iconHTML,  lijst,  semantisch,  tabel

In mijn blog geef ik gratis tips voor het verbeteren van je website. Wil je een e-mail ontvangen als er een nieuwe tip is? Meld je dan aan voor de nieuwsbrief.

Aanmelden

Lees Interacties

Geef een antwoord Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Kan ik je helpen bij jouw project?

Mail of bel me voor een gratis advies en prijsindicatie.

Neem contact op

Footer

Alva Design

Voor een professionele website met een design dat bij je past.

+351 914 128 590

info@alva-design.com

  • Webdesign
  • Grafisch ontwerp
  • Advies
  • Portfolio
  • Blog
  • FAQ
  • Wie?
  • Contact
  • Privacy
  • Cookie policy (EU)

Gratis tips voor je website

In mijn blog geef ik gratis tips voor het verbeteren van je website. Wil je een e-mail ontvangen als er een nieuwe tip is? Meld je dan aan voor de nieuwsbrief.

Aanmelden
  • Facebook
  • LinkedIn
  • Twitter

Copyright © 2022 Alva Design

Beheer cookie toestemming
Alva Design gebruikt cookies op deze website.
Functioneel Altijd actief
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Voorkeuren
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistieken
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Beheer opties Beheer diensten Beheer leveranciers Lees meer over deze doeleinden
Voorkeuren bekijken
{title} {title} {title}