Hier begint je website

» Menu

Home
Nieuws
Artikel
Informeer een vriend
Informeer een vriend
Forums
Adverteren
Scripts
Badges
FAQ
Opleidingen
Animaties
Awards
Links
Autohits
Registreer
Gastenboek
Bookmark ons
Contact ons



» Forum threads

Huidige threads:
:: Forums ::



» Zoeken met Google


Web Webles.net




» Gebruikers Online

Er zijn:
0 geregistreerde gebruikers
and 10 gasten nu online.


» Hoe is de opbouw van tabellen en formulieren?
Alles over tabellen en formulieren - Print Email PDF 
Geplaatst door HSZuyd 07/10/2004

Index

» Alles over tabellen...
» Cel attributen
» Formulieren
» Aankruisvakjes
» Keuzerondjes
» Tekst
» Tekstgebied
» Keuzelijsten
» Verzenden en wissen

Nu we weten hoe we eenvoudige webpagina's kunnen maken en deze pagina's kunnen linken naar andere informatiebronnen op het Web of op de lokale computer, wordt het tijd om meer aandacht te schenken aan de opmaak van webpagina's. De meest handige methode hiervoor is door gebruik te maken van tabellen. Een tabel wordt gebruikt als we een spreadsheet willen weergeven, tekst of beeldmateriaal in kolommen willen zetten, of als we verschillende elementen op een pagina naast elkaar willen plaatsen.

Er is een aantal standaard-tags waaruit een tabel kan worden opgebouwd. Voordat we die bespreken is het handig om eerst iets te weten van de structuur van een tabel. Een tabel is opgebouwd uit verschillende rijen (die van links naar rechts lopen), en kolommen (die van boven naar beneden lopen). Deze rijen en kolommen bestaan op hun beurt uit cellen. Een cel is niets meer dan een hokje met informatie (data), die kan bestaan uit tekst of een afbeelding. Rij één bestaat dus uit alle eerste cellen van een kolom, en kolom één bestaat uit alle eerste cellen van een rij. Als we nu drie rijen onder elkaar zetten, en iedere rij bevat drie cellen, komt het geheel er zo uit te zien:

tabelcel-1 tabelcel-2 tabelcel-3
tabelcel-4 tabelcel-5 tabelcel-6
tabelcel-7 tabelcel-8 tabelcel-9

Nu we dit weten kunnen we de tags van een tabel gaan bekijken. Het Engelse woord voor tabel is 'table'. Dit woord wordt gebruikt in de begin- en eind-tag van een tabel, dus <TABLE> en </TABLE>. Tussen deze tabel-tags worden de tags van een 'table row' (tabelrij) geplaatst. Een tabelrij wordt aangegeven met de tags <TR> en </TR>. Tussen deze tags komen vervolgens de tags van de cel te staan, die worden aangegeven met <TD> en </TD>, dat staat voor 'table data'. De tekst van een cel kunt u tussen deze tags zetten. Let op dat iedere cel eigen <TD> en </TD> tags heeft. De gebruikte HTML-code voor de bovengetoonde tabel ziet er als volgt uit:

<TABLE>
   <TR>
      <TD>tabelcel-1</TD>
      <TD>tabelcel-2</TD>
      <TD>tabelcel-3</TD>
   </TR>
   <TR>
      <TD>tabelcel-4</TD>
      <TD>tabelcel-5</TD>
      <TD>tabelcel-6</TD>
   </TR>
   <TR>
      <TD>tabelcel-7</TD>
      <TD>tabelcel-8</TD>
      <TD>tabelcel-9</TD>
   </TR>
</TABLE>

Ook de tags <TH> en </TH> behoren tot de basiscodes van een tabel. Deze tags worden gebruikt om de 'table header' (tabelkop) te maken, die vet wordt weergegeven. Hieronder staat een voorbeeld van het gebruik van de tags <TH> en </TH>.

Tabelhoofd-1 Tabelhoofd-2
tabelcel-1 tabelcel-2 tabelcel-3
tabelcel-4 tabelcel-6

<TABLE BORDER="1">
   <TH>Tabelhoofd-1</TH>
   <TH></TH>
   <TH>Tabelhoofd-2</TH>
   <TR>
      <TD>tabelcel-1</TD>
      <TD>tabelcel-2</TD>
      <TD>tabelcel-3</TD>
   </TR>
   <TR>
      <TD>tabelcel-4</TD>
      <TD></TD>
      <TD>tabelcel-6</TD>
   </TR>
</TABLE>

Met de beschreven basiscodes kunt u een tabel maken. Maar al snel zult u erachter komen dat de tabel niet aan uw wensen voldoet. Als u niets aan de basis-tags verandert, wordt de gemaakte tabel immers links op de pagina neergezet, terwijl de ruimte aan de rechterkant onbenut blijft. Dat wilt u natuurlijk niet. U ziet liever dat de tabel over de gehele breedte van het venster wordt getoond. Dit kunt u doen door het attribuut 'WIDTH="x%"' toe te voegen aan de begin-tag <TABLE>. Voor de letter 'x' kunt u een getal invullen tussen de 1 en 100, waarbij honderd (procent) staat voor de gehele breedte.
Behalve dat het mogelijk is de breedte van de tabel aan te passen, kan ook de ruimte tussen de cellen worden veranderd. Het attribuut hiervoor is 'CELLSPACING="x"', waarbij 'x' de waarde aangeeft uitgedrukt in pixels. Wilt u de ruimte tussen de tekst en de binnenkant van de tabel vergroten, dan moet u het attribuut 'CELLPADDING="x"' gebruiken, waarbij ook deze 'x' de waarde aangeeft uitgedrukt in pixels.
Als u een bijschrift wilt plaatsen bij de tabel kunt u gebruikmaken van de tags <CAPTION> en </CAPTION>, die u onder de begin-tag <TABLE> kunt zetten. Tussen deze tags kunt u de tekst van het bijschrift plaatsen. Het enige attribuut van de <CAPTION>-tag is 'ALIGN'. Met dit attribuut kunt u bepalen waar het bijschrift wordt geplaatst. Er zijn vier mogelijkheden:

ALIGN="TOP" bijschrift gecentreerd boven de tabel
ALIGN="BOTTOM" bijschrift gecentreerd onder de tabel
ALIGN="LEFT" bijschrift links boven de tabel
ALIGN="RIGHT" bijschrift rechts boven de tabel

Om veranderingen aan een tabel goed te kunnen waarnemen is het handig om een 'border' te maken. Hiervoor moet u de begin-tag <TABLE> veranderen in <TABLE BORDER="1">. Dit heeft als resultaat dat alle randen van de tabel zichtbaar worden.



Reacties
Om een reactie te posten moet je ingelogd zijn. Als je geen login hebt, vraag er een aan. Het is gratis!

» Login




» Advertentie


Hier adverteren?



» Gebruikers

Laatste bezoeken :
MauriceMaurice
babsb
andries
Tommy
animatieanimatie
Online :
Admins : 0
Leden : 0
Gasten : 10
Totaal : 10
Nu online :



» Powered by

phpWebThings powered

Powered by Oerlemans Services


 This website was created with phpWebThings 1.5.2.
© 2002 - 2005 Copyright, Oerlemans Services