Werken met tabellen

Bron: http://www.sceneone.nl/tips_tricks/tabellen.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Ik keer mezelf op deze website regelmatig tegen het werken met tabellen. Tabellen zijn oud en 'out'. Verleden tijd, doen we niet meer, been there, done that.
Zand erover.

Dus toch?

Maaaaaaarrrrrrrrr.
Wat ik vast en zeker ook wel heb eens gezegd is dat tabellen prima gebruikt kunnen worden om tabulaire data te structureren en presenteren.

Sterker nog. Als je tabulaire data, of in het engels tabular data in een pagina wilt verwerken móet je daar een tabel voor gebruiken. Als je dat niet doet maak je het jezelf erg lastig. Hoe wil je die gegevens structureren als je geen tabel gebruikt?

Als je jezelf afvraagt wat dan precies tabulaire data is, dan moet je even geduld hebben. Dat wordt zo duidelijk.

Voorbeeldje

Wat ik eigenlijk nooit doe is laten zien hoe het níet moet. Ik laat altijd voorbeelden zien van hoe je iets wél goed doet.
Maar omdat tabellen zo'n weerbarstig eigen leven zijn gaan leiden laat ik eerst even zien hoe je de markup (=HTML) van tabellen vaak ziet en wat daar mis mee is:

HTML: <table border="0" cellpadding="5" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Wat is hier mis mee?

Wat is er dan mis met bovenstaand stukje code? Het produceert een prima tabel en doet precies wat je ervan verwacht, dus.....

Da's waar, maar toch is het niet helemaal wat we zouden willen. Om te beginnen zitten er een aantal zaken in die niet thuishoren in de HTML, namelijk attributen die te maken hebben met presentatie/opmaak.
En we hadden afgesproken dat we de presentatie zouden scheiden van de structuur.
Het gaat om de cellspacing, cellpadding en border. Dat halen we eruit. Als we dergelijke zaken later willen toevoegen doen we dat zoals het hoort: via de stylesheet in je CSS.

En dan zijn er nog een paar dingen die we missen. De HTML is de plaats waar we structuur kunnen geven aan wat we willen presenteren en deze tabel heeft te weinig structuur. Daar horen nog een aantal zaken bij:

Niet verplicht

De genoemde elementen zijn niet verplicht, maar het is wel netjes om ze in de structuur van de tabel op te nemen.
Als ik dan alvast wat stijlen toevoeg om de tabel een beetje op te maken gaat hij er zo uitzien:

CSS: table{
width: 400px;
border: 1px solid red;
}

td{
border: 1px solid black;
}
HTML: <table>

<caption>Header van de tabel</caption>

<tbody>
<tr>
<td>cel 1 - rij 1</td>
<td>cel 2 - rij 1</td>
<td>cel 3 - rij 1</td>
</tr>
<tr>
<td>cel 1 - rij 2</td>
<td>cel 2 - rij 2</td>
<td>cel 3 - rij 2</td>
</tr>
<tr>
<td>cel 1 - rij 3</td>
<td>cel 2 - rij 3</td>
<td>cel 3 - rij 3</td>
</tr>
</tbody>

</table>

bekijk het resultaat

Wat de caption betreft; heel vaak wordt hij weggelaten. Ik gebruik hem zelf eerlijk gezegd ook maar weinig.
Ik heb wel het vermoeden dat Google er waarde aan hecht. Zoals je misschien weet beoordeeld Google de content van een pagina aan de hand van het HTML element waar die content in staat. Hoe belangrijker het HTML element, hoe belangrijker de tekst die erin staat. Dus de tekst in een <h1> wordt veel hoger gewaardeerd dan de tekst in een <p>.
Ik heb het idee dat een <caption> wel eens goed gewaardeerd zou kunnen worden door Google. Dus misschien toch een goed idee om de caption te gebruiken.

En de tbody; die krijgt meer betekenis als je ook een thead en tfoot gaat gebruiken. En dat werkt aldus:

CSS: table{
width: 400px;
}

td, th{
border: 1px solid black;
}

caption{
display: none;
}
HTML: <table>

<caption>Header van de tabel</caption>

<thead>
<tr>
<th>kolom header 1</th>
<th>kolom header 2</th>
<th>kolom header 3</th>
</tr>
</thead>

<tfoot>
<tr>
<td>footer cel 1</td>
<td>footer cel 2</td>
<td>footer cel 3</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>cel 1 - rij 1</td>
<td>cel 2 - rij 1</td>
<td>cel 3 - rij 1</td>
</tr>
<tr>
<td>cel 1 - rij 2</td>
<td>cel 2 - rij 2</td>
<td>cel 3 - rij 2</td>
</tr>
<tr>
<td>cel 1 - rij 3</td>
<td>cel 2 - rij 3</td>
<td>cel 3 - rij 3</td>
</tr>
</tbody>

</table>

bekijk het resultaat

Hè?

Inderdaad, dat tfoot element staat op een merkwaardige plaats in de markup. Hij staat boven de tbody! Maar als je naar het resultaat kijkt zie dat hij keurig onderaan de tabel verschijnt. Dus da's raar.
Wie weet hoe het zit mag het zeggen, ik weet het niet. Ik snap ook niet waarom de structuur van die tabel zo merkwaardig in elkaar steekt.

Het thead element wordt gevuld met th's en niet met td's. De tekst in een th wordt automagisch bold.

