• Finalist Infinity Blog Award banner

Stap 15 – Tabellen

Laatste update: 3 maart 2019

Tabellen worden gebruikt om data te stroomlijnen. Het geeft je de mogelijkheid data te plaatsen in rijen en kolommen, net als een spreadsheet. In het verleden werden tabellen gebruikt om hele websites vorm te geven. Elke cel werd gevuld met een deel van het ontwerp of content. Bij elkaar werd het dan een geheel, maar nu biedt CSS allerlei geweldige manieren om dit te doen.

Laten we een nieuw bestand maken genaamd tabel.html:

<html>
<head>
<title>mijn eerste tabel</title>
</head>
<body>
<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td>Maandag</td><td>12:30</td><td>Tandarts</td></tr>
<tr><td>Dinsdag</td><td>20:00</td><td>Feestje bij Sam's</td></tr>
<tr><td>Woensdag</td><td>10:15</td><td>Kleding ophalen bij stomerij</td></tr>
<tr><td>Donderdag</td><td>16:00</td><td>Deadline logo design</td></tr>
<tr><td>Vrijdag</td><td>22:00</td><td>Drankje met vrienden</td></tr>
</table>
</body>
</html>

TABLE-tag

Een TABLE-tag wordt altijd geopend en gesloten. Wij hebben de onze dus geopend met <table> en gesloten met </table>.

Er zijn een boel attributen, die in het voorbeeld niet gebruikt worden, maar hieronder wel beschreven. Op dit moment, worden tabellen veelal gebruikt om data uit een database weer te geven. Een script- of programmeertaal zal de data ophalen en dit in het tabel plaatsen. Daardoor wordt het stylen van het tabel vooral met CSS gedaan. Je kunt het echter wel stylen met HTML, maar al onderstaande attributen worden niet meer ondersteund vanaf HTML5.

Border

<table border="1" bordercolor="#000000">

Met BORDER kun je aangeven hoe dik de rand van de tabel moet zijn. In dit geval 1 pixel. Daarnaast is hiermee de standaard kleur van de rand veranderd van grijs naar zwart door middel van de BORDERCOLOR-attribute.

Achtergrondkleur

Het attribuut BGCOLOR, die we ook gebruikten in de BODY-tag, kan ook hier ingezet worden. Hieronder stel ik het voor het tabel in op wit. Dit geldt dan voor het hele tabel. Je kunt deze attribuut echter ook inzetten voor een rij of kolom. Dan verschuif je hem naar de <TR> of <TD> tag. Verder onderaan de pagina kun je hier voorbeelden van zien.

<table bgcolor="#FFFFFF">

Ruimte tussen cellen

<table cellspacing="0" cellpadding="0">

Met de optionele CELLPADDING-attribuut kun je de witruimte binnen cellen vergroten of verkleinen, of uitschakelen zoals hierboven. Met CELLSPACING kun je de ruimte tussen de cellen vergroten of verkleinen. In dit geval is ook dit uitgezet. Alle kolommen zullen nu elkaar raken, zonder enige ruimtes ertussen.

Je gebruikt hier nu dus de margin en padding functies van CSS voor.

Breedte 

Het is mogelijk een breedte in te stellen voor het tabel. De waarden zijn in pixels

<table width="500">

Of in een percentage:

<table width="50%">

Door percentages te gebruiken zal de grootte van de tabel zich aanpassen op de grootte van het beeldscherm, dat op zijn beurt wordt bepaald door de resolutie van het beeldscherm.

Rijen en kolommen

Elk tabel heeft cellen nodig, die je maakt door rijen en kolommen in te stellen.

Met <TR> open je de regel van de tabel. TR staat voor Table Row (tabel rij). Een tabel wordt pas bruikbaar wanner een tabel row ook cellen bevat. Dit maak je als volgt aan:
<table>
<tr><td>
</td></tr>
</table>

De TD-tag staat altijd tussen de TR-tag. TD staat voor Table Data. De naam zegt al dat je daar je data kwijt kan.

Je kunt in een tabel zoveel rijen maken als je wilt en een rij mag zoveel cellen bevatten als je wilt. Wel zul je merken dat je beperkt wordt door de grootte van de inhoud en de breedte van het scherm.

In ons voorbeelddocument hebben we meer tags gebruikt voor een tabel. Dit is waar ze allemaal voor staan:

<tr> = table row, opent een rij
<th> = table header, opent een cel met een kop. Teksten die hierin geplaatst zijn worden gecentreerd en vetgedrukt
</th> sluit de kopcel
<td> = table data, opent een column met data
</td> sluit de datacel
</tr> sluit de rij

Er is echter nog meer dat je kunt doen.

Colspan en rowspan (ofwel samenvoegen)

<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td>Maandag</td><td>12:30</td><td>Tandarts</td></tr>
<tr><td>Dinsdag</td><td>20:00</td><td>Feestje bij Sam's</td></tr>
<tr><td>Woensdag</td><td>10:15</td><td>Kleding ophalen bij stomerij</td></tr>
<tr><td>Donderdag</td><td>16:00</td><td>Deadline logo design</td></tr>
<tr><td>Vrijdag</td><td>22:00</td><td>Drankje met vrienden</td></tr>
<tr><td>Zaterdag</td><td colspan="2">Helemaal niets!</td></tr>
</table>

Soms moet je het patroon van de kolommen doorbreken. Net als in Excel, kun je dan cellen samenvoegen. Hier gebruik je COLSPAN voor. Dat staat voor COLUMN SPAN. Hier geef je de waarde op over hoeveel kolommen dit cel breed moet zijn. In dit geval 2. Hierdoor hebben we een brede cel gemaakt over de breedte van 2 kolommen.

De COLSPAN-attribuut kun je gebruiken bij de <TD> en <TH>-tag.

Je kunt echter ook rijen samenvoegen:

<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td>Maandag</td><td>12:30</td><td>Tandarts</td></tr>
<tr><td>Dinsdag</td><td>20:00</td><td>Feestje bij Sam's</td></tr>
<tr><td>Woensdag</td><td>10:15</td><td>Kleding ophalen bij stomerij</td></tr>
<tr><td>Donderdag</td><td>16:00</td><td>Deadline logo design</td></tr>
<tr><td>Vrijdag</td><td>22:00</td><td>Drankje met vrienden</td></tr>
<tr><td>Zaterdag</td><td colspan="2" rowspan="2">Helemaal niets!</td></tr>
<tr><td>Zondag</td></tr>
</table>

Met ROWSPAN geef je aan hoeveel rijen deze cel moet omvatten. In dit geval 2 rijen. Op de rij met de plannen voor zaterdag, hebben we ook meteen de zondag ingevuld.

Uitlijnen

Let op! Dit wordt in HTML5 niet meer ondersteund. Je gebruikt dan CSS. Onderstaande wordt nog wel door browsers ondersteund.

Alle content van het tabel kan uitgelijnd worden door de ALIGN-attribuut. Deze kun je zowel toevoegen aan de TR- als de TD-tag. Wanneer je dit aan <TR> toevoegt, geldt het voor alle cellen op die rij. Wanneer je de waarde aan <TD> toevoegt geldt deze alleen voor die cel.

Voorbeeld:

<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr align="center"><td>Maandag</td><td>12:30</td><td>Tandarts</td></tr>
</table>

Dit centreert alle tekst in alle kolommen voor deze rij.

<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td>Maandag</td><td align="center">12:30</td><td align="center">Tandarts</td></tr>
</table>

Je kunt de volgende posities gebruiken:

ALIGN=LEFT voor links
ALIGN=RIGHT voor rechts
ALIGN=CENTER voor gecentreerd

Verticaal uitlijnen

Ook kun je verticaal uitlijnen. Dit is het beste te zien bij cellen waarbij we een rowspan of colspan hebben ingesteld:

<table>
<tr><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td>Maandag</td><td>12:30</td><td>Tandarts</td></tr>
<tr><td>Dinsdag</td><td>20:00</td><td>Feestje bij Sam's</td></tr>
<tr><td>Woensdag</td><td>10:15</td><td>Kleding ophalen bij stomerij</td></tr>
<tr><td>Donderdag</td><td>16:00</td><td>Deadline logo design</td></tr>
<tr><td>Vrijdag</td><td>22:00</td><td>Drankje met vrienden</td></tr>
<tr><td>Zaterdag</td><td colspan="2" rowspan="2" valign="top">Helemaal niets!</td></tr>
<tr><td>Zondag</td></tr>
</table>

Nu worden de plannen voor het weekend niet meer automatisch in het midden van het kolom geplaatst, maar bovenaan.

Je hebt deze opties voor verticaal uitlijnen:

VALIGN=TOP voor bovenaan
VALIGN=BOTTOM voor onderaan

Achtergrondkleuren

Het attribuut BGCOLOR, die we ook gebruikten in de BODY-tag, kan ook per regel of kolom ingezet worden.

<table>
<tr bgcolor="#f4e842"><th>Dag</th><th>Tijd</th><th>Afspraak</th></tr>
<tr><td bgcolor="#e2f8ff">Maandag</td><td>12:30</td><td>Tandarts</td></tr>
<tr><td bgcolor="#e2f8ff">Dinsdag</td><td>20:00</td><td>Feestje bij Sam's</td></tr>
<tr><td bgcolor="#e2f8ff">Woensdag</td><td>10:15</td><td>Kleding ophalen bij stomerij</td></tr>
<tr><td bgcolor="#e2f8ff">Donderdag</td><td>16:00</td><td>Deadline logo design</td></tr>
<tr><td bgcolor="#e2f8ff">Vrijdag</td><td>22:00</td><td>Drankje met vrienden</td></tr>
<tr><td bgcolor="#bfedfc">Zaterdag</td><td colspan="2" rowspan="2">Helemaal niets!</td></tr>
<tr><td bgcolor="#bfedfc">Zondag</td></tr>
</table>

Met deze toevoegingen heb ik de kleuir van de header-kolommen geelgemaakt. Alle weekdagen zijn lichtblauw en de weekenden heb ik iets feller blauw gemaakt.

Achtergrondkleuren voor even en oneven regels

Het is ontzettend gebruikersvriendelijk om kleuren in tabellen te gebruiken. Vooral om even en oneven regels af te wisselen, zoals je ziet in het menu rechts op deze pagina. Dit wordt gedaan met CSS. Je zult aan moeten geven welke rij even en welke oneven is. Vervolgens koppel je aan ieder een eigen CSS-class, die ieder hun eigen kleur heeft.

Fonts in tabellen

Ook hiervoor gebruik je het beste CSS. Serieus, het is dan maar twee regels code en je bent klaar. Zou je toch de FONT-tag gebruiken, dan moet je ze in elke kolom zetten. Het zal niet over je hele tabel werken.

Tabellen nestelen

Het is met de TABLE-tag mogelijk om een tabel in een tabel te zetten, bijvoorbeeld:

<table>
<tr><td>
Table 1<br />
<table>
<tr><td>Table 2</td></tr>
</table>
</td></tr>
</table>

Zorg er hier wel voor dat je alle tags afsluit.

Troubleshooting

Als je problemen met tabellen hebt, zet de border aan. Dan zie je waarschijnlijk al bij welke regel het misgaat.

Naar stap 16

Bookmark the permalink.

Comments are closed.