NIWO - nl.internet.www.ontwerpFAQ

WDG Webontwerp FAQ deel 7: HTML-tabellen

  1. Hoe maak ik een tabel die er goed uitziet in browsers die tabellen niet ondersteunen?
  2. Kan ik een tabel in een tabel plaatsen (nesten)?
  3. Hoe gebruik ik tabellen om formulieren te structureren?
  4. Hoe centreer ik een tabel?
  5. Hoe lijn ik een tabel rechts uit (of links)?
  6. Kan ik percentages gebruiken voor <TD WIDTH=...>?
  7. Waarom gebruikt <TABLE WIDTH="100%"> niet de volle browser-breedte?
  8. Waarom is er extra ruimte voor of na mijn tabel?
  9. Zijn er problemen met het gebruik van tabellen voor layout?

7.1. Hoe maak ik een tabel die er goed uitziet in browsers die tabellen niet ondersteunen?

Zie Alan Flavell's document met betrekking tot tabellen voor een goede behandeling, te vinden op /~flavell/www/tablejob.html.

[Inhoudsopgave]

7.2. Kan ik een tabel in een tabel plaatsen (nesten)?

Ja, een tabel kan worden opgenomen in een cel van een andere tabel. Hier is een eenvoudig voorbeeld:

001  <table>
002    <tr>
003      <td>dit is de eerste cel van de buitenste tabel</td>
004      <td>dit is de tweede cel van de buitenste tabel,
005          met de binnenste tabel daarin opgenomen<br>
006          <table>
007            <tr>
008              <td>dit is de eerste cel van de binnenste tabel</td>
009              <td>dit is de tweede cel van de binnenste tabel</td>
010            </tr>
011          </table>
012      </td>
013    </tr>
014  </table>

De belangrijkste valkuil met genestte tabellen is dat Netscape er problemen mee heeft, wanneer je de TD- and TR-tags niet consequent afsluit. Het is het verstandigste om elke </TD> en </TR> te plaatsen, ook al wordt dat niet vereist in de HTML specificatie; als je dat niet doet, kunnen Netscape-gebruikers mogelijk jouw pagina niet bekijken.

[Inhoudsopgave]

7.3. Hoe gebruik ik tabellen om formulieren te structureren?

Kleine formulieren worden soms binnen een TD-element in een tabel gezet. Dit kan nuttig zijn voor het plaatsen van een formulier ten opzichte van andere inhoud, maar het helpt niet bij plaatsen van de formulier-items ten opzichte van elkaar.

Om formulieren-items ten opzichte van elkaar te plaatsen, moet de gehele tabel zich binnen het formulier bevinden. Je kunt niet een formulier beginnen in het ene TH- of TD-element en eindigen in een andere. Je kunt geen formulier in een tabel plaatsen zonder het binnen een TH- of TD-element te zetten. Je kunt wel de tabel binnen in het formulier zetten, en dan de tabel gebruiken om de INPUT-, TEXTAREA-, SELECT- en andere formulier-items te plaatsen, zoals in het volgende voorbeeld wordt getoond.

001  <form action="[URL]">
002     <table border="0">
003        <tr>
004           <th>Account:</th>
005           <td><input type="text" name="account"></td>
006        </tr>
007        <tr>
008           <th>Password:</th>
009           <td><input type="password" name="wachtwoord"></td>
010        </tr>
011        <tr>
012           <td> </td>
013           <td><input type="submit" name="Inloggen"></td>
014        </tr>
015     </table>
016  </form>

[Inhoudsopgave]

7.4. Hoe centreer ik een tabel?

De "juiste" manier om dit te doen is <TABLE ALIGN=CENTER>, maar dit werkt niet in meerdere populaire browsers. Zet <CENTER> rondom de hele tabel voor deze browsers.

Dit veroorzaakt enkele problemen met browsers die wel CENTER ondersteunen, maar geen tabellen, zoals Lynx. In deze browsers wordt de inhoud van de cellen nu gecentreerd weergegeven, en dat is niet de bedoeling. Om dit te voorkomen kun je de inhoud van de cellen in <P ALIGN=left> of <DIV ALIGN=left> plaatsen, afhankelijk van de hoeveelheid tekst in de cel.

[Inhoudsopgave]

7.5. Hoe lijn ik een tabel rechts uit (of links)?

Je kunt <TABLE ALIGN="right"> gebruiken om een tabel rechts te laten zweven. (Gebruik ALIGN="left" om aan de linkerkant te zweven.) Alle inhoud die na de afsluitende </TABLE>-tag verschijnt, zal rond de tabel stromen. Gebruik <BR CLEAR="right"> of <BR CLEAR="all"> om het einde aan te geven van de tekst die rond de tabel moet stromen, zoals getoond in dit voorbeeld:

001  <TABLE ALIGN="right">...</TABLE>
002  De tabel zal aan de rechterkant zweven.
003  Deze tekst zal links van de tabel verschijnen.
004  <BR CLEAR="right">
005  Deze tekst zal onder de tabel verschijnen,
006  zelfs als er genoeg ruimte over is links naast de tabel.

[Inhoudsopgave]

7.6. Kan ik percentages gebruiken voor <TD WIDTH=...>?

De HTML 3.2 en HTML 4.0 specificaties staan alleen maar gehele getallen (die een aantal pixels aangeven) toe als waarden voor het WIDTH-attribuut van het TD-element. De HTML 4.0 DTD staat echter wel percentages (en andere niet gehele getallen) toe als waarde, dus een HTML-validator zal niet klagen over <TD WIDTH="xx%">.

