9 Tabellen

9.1 Inleiding

Tabellen worden nog vaak gebruikt in pagina's op het Internet. Tabellen zijn handig om de inhoud van je pagina netjes weer te geven op de juiste plaats. Toch wordt er tegenwoordig niet meer met tabellen gewerkt in de moderne web 2.0 trend. In plaats van tabellen wordt er gewerkt met stylesheets als alternatief (zie 9.6 Geen tabellen... maar divs). Toch geven we nog eerst een korte inleiding over HTML tabellen voor ik het alternatief voorschotel.

9.2 Eenvoudige tabel

Een tabel wordt gedefinieërd met het table element. Een tabel bestaat uit rijen en kolommen. Een rij wordt gedefineërd met het tr element (tr = table row), en een kolom wordt definieërd met het td element (td = table data). Uiteindelijk zal alle inhoud dus tussen <td>  en </td> komen te staan.

Voorbeeld van een éénvoudige tabel in HTML:

<table border="1">
  <tr>
    <td>Eerste rij, eerste kolom</td>
    <td>Eerste rij, tweede kolom</td>
  </tr>
  <tr>
    <td>Tweede rij, eerste kolom</td>
    <td>Tweede rij, tweede kolom</td>
  </tr>
</table>

De dikte van de rand wordt bepaald door het attribuut border. Hoe dikker de rand, hoe hoger de waarde. Om de randen te laten verdwijnen geef je deze als waarde 0.

9.3 Kop van een tabel

Om de kolommen een titel te geven wordt het th element gebruikt (th = table header). Deze vervangt dan het td element in eerste rij. Een voorbeeld maakt het verder duidelijk:

<table border="1">
  <tr>
    <th>Naam</th>
    <th>Geslacht</th>
  </tr>
  <tr>
    <td>Joël</td>
    <td>man</td>
  </tr>
  <tr>
     <td>Jessica</td>
     <td>vrouw</td>
   </tr>
</table>

9.4 cellpadding en cellspacing

Om de ruimte tussen de cellen te veranderen wordt het attribuut cellpadding gebruikt. Hoe hoger de waarde, hoe meer ruimte tussen de rand en de inhoud. Als deze waarde 0 is dan plakt de inhoud tegen de rand.

<table border="1" cellpadding="10">
  <tr>
    <td>Veel ruimte :-)</td>
  </tr>
</table>

<table border="1" cellpadding="0">
  <tr>
    <td>Geen ruimte :-(</td>
  </tr>
</table>

Het attribuut cellspacing bepaalt de ruimte tussen de cellen en de rand van de tabel. Standaard is er een kleine spatie tussen de rand en de cel van de tabel, om die spatie te verwijderen verander je de waarde naar 0.

<table border="1" cellspacing="0">
  <tr>
    <td>Er is geen ruimte meer tussen de cel en de rand van de tabel!.</td>
  </tr>
</table>

9.5 colspan en rowspan

Om kolommen samen te nemen wordt het element colspan gebruikt. De waarde bepaalt hoeveel kolommen er worden samen genomen.

<table border="1">
  <tr>
    <td>Eerste rij, eerste kolom</td>
    <td>Eerste rij, tweede kolom</td>
  </tr>
  <tr>
    <td colspan="2">Tweede rij</td>
  </tr>
</table>

Het is ook mogelijk rijen samen te nemen, hiervoor wordt het element rowspan gebruikt. De waarde bepaalt hoeveel rijen er worden samen genomen.

<table border="1">
  <tr>
    <td>Eerste rij, eerste kolom</td>
    <td rowspan="2">Tweede kolom</td>
  </tr>
  <tr>
    <td>Tweede rij, eerste kolom</td>
  </tr>
</table>

9.6 Breedte en hoogte

Om de afmetingen aan te passen van een tabel gebruiken we het width - en height eigenschap.

Deze cursus is afkomstig van Cursus HTML
Het is verboden zonder schriftelijke toestemming deze pagina in welke vorm dan ook te publiceren.