Tabellen

• Inleiding
  
• Tabel
  
• Rij
  
• Kolom
  
• Rand
  
• Grootte
  
• Uitlijning
  
• Cellen samenvoegen (rij)
  
• Cellen samenvoegen (kolom)
  
• Samenvattend voorbeeld

Inleiding

Nemen we even het volgende voorbeeld, we maken een lijst van alle tot nu toe gebruikte pagina's:

deel.1 - basis.html
deel.2 - koppelingen.html
deel.3 - tabellen.html

OK, nu ziet dat lijstje er best wel leuk uit, maar als we dit nu moeten centreren, dan krijgen we het volgende

deel.1 - basis.html
deel.2 - koppelingen.html
deel.3 - tabellen.html

Niet echt mooi dus, beter is het volgende:

Hiervoor hebben we dus tabellen nodig, hier vindt je alle uitleg die je nodig hebt voor het maken van tabellen.

• Tabel
  Met <TABLE> roep je de tabel functie aan, met </TABLE> sluit je ze weer af. 
• Rij
  Met <TR> maak je een rij en met </TR> sluit je die af
• Kolom
  Met <TD> maak je een kolom in een rij en met </TD> sluit je die af.
• Rand
  Met <TABLE BORDER="X"> Maak je een tabel met een rand, de dikte kan variëren van 0 tot zo veel je wilt, 0 is geen rand.
  
  De simpelste code van de tabel die je hierboven ziet is dus:
  <TABLE BORDER="1">
    <TR>
      <TD>deel.1</TD>
      <TD>basis.html</TD>
    </TR>
    <TR>
      <TD>deel.2</TD>
      <TD>koppelingen.html</TD>
    </TR>
    <TR>
      <TD>deel.3</TD>
      <TD>tabellen.html</TD>
    </TR>
  </TABLE>
  
• Grootte
  OK, nu kan je een simpele tabel maken, maar stel nu dat je een tabel wil die over de hele lengte van de pagina gaat en dat de ene kolom zo groot moet zijn, en de andere weer zo groot. Hier is een simpel voorbeeld verdergaande op het vorige voorbeeld:
  <TABLE WIDTH=100% BORDER="1">
    <TR>
      <TD WIDTH=40%>deel.1</TD>
      <TD WIDTH=60%>basis.html</TD>
    </TR>
    <TR>
      <TD WIDTH=40%>deel.2</TD>
      <TD WIDTH=60%>koppelingen.html</TD>
    </TR>
  </TABLE>
           

  deel.1	basis.html
  deel.2	koppelingen.html

    
  We kunnen i.p.v. een percentage ook een actuele waarde geven, uitgedrukt in punten dan, zo zal WIDTH="600" ongeveer het volledige scherm in nemen.

• Uitlijning
  Met het <P ALIGN=""> commando, dat we al eerder tegenkwamen kunnen we ook hier in een bepaalde cel laten centreren, links uitlijnen of rechts. Als waarde kunnen we LEFT, CENTER of RIGHT invullen. Tabellen hebben echter nog iets leuker, je kan ook verticaal uitlijnen. Hiervoor gebruiken we <TD VALIGN="">, als waarde vullen we nu TOP, MIDDLE of BOTTOM in.
    
• Cellen samenvoegen (rij)
  Met <TD COLSPAN=X> kunnen we aangevan dat dit veld de breedte moet hebben van X samengevoegde velden.
    
• Cellen samenvoegen (kolom)
  Met <TD ROWSPAN=X> kunnen we aangeven dat dit veld de hoogte moet hebben van X samengevoegde rijen

Samenvattend voorbeeld

<TABLE WIDTH=100% BORDER="1">
  <TR>
    <TD WIDTH=40% VALIGN="BOTTOM">deel.1</TD>
    <TD WIDTH=60% ><P ALIGN="RIGHT">basis.html<BR>&nbsp;</TD>
  </TR>
  <TR>
    <TD WIDTH=100% COLSPAN="2">deel.2</TD>
  </TR>
</TABLE>
   

Nu kan je natuurlijk evengoed in een tabel een afbeelding steken, of een hyperlink, of zelfs een nieuwe tabel. Zo kan je leuke dingen maken met tabellen, bekijk hiervoor maar eens de pagina ip_adressen.html