Het moet worden opgemerkt dat Netscape's en Microsoft's browsers percentages voor <TD WIDTH=...> afwijkend interpreteren. Hun interpretaties (en die van andere table-herkennende browsers) zijn echter hetzelfde wanneer ze worden gecombineerd met <TABLE WIDTH="100%">. In zo'n situatie kunnen percentages als waarden tamelijk veilig gebruikt worden, ook al zijn ze niet toegestaan volgens de openbare specificaties.

[Inhoudsopgave]

7.7. Waarom gebruikt <TABLE WIDTH="100%"> niet de volle browser-breedte?

Grafische browsers laten een smalle marge open tussen de rand van het weergavegebied en de inhoud. Zie het antwoord op de vraag "Hoe verwijder ik de marges rondom mijn pagina?" voor informatie over het zo instellen van de browser, dat deze de marges verwijdert.

Merk ook op dat Navigator altijd ruimte aan de rechterkant overlaat voor een schuifbalk, maar deze schuifbalk alleen maar tekent als het document zo lang is dat schuiven nodig is. Als het document geen schuiven nodig heeft, blijft er een rechter-"marge" over, die niet verwijderd kan worden.

[Inhoudsopgave]

7.8. Waarom is er extra ruimte voor of na mijn tabel?

Dit wordt vaak veroorzaakt door een ongeldige HTML-syntax. Met name losse inhoud binnen een tabel (bijv. inhoud die niet binnen een TD- of TH-element valt). Er is geen standaardmanier om losse inhoud in een tabel te behandelen. Sommige browsers geven alle losse inhoud voor of na de tabel weer. Als de losse inhoud alleen meerdere regelomlopen of lege alinea's bevat, zullen deze browsers al deze lege ruimte voor of na de tabel zelf weergeven.

De oplossing is het repareren van de HTML-syntaxfouten. Alle inhoud in een tabel moet binnen een TD- of TH-element vallen.

[Inhoudsopgave]

7.9. Zijn er problemen met het gebruik van tabellen voor layout?

In de huidige browsers moet de gehele tabel worden binnengehaald en moeten de afmetingen van alles in de tabel bekend zijn voordat de tabel kan worden opgebouwd. Dit kan het weergeven van uw inhoud vertragen, vooral als uw tabel veel afbeeldingen zonder HEIGHT- of WIDTH-attributen bevat.

Als een van de elementen binnen een tabel te breed is voor de beschikbare weergaveruimte, dan zal de tabel uitgerekt worden om de te grote inhoud te kunnen omvatten. De rest van de inhoud past zich dan aan om in de uitgerekte tabel te passen, in plaats van zich aan te passen aan de beschikbare weergaveruimte. Hierdoor kunnen uw bezoekers gedwongen worden om horizontaal te schuiven om de inhoud te kunnen lezen, of kunnen afgedrukte versies worden afgekapt.

Bij lezers die een een smaller weergavegebied hebben dan de auteur verwachtte, veroorzaken tabellen met een vaste breedte dezelfde problemen als andere uitgerekte tabellen. Bij lezers die een weeragvegebied hebben dat groter is dan de auteur verwachtte, veroorzaken tabellen met een vaste breedte extreem brede marges, wat verspilling is van het weergavegebied. Voor lezers die grotere lettertypes nodig hebben, kunnen tabellen met een vaste breedte er voor zorgen dat de inhoud in korte afgebroken regels met slechts een paar woorden wordt weergegeven.

Veel browsers zijn erg gevoelig voor ongeldige syntax waar het tabellen betreft. Goede syntax is een kritische factor. Zie het antwoord op "Hoe controleer ik op fouten?". Zelfs met goede syntax kunnen genestte tabellen mogelijk verkeerd worden weergegeven in Netscape. Zie het antwoord op "Kan ik een tabel in een tabel plaatsen (nesten)?" voor oplossingen hiervoor.

Sommige browsers negeren tabellen, of kunnen worden ingesteld om tabellen te negeren. Deze browsers zullen de hele layout die u met tabellen heeft gemaakt negeren. Ook zoekmachines negeren tabellen. Sommige zoekmachines gebruiken de tekst aan het begin van een document voor een samenvatting bij het weergeven van zoekresultaten, sommigen indexeren enkel de eerste n bytes van een document. Als tabellen worden gebruikt voor layout, zal het begin van een document meestal veel navigatie-links bevatten die verschijnen voor de eigenlijke inhoud.

Veel versies van Navigator hebben problemen met het verwijzen naar benoemde ankers als deze zich in een tabel bevinden, die gebruikt maakt van het ALIGN-attribuut. Deze browsers lijken het benoemde anker te verbinden met de bovenkant van de tabel, in oplaats van met de inhoud van het anker. U kunt dit probleem vermijden door het ALIGN-attribuut niet met uw tabellen te gebruiken.

Als je tabellen voor layout gebruikt, kun je toch de hiermee samenhangende problemen beperken door zorgvuldige markup. Vermijd het plaatsen van brede afbeeldingen, PRE-elementen met lange lijnen, lange URL's, of andere brede inhoud in tabellen. Gebruik in plaats van één enkele layout-tabel voor de hele pagina, meerdere zelfstandige tabellen. u kunt bijvoorbeeld een tabel gebruiken om een navigatiebalk boven of onder aan een pagina op te maken, en het hoofddeel geheel buiten een layout-tabel laten.

Het gebruik van tabellen voor opmaak wordt uitgebreid onderzocht in http://webtips.dan.info/tables.html.

[Inhoudsopgave]