Nog wat headers

En there you have it. De structuur van een complete en goed opgebouwde tabel.
Wat we nu nog kunnen doen is er nog een aantal headers aan toevoegen om nog wat meer structuur aan te brengen. Maar dan is het ook netjes om aan te geven waar welke header betrekking op heeft:

CSS: table{
width: 400px;
}

td, th{
border: 1px solid black;
}

caption{
display: none;
}
HTML: <table>

<caption>Header van de tabel</caption>

<thead>
<tr>
<th scope="col" >kolom header 1</th>
<th scope="col" >kolom header 2</th>
<th scope="col" >kolom header 3</th>
</tr>
</thead>

<tfoot>
<tr>
<td>footer cel 1</td>
<td>footer cel 2</td>
<td>footer cel 3</td>
</tr>
</tfoot>

<tbody>
<tr>
<th scope="row" >header - rij 1</th>
<td>cel 2 - rij 1</td>
<td>cel 3 - rij 1</td>
</tr>
<tr>
<th scope="row" >header - rij 2</th>
<td>cel 2 - rij 2</td>
<td>cel 3 - rij 2</td>
</tr>
<tr>
<th scope="row" >header - rij 3</th>
<td>cel 2 - rij 3</td>
<td>cel 3 - rij 3</td>
</tr>
</tbody>

</table>

bekijk het resultaat

Door middel van het attribuut scope geef ik aan of een header betrekking heeft op een kolom of op een rij. Naar mate ik meer structuur aan de tabel geef en daarmee dus ook meer structurele betekenis aan de inhoud van een cel wordt de inhoud ook belangrijker.
Zoals je misschien is opgevallen kom ik niet echt meer weg de teksten in de cellen. Hoezo 'kolom header 1'? Waarom zou die kolom nog een header moeten hebben?

Tabulaire data

Ik ga de tabel vullen met betekenisvolle data zodat de structuur en de data op elkaar aansluiten:

CSS: table{
width: 400px;
}

td, th{
border: 1px solid black;
}
HTML: <table>

<caption>Uitgaven van het weekend</caption>

<thead>
<tr>
<th scope="col" ></th>
<th scope="col" >Zaterdag</th>
<th scope="col" >Zondag</th>
<th scope="col" >Totaal</th>
</tr>
</thead>

<tfoot>
<tr>
<th scope="row">Totaal</th>
<td>&euro; 215,00</td>
<td>&euro; 75,00</td>
<td>&euro; 290,00</td>
</tr>
</tfoot>

<tbody>
<tr>
<th scope="row" >eten</th>
<td>&euro; 35,00</td>
<td>&euro; 65,00</td>
<td>&euro; 100,00</td>
</tr>
<tr>
<th scope="row" >drinken</th>
<td>&euro; 60,00</td>
<td>&euro; 10,00</td>
<td>&euro; 70,00</td>
</tr>
<tr>
<th scope="row" >kleding</th>
<td>&euro; 120,00</td>
<td>&euro; 0</td>
<td>&euro; 120,00</td>
</tr>
</tbody>

</table>

bekijk het resultaat

Je ziet dat wanneer ik zinnige data in die tabel zet de structuur van de tabel betekenis krijgt. En dat andersom de structuur van de tabel de inhoud verduidelijkt.

Ziedaar het belang van correcte markup: HTML die in overeenstemming is met de betekenis van de inhoud versterkt de presentatie van de inhoud.

Verdere presentatie

Nu kunnen we de tabel verder gaan opmaken, natuurlijk in de CSS en niet in de HTML.
De HTML geeft ons wel een paar hele mooie aanknopingspunten om onze styling aan op te hangen:

CSS: table{
width: 400px;
font-size: 100%;
empty-cells: hide;
}

td{
font-family: "Courier New", Courier, serif;
}

th, caption{
font-family: Verdana, sans-serif;
}

caption{
text-align: left;
font-weight: bold;
color: #960;
padding: 3px 0 4px 5px;
background-color: #CC9;
border: 1px solid #FFF;
}

td, th{
text-align: left;
padding: 3px 0 4px 5px;
vertical-align: middle;
border: 1px solid #FFF;
}

thead th{
background-color: #C96;
}

tbody th{
background-color: #CC6;
}

tbody td{
background-color: #CC6;
}

tfoot{
background-color: #960;
color: #FFF;
font-weight: bold;
}

bekijk het resultaat

Zoals je kunt zien hoef ik geen enkele class toe te voegen. Ik kan gebruik maken van de aanwezige HTML elementen om mijn stijlen toe te passen.
Overigens is het maar helemaal de vraag of een tabel er overzichtelijker op wordt wanneer je op deze manier als een idioot met kleuren tekeer gaat. Maar dat is een heel ander verhaal.
Het gaat er nu om dat ik een point wil maken en dat is zo wel gelukt geloof ik.

Tot slot

Als ik wel eens tekeer ga tegen het gebruik van tabellen dan bedoel ik daarmee het verkeerde gebruik van tabellen. het is zeg maar niet persoonlijk tegen tabellen gericht. Als je tabellen gebruikt voor de presentatie van tabulaire data dan is daar niets mis mee. In tegendeel. Een tabel is een onmisbaar onderdeel van HTML en indien goed toegepast zeer effectief bovendien.

naar het begin van de pagina