Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie tabellen | Eenvoudige tabellen | Samenvoegen cellen | Uitlijnen celinhoud | Uitlijnen tabel | Bijschrift bij tabel | Tabelranden | Achtergrond tabel | Rijgroepen | Kolomgroepen | Kader en lijnen | Voorrangsregels bij uitlijnen

Gerelateerde elementen: CAPTION | COL | COLGROUP | TABLE | TBODY | TD | TFOOT | TH | THEAD | TR

Uitlijnen celinhoud

Met de attributen ALIGN en VALIGN van het TD (of TH) element bepaal je hoe de inhoud van een cel in respectievelijk horizontale en verticale richting moet worden uitgelijnd. De beginwaarde van het ALIGN attribuut is "left" en als je het attribuut niet opneemt, dan wordt de inhoud van de cel links uitgelijnd. De beginwaarde van het VALIGN is "middle" en zonder het attribuut wordt de inhoud van de cel in verticale richting gecentreerd.

In de volgende HTML-code kun je zien welke waarden je moet gebruiken om de celinhoud op de gewenste manier uit te lijnen. De eerste waarde is die voor het ALIGN attribuut, de tweede voor het VALIGN attribuut. Een streepje betekent dat het niet nodig is het attribuut op te nemen.

<TABLE BORDER="1">
<TR>
<TD VALIGN="top" WIDTH="120" HEIGHT="40">-/top</TD>
<TD WIDTH="120">-/-</TD>
<TD VALIGN="bottom" WIDTH="120">-/bottom</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="top" HEIGHT="40">center/top</TD>
<TD ALIGN="center">center/-</TD>
<TD ALIGN="center" VALIGN="bottom">center/bottom</TD>
</TR>
<TR>
<TD ALIGN="right" VALIGN="top" HEIGHT="40">right/top</TD>
<TD ALIGN="right">right/-</TD>
<TD ALIGN="right" VALIGN="bottom">right/bottom</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

De attributen ALIGN en VALIGN kunnen ook aan het TR element toegevoegd worden, om in één keer voor alle cellen in een rij te bepalen hoe de inhoud in respectievelijk horizontale en verticale richting uitgelijnd moet worden.

<TABLE BORDER="1">
<TR ALIGN="center">
<TD WIDTH="120" HEIGHT="60">a1</TD>
<TD WIDTH="80">a2</TD>
</TR>
<TR ALIGN="right" VALIGN="top">
<TD HEIGHT="40">b1</TD>
<TD>b2</TD>
</TR>
</TABLE>

De browser geeft dit voorbeeld zo weer:

Wanneer je de attributen ALIGN en VALIGN attributen voor meerdere elementen gebruikt, dan is het goed eens te kijken naar de voorrangsregels voor het uitlijnen van celinhoud.

Het uitlijnen van de celinhoud kun je ook regelen met behulp van stylesheets. Zie hiervoor het onderdeel CSS en tabellen - Uitlijnen celinhoud.

Standaard houdt de browser 1 pixel ruimte vrij tussen de inhoud van de cel en de rand aan de zijde waarlangs de inhoud wordt uitgelijnd, behalve langs de bovenrand waar de tussenruimte 4 pixels is.

<TABLE BORDER="1">
<TR>
<TD VALIGN="top" WIDTH="120" HEIGHT="70">10 pixels tussen rand en inhoud</TD>
<TD ALIGN="right" VALIGN="top" WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="70">b1</TD>
<TD VALIGN="bottom">b2</TD>
</TR>
</TABLE>

Met behulp van het CELLPADDING attribuut van het TABLE element kun je zelf bepalen welke ruimte moet worden vrijgehouden. De opgegeven afstand geldt als minimum. Als de cel breder en hoger is dan nodig is voor de inhoud en de opgegeven tussenruimte, zal de afstand tot de rand langs sommige zijden groter zijn. Waar dat het geval is, hangt af van de (al dan niet opgegeven) uitlijning van de celinhoud.

In het volgende voorbeeld is het CELLPADDING attribuut is opgenomen met de waarde "10". De inhoud van de cellen staat in vergelijking tot de tabel uit het vorige voorbeeld verder van de rand. Omdat de met het WIDTH attribuut vastgelegde breedte betrekking heeft op de inhoud van de cel, is de tabel in het laatste geval aanzienlijk breder.

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD VALIGN="top" WIDTH="120" HEIGHT="70">10 pixels tussen rand en inhoud</TD>
<TD ALIGN="right" VALIGN="top" WIDTH="80">a2</TD>
</TR>
<TR>
<TD HEIGHT="70">b1</TD>
<TD VALIGN="bottom">b2</TD>
</TR>
</TABLE>

Met het CELLPADDING attribuut van het TABLE element leg je in één keer de afstand tussen de celinhoud en alle vier de randen vast. Met behulp van stylesheets heb je de mogelijkheid de afstand tot elke rand afzonderlijk te bepalen. Zie hiervoor het onderdeel CSS en tabellen - Uitlijnen celinhoud.

Vervolg: Uitlijnen tabel

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 5 december 2004