Rob's web

Tabellen

Een tabel is een uit rijen en kolommen opgebouwde matrix van kleine eenheden, cellen genaamd, die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren. Ook lijsten vormen tabellen, zoals een adressenlijst. Op een rij staan dan bijvoorbeeld de voornaam van een contact, de achternaam, straat, huisnummer, postcode, woonplaats of nog andere gegevens vermeld.

Het maken van tabellen op een webpagina is vrij eenvoudig. Wat we voor het aanmaken nodig hebben is het aantal kolommen (verticaal) en het aantal rijen (horizontaal) waaruit de tabel wordt opgebouwd.

De code wordt per regel georganiseerd.

In de begindagen van HTML werden tabellen misbruikt voor opmaak doeleinden. Men kon niets anders als men er iets meer van wilde maken. Dit resulteerde ook dat tabellen werden genest met de nodige risico's. Tabellen dienen uitsluitend gebruikt te worden om gegevens in tabel vorm weer te geven en niet meer voor opmaak doeleinde.

Tags

De tabel begint met de <table> tag en eindigt met de </table> tag. Hiertussen wordt de tabel data geplaatst.

Een regel begint met een <tr> tag en gevolgt door een aantal <td> </td> tag paren voor iedere kolom een en eindigt dan met </tr>. Dit herhalen we totdat we alle rijen geplaatst hebben.

Op de onderste regel komt dan </table> te staan.

Om voor en goede weergave op het scherm te zorgen wordt een lege cel gevuld met &nbsp; wat staat voor een spatie.

Data wordt rechtstreeks geplaatst, dus zonder de <p> tags.

Tabel kopteksten

Als we een kolom of rij van een naam willen voorzien dan gebruiken we <th> i.p.v. <td>. De tekst wordt vet en gecentreed boven een kolom weergeven.

Voorbeeld

Tabel 1
  K1 K2 K3
R1      
R2      
R3      

Willen we de bovenstaande tabel maken voeren we de onderstaande code in.

<table>
<caption>Tabel 1</caption>
<tr>
<th>&nbsp;</th>
<th>K1</th>
<th>K2</th>
<th>K3</th>
</tr>
<tr>
<th>R1</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>R2</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>R3</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>