Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
—Richard Rutter

Tabellen

Voorstellen van data (uurrooster, menu, openingsuren, kalender enz)
table, thead, tbody, tfoot
rijen (tr) met daarin cellen (td)
cellen samennemen met rowspan en colspan
verouderde attributen (vervangen door CSS zie film)

Intro

Dit stukje HTML kan je zonder problemen overslaan en er pas op terugkomen als je ergens in je site / app data in een tabel moet presenteren. Tabellen maken is altijd veel werk en het vereist heel wat code, maar soms dwingt je data je om ze voor te stellen in tabelvorm. Tabellen responsief maken (zie later RWD bij CSS) is bovendien een hele uitdaging!

Wanneer een tabel gebruiken?

bookcover creating killer websites 1997 Het oudste boek in mijn verzameling van HTML, CSS en JS boeken is er eentje dat ik me niet zie weggooien (wat ik wel al dikwijls deed met verouderde boeken …): David Siegel's “Creating Killer Web Sites” uit 1997.

CSS bestond nog niet. HTML was heel beperkt. Het maken van een website was een pijnlijk proces dat ondermeer van volgende technieken gebruik maakte:

Om een blokje naar rechts of onder te verschuiven (margin bestond nog niet!) gebruikte je een transparante afbeelding van 1 pixel op 1 pixel. Deze img kon je dan uitrekken met de attributen width of height.
Een wat moeilijker lay-out werd in stukken geknipt (soms letterlijk in photoshop). Elk van deze blokjes werd dan een cel in een tabel. Pech als je iets wou veranderen, want dan moest je het hele proces opnieuw doorlopen.

De dagen dat HTML-tabellen gebruikt werden voor lay-outredenen zijn gelukkig voorbij. Gebruik nu enkel een tabel voor … euh … tabelinformatie. Denk hierbij aan een uurrooster, menu, uitslagen van een competitie enz.

Student Sander maakte een overzicht van zijn doelpunten als spits:

Een table is het juiste element voor dit soort van informatie. We zien later in CSS grids, maar dat is iets anders. Een grid is een lay-outmechanisme in CSS waarmee je blokjes in rijen en kolommen kan plaatsen. Een HTML-tabel heeft echter semantiek, betekenis. Alle info in één rij betekent iets en hoort qua betekenis samen. Zo zie je in de bovenstaande tabel dat 2018 voor Sander als spits een productief jaar was, met 35 doelpunten in 30 wedstrijden. Ook als je één kolom bekijkt, heb je betekenisvolle informatie.

Een screenreader van een blinde bezoeker kan deze betekenis in rijen en kolommen voorlezen.

Table element

Volgend filmpje valt uiteen in twee delen: eerst wordt de opbouw van een tabel in HTML uitgelegd. De maker zegt verschillende keren hoe bepaalde dingen in HTML kunnen gedaan worden (met attributen), maar dat die verouderd (‘deprecated’) zijn en dat we dat nu in CSS doen. Halverwege het filmpje werkt hij een voorbeeld uit en daar komt wel wat CSS bij kijken. Dat deel kan je dus eerst overslaan als je CSS nog niet bekeken hebt.

Een goed overzicht over het table element vind je op Mozilla Developer Network.