weballey logo
 
left Tables - alignment backnext right
homesearchsite mape-mail
intro
uitbreiding
afmetingen
kleuren
randen
< uitlijnen >
nesten
navbar
samenvatting
tags
slot
      De positionering van de celinhoud kan worden geregeld met diverse uitlijningsattributen. In de tabel cellen hieronder zie je dat deze standaard aan de linkerkant uitlijnen, net als op een standaard webpagina. In verticale richting gaat het wat anders, daar staat de inhoud halverwege. Als een celinhoud hoger is dan een ander, verschuift de lagere naar het midden.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>celinhoud</TD>
<TD>cel-<BR>in-<BR>houd</TD>
</TR>
</TABLE>

celinhoudcel-
in-
houd

    De horizontale uitlijning kun je instellen met het ALIGN attribuut van de TD tag. Links uitlijnen hoef je niet aan te geven, aangezien dat standaard is. Ik gebruik dit attribuut om bijvoorbeeld de navigatiestrook op deze pagina te centreren.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD ALIGN="LEFT">cel</TD>
<TD ALIGN="CENTER">cel</TD>
<TD ALIGN="RIGHT">cel</TD>
</TR>
</TABLE>

cel cel cel

    De verticale positie van de celinhoud kun je op dezelfde manier beïnvloeden, met het VALIGN attribuut (kort voor Vertical ALIGNment). Midden (CENTER) is overbodig, dat is standaard. Het is aan te raden altijd naar boven (TOP) uit te lijnen. Gewoon om verrassingen te voorkomen, als je pagina verandert.

<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>c<BR>e<BR>l<BR>l</TD>
<TD VALIGN="TOP">cel</TD>
<TD VALIGN="MIDDLE">cel</TD>
<TD VALIGN="BOTTOM">cel</TD>
</TR>
</TABLE>

c
e
l
cel cel cel

    Het menu in de navigatiestrook links op deze pagina, wordt naar boven gedrukt met het VALIGN attribuut (TOP). Op sommige pagina's is deze strook langer dan de tekst. Om ook daar problemen te vermijden, zet ik dit ook in de cel waar de tekst in staat.
    De uitlijningsattributen kunnen ook worden gebruikt in de TR en TABLE tags. Dan bepalen ze de uitlijning van een hele rij of de gehele tabel. Instellingen voor een cel gaan voor rijinstellingen, rijinstellingen gaan voor tabelinstellingen.

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