HTML cursus

Les 4: Tabellen

In dit lesje wordt uitgebreid besproken hoe je een tabel maakt. Tabellen kom je tegen op praktisch elke site. Om een tabel te maken, hebben we de volgende drie basis tags nodig:

• table

  De table tag gebruiken we om een nieuwe tabel in te voegen.

• tr

  De tr tag wordt gebruikt om een nieuwe rij in te voegen.

• td

  De td tag wordt gebruikt om een nieuwe cel in te voegen.

Zo ziet de structuur van een tabel met 2 rijen en 3 kollommen, er als volgt uit:

Zo, je weet nu al hoe je een simpele tabel maakt, maar we zijn zeker nog niet klaar. In wat volgt, bespreken we de belangrijkste attributen van de drie tags die we net geleerd hebben.

Attributen van table

• align

  Hiermee bepaal je waar de tabel op je pagina komt, 3 verschillende opties: left (standaard), center of right.

• border

  Hiermee bepaal je de dikte van de rand van de tabel, de standaardwaarde is 0.

• width

  Hiermee bepaal je de breedte van de tabel, er zijn twee mogelijkheden:

  • In procent (bv. 75%), geeft de breedte aan ten op zichte van de breedte van het scherm. Als men dit gebruikt, dan gebruikt men meestal de waarde 100%. Waarbij de tabel de volledige breedte van het scherm inneemt.

  • In pixels (bv. 250), hiermee kan men zeer nauwkeurig tewerk gaan.

• height

  Juist hetzelfde als width, maar dan in de hoogte.

• cellspacing

  Duidt de ruimte aan tussen de cellen en de rand van de tabel. Wordt uitgedrukt in pixels.

• cellpadding

  Dit duidt de ruimte aan tussen de cellen onderling. Ook uitgedrukt in pixels.

• bgcolor

  Dit bepaalt de achtergrondkleur van de tabel.

Attributen van tr

• align

  Hiermee bepaal je waar de rij in de tabel komt, dezelfde 3 mogelijkheden als bij het align attribuut van table (zie boven).

• valign

  Dit duidt ook aan waar de rij in de tabel moet geplaatst worden, maar dan verticaal. Vier opties: top, middle (standaard), bottom en baseline.

• bgcolor

  Dit kan je gebruiken om een hele rij dezelfde kleur te geven.

• height

  Hiermee bepaal je de hoogte van de rij.

Attributen van td

• align

  Met dit attribuut bepaal je waar de cel komt, alweer dezelfde 3 opties als voordien.

• valign

  Om de tekst in een cel boven, beneden of in het midden te zetten. Denk bv. aan twee cellen naast elkaar, waarbij de ene heel veel tekst bevat en de andere maar één lijntje bevat. Met dit attribuut kan je de plaats van dit ene lijntje aanduiden. Vier dezelfde opties als bij de tr tag.

  Hieronder volgen twee voorbeeldjes om het voorgaande duidelijk te maken. Bij het eerste voorbeeldje staat de verticale uitlijning van de laatste cel op middle aangezien het valign attribuut niet gespecifieerd is en dus de standaardwaarde gebruikt wordt. Bij het tweede voorbeeldje hebben we aan de verticale uitlijning de waarde top toegekend.

  <table width="100" border="1">
  <tr>
  <td>Deze cel bevat een tekst die uit verschillende lijntjes bestaat.</td>
  <td>Tekst</td>
  </tr>
  </table>

  Deze cel bevat een tekst die uit verschillende lijntjes bestaat.

  Tekst

  <table width="100" border="1">
  <tr>
  <td>Deze cel bevat een tekst die uit verschillende lijntjes bestaat.</td>
  <td valign="top">Tekst</td>
  </tr>
  </table>

  Deze cel bevat een tekst die uit verschillende lijntjes bestaat.

  Tekst

  Als je nu de twee resultaten vergelijkt, is het verschil wel duidelijk.

• bgcolor

  Dit attribuut gebruik je om een cel een bepaalde kleur te geven.

• width

  Hiermee bepaal je de breedte van de cel.

• height

  Hiermee bepaal je de hoogte van de cel.

• colspan

  Dit gebruik je om een bepaalde hoeveelheid aaneengrenzende cellen te verbinden, of samen te nemen. Hieronder volgt een verklarend voorbeeldje.

  <table border="1" cellpadding="5" cellspacing="5" align="center">
  <tr>
  <td colspan="5" align="center"><u><b>Dierenrijk</b></u></td>
  </tr>
  <tr>
  <td align="center">Vissen</td>
  <td align="center">Amfibieën</td>
  <td align="center">Reptielen</td>
  <td align="center">Vogels</td>
  <td align="center">Zoogdieren</td>
  </tr>
  </table>

  Dierenrijk
  Vissen	Amfibieën	Reptielen	Vogels	Zoogdieren

• rowspan

  Hetzelfde als colspan, alleen verbind je nu rijen door i.p.v. cellen.

• nowrap

  Als je wilt dat de tekst op dezelfde lijn blijft, gebruik je dit attribuut om deze tekst bij elkaar te houden. Opgepast, je tabel kan hierdoor storend lang worden. De code hieronder illustreert het gebruik ervan.

  <td nowrap="nowrap">Tekst</td>

Hieronder volgt een voorbeeldje die de drie tags die we gezien hebben, samen met zijn attributen, behandelt.

Resultaat

<table>
	<tr>
		<td>Data 1</td>
		<td>Data 2</td>
		<td>Data 3</td>
	</tr>
	<tr>
		<td>Data 4</td>
		<td>Data 5</td>
		<td>Data 6</td>
	</tr>
</table>

De volgende lestekst handelt over het gebruik van frames.

Top

Ga naar Les 5: Frames