weballey logo
 
left Tables - intro backnext right
homesearchsite mape-mail
< intro >
uitbreiding
afmetingen
kleuren
randen
uitlijnen
nesten
navbar
samenvatting
tags
slot
      Tabellen zijn een prachtig gereedschap voor de layout van webpagina's. Je kunt praktisch alles exact positioneren waar je het wilt hebben. Je kunt kleurvlakken toevoegen aan je pagina. Je kunt tekst in kolommen zetten, of navigatiestroken als op deze pagina maken. Je kunt afbeeldingen opsplitsen, en samenvoegen in een knoppenstrook, of er tekst tussenin zetten. Als je nog niks van HTML weet, is het wellicht een goed idee eerst eens naar de HTML tutorial te kijken.
    Tabellen worden gevormd met diverse tags. Wees precies met de plaatsing en aanwezigheid van elke tag. Slechts een ontbrekende tag kan je tabel onzichtbaar of kreupel maken. Als je spreadsheets kent, weet je dat ze bestaan uit rijen en kolommen, en dat elke cel kan gegevens kan bevatten. Je kunt hoogte en breedte van cellen aanpassen. De verschijningsvorm van een cel of een groep cellen aanpassen. HTML tabellen zijn vergelijkbaar, je kunt praktisch alles veranderen wat je maar wilt.

<TABLE>
<TR>
<TD>
celinhoud
</TD>
</TR>
</TABLE>

    Tabellen worden gevat in TABLE tags, een openende en een sluitende. Een tabelrij wordt gevormd door een openende en een sluitende TR tag (table row). En tabelcel wordt gevormd door twee TD tags (table data). Celinhoud staat altijd tussen TD tags.
    Deze drie sets tags vormen een complete tabel, de kleinste die je kunt maken in HTML. Een tabel, een rij, een kolom, een cel. Kopieer deze code in je editor en bekijk het in je browser. Je zult dan niets zien behalve de tekst in de tabel. Dit omdat html tabellen normaliter onzichtbaar zijn. Je kunt ze laten verschijnen door het BORDER attribuut te gebruiken.

<TABLE BORDER="1">

celinhoud

    Deze kleine tabel is wat je dan ziet in je browser. Het is wellicht een goed idee, alles wat je hier ziet zelf uit te proberen. Je kunt niet leren zwemmen zonder natte voeten te krijgen. Kopieer de html code in een text editor, en bekijk de resultaten in je browser. Je kunt het ook eens proberen met deze eenvoudige online editor. Je hebt javascript nodig om deze te laten werken.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right