HTML-tabellen vormen de ruggengraat van gestructureerde gegevens op internet. Ze zijn niet alleen meer voor spreadsheets. Je kunt ze vormgeven, kleuren en precies bepalen hoe ze ademen in een browservenster. De ouderwetse methode is gebaseerd op specifieke presentatiekenmerken. Ze werken. Ze zijn direct. Je hebt geen complexe CSS-frameworks nodig om een fatsoenlijk ogende lay-out te krijgen.
De achtergrondkleur van de tabel wijzigen
Begin met het grote geheel. Wil je dat het hele raster eruit springt? Je hebt geen apart stylesheet nodig. Plaats gewoon een bgcolor attribuut op de openingstag
.
Voorbeeld:
Dit zet het toneel. Elke cel erft die sfeer, tenzij je deze negeert.
Je kunt ook inzoomen. Kleur een enkele rij of slechts één specifieke cel. Plaats bgcolor="color" in de tag
of
| .
Voorbeeld:
|
Het is een klein detail. Maar het verandert de manier waarop het oog door de gegevens beweegt.
Tabelgrootte
Browsers zijn standaard lui. Ze breiden rijen en kolommen uit zodat ze bij de inhoud passen. Als uw gegevens kort zijn, wordt de tabel uitgerekt om het venster te vullen. Als het lang is, wordt het lang.
Soms wil je controle. U wilt vaste afmetingen.
Voeg width en height toe aan de starttag
. U kunt pixels of percentages gebruiken.
Voorbeeld:
Pixels geven je harde grenzen. Percentages laten de tabel ademen met de viewport. Welke u kiest, hangt af van uw ontwerpdoelen.
U kunt ook individuele cellen vergrendelen. Voeg width="value" toe aan een
of
| tag. Dit heeft voorrang op de algemene instelling voor die specifieke plek.
Experiment. Probeer een pixelwaarde. Probeer dan een percentage. Kijk hoe het op verschillende schermen breekt of bij elkaar blijft.
Mobiele opvulling
Ruimte is ontwerp. Met name de ruimte tussen de rand van een cel en de tekst erin.
Dit is ‘cellpadding’. Er is een pixelwaarde voor nodig.
Gebruik het in de starttag
.
Voorbeeld 1:
Voorbeeld 2:
Vijf pixels is krap. Vijftien is luchtig. De inhoud voelt anders. Het ziet er schoner uit met meer vulling.
Celafstand
Dan is er de opening tussen de cellen.
Dit is ‘celafstand’. Er is ook een pixelwaarde voor nodig.
Voeg het toe aan de
-tag.
Voorbeeld 1:
Voorbeeld 2:
Een kleine celafstand zorgt ervoor dat het raster compact aanvoelt. Een grote laat het lijken op een checklist.
Tabelkoppen
Gegevens hebben structuur nodig. Headers zorgen daarvoor.
Om een kolom of rij als kop te laten opvallen, vervangt u
door
| in de eerste rij.
De tekst wordt automatisch vetgedrukt. Het centreert het ook.
Voorbeeld:
| | |
