3. Tabellen en andere opmaakmiddelen

Marc van Oostendorp

Hoofdstuk uit het boek, oorspronkelijk verschenen bij A.W. Bruna Informatica, 1996.

Na lezing van de voorafgaande twee hoofdstukken, kunt u al een behoorlijk professionele pagina in elkaar zetten. Toch zijn er nog een paar mogelijkheden van Netscape Navigator Gold die we niet bekeken hebben. Voordat we in de volgende hoofdstukken ingaan op HTML-technieken zullen we die mogelijkheden eerst moeten bespreken. Een van die technieken is de tabel-techniek. Aan deze techniek zullen we relatief veel aandacht besteden omdat ze nuttiger is dan op het eerste gezicht misschien lijkt. Met behulp van tabellen kunnen we namelijk vrij veel opmaak-technieken gebruiken. Daarnaast zullen verschillende technieken aan de orde komen om de tekst mooi op een pagina te plaatsen.

Een eenvoudige tabel maken

Het is niet moeilijk om tabellen te maken in Netscape Navigator. Hiervoor klikt u op de voorlaatste knop op de bovenste knoppenbalk, waarop een vierkant rooster staat afgebeeld.

Er verschijnt dan een venster waarin u kunt aangeven hoe de tabel eruit moet komen te zien.

In de bovenste twee velden kunt u aangeven respectievelijk hoeveel rijen en hoeveel kolommen de tabel moet bevatten. Standaard worden er twee rijen en twee kolommen aangemaakt door Netscape. Wanneer u nu op OK klikt, wordt dan ook een kleine tabel van twee bij twee velden aangemaakt.

Deze tabel lijkt misschien een beetje klein, maar de velden vergroten zich vanzelf als u er tekst invoert.

De velden in een tabel zijn altijd precies even groot als nodig is om de ingevoerde tekst te bevatten. U kunt overigens ook alle soorten van opmaak-elementen in een tabel invoeren: vette en cursieve lettertypen, kopjes en kleuren mag u allemaal gebruiken in een tabel. Zelfs afbeeldingen kunt u in een tabel plaatsen. U zet daarvoor de cursor in een veld naar keuze en kiest de mogelijkheid Image in het menu Insert.

We kunnen zelfs nóg een stapje verder gaan en tabellen binnen tabellen opnemen. Ook dit is bij wijze van spreken in een handomdraai gebeurd. U maakt allereerst de buitenste tabel aan. Vervolgens klikt u in het veld in de buitenste tabel waarin u een kleinere tabel wilt opnemen. U krijgt dan hetzelfde venster te zien als we eerder hebben gebruikt om de buitenste tabel te maken. Vervolgens kunt u de buitenste en de binnenste tabel invullen.

Tabellen worden overigens in het bewerkingsgedeelte van Netscape op een iets andere manier weergegeven dan in het bladergedeelte. Microsofts Internet Explorer gebruikt weer een iets andere weergave, zoals u kunt zien wanneer u de bovenstaande afbeelding met de onderstaande twee vergelijkt.

Tabellen maken in Netscape Navigator 2

De mogelijkheid om tabellen te maken is pas geïntroduceerd in versie 3 van Netscape Navigator Gold. In eerdere versies van het programma was het nog niet mogelijk om tabellen te maken zonder daarvoor eerst flink wat HTML te maken. In het volgende hoofdstuk zullen we ingaan op de juiste manier om dat te doen.

Overigens is het in versie 3 nog steeds mogelijk om in het bewerkingsgedeelte de tabelfunctie uit te zetten. Het is ook nuttig om dit te doen, omdat er voorlopig nog een redelijk groot percentage mensen is dat werkt met bladerprogramma’s die tabellen niet of niet goed kunnen weergeven. Om te kunnen bekijken hoe die mensen uw pagina’s zullen zien, dient u de mogelijkheid Display Tables in het menu View uit te zetten.

U krijgt de elementen van de tabel dan op de volgende manier gepresenteerd.

U ziet dat de elementen in een tabel in een bepaalde volgorde worden gepresenteerd. Eerst wordt het meest linkse element uit de eerste rij gepresenteerd, dan de overige elementen uit die rij, en tenslotte de overige rijen, ook weer van links naar rechts. In het geval van deze voorbeeldtabel geeft dit een bevredigend resultaat. De informatie die met deze tabel moet worden overgedragen, zal ook door degene die geen tabelfunctionaliteit in zijn of haar bladerprogramma heeft, wel begrepen worden. In wat volgt zullen we echter wat ingewikkelder tabelstructuren creëren. In dat geval is het goed om de pagina af en toe te bekijken zonder tabellen omdat de begrijpelijkheid daar wel sterk kan gaan afhangen van de gebruikte tabelstructuur.

 

Grotere en kleinere tabellen

In het voorafgaande hebben we telkens tabellen gemaakt van twee bij twee velden. Het spreekt vanzelf dat het ook mogelijk is om kleinere en grotere tabellen te creëren. De manier om dat in eerste instantie te doen, ligt voor de hand. In het venster dat u te zien krijgt wanneer u de tabel aanmaakt, kunt u heel eenvoudig een groter of een kleiner aantal rijen of kolommen aangeven.

Het kan ook voorkomen dat u pas ontdekt dat u de tabel groter of juist kleiner wilt maken, terwijl u al bezig bent de velden in te vullen. Bij het invoegen biedt het deelmenu Table in het menu Insert uitkomst.

Om een nieuwe rij toe te voegen, plaatst u de cursor op een veld dat onmiddellijk boven de nieuw aan te maken rij moet verschijnen. Vervolgens kiest u de mogelijkheid Row in het deelmenu Table.

Op precies dezelfde manier kunt u nieuwe kolommen aanmaken; deze worden onmiddellijk links van het veld ingevoegd waarin u de cursor heeft geplaatst. Het is ook mogelijk om een enkel veld in te voegen. Ook dit veld wordt links van de cursor aangemaakt. In feite wordt er een hele kolom aangemaakt, waarbij wordt aangegeven dat hoger en lager gelegen velden in dezelfde kolom geheel leeg moeten blijven. De ‘lege’ velden zien eruit alsof ze net iets boven de bladzijde liggen.

Velden, rijen en kolommen kunt u verwijderen met het deelmenu Delete Table in het menu Edit.

De betekenis van de verschillende mogelijkheden in dit deelmenu is waarschijnlijk niet moeilijk te achterhalen. U plaats de cursor eerst in een veld in de tabel. Vervolgens kunt u aangeven of de hele tabel, de rij of de kolom waarin het veld zich bevindt, of alleen het huidige veld moet worden verwijderd.

De eigenschappen van een tabel wijzigen

Aan de structuur van een tabel valt nog wel het een en ander aan te passen. Om dat te doen, kiest u de mogelijkheid Table in het menu Properties.

Vervolgens krijgt u een venster te zien, waarin u een groot aantal eigenschappen van de tabel kunt beregelen. We bepalen ons eerst tot de afdeling Table. Hiermee kunnen we de eigenschappen van de gehele tabel bepalen.

In het allereerste veld kunt u aangeven hoe breed de rand dient te zijn. Standaard is deze ingesteld op één pixel. U krijgt een dunne rand om de tabel heen. U kunt deze rand dikker maken door het getal te vergroten. U kunt ook een tabel zonder rand maken, wanneer u in dit veld de waarde ‘0’ invoert. Tabellen zonder rand zijn zeer populair als opmaakmiddel, zoals we verderop zullen zien.

We keren nu terug naar het venster dat u tevoorschijn kunt roepen met behulp van de mogelijkheid Table in het menu Properties. Onder het veld Border line width waarin u de breedte van de rand rond de tabel kunt aangeven, vindt u twee velden:

Onder deze twee velden waarin u de ruimte tussen en binnen velden kunt aangeven, vindt u twee velden waarin u de ruimte kunt aangeven die de tabel als geheel inneemt:

  • Table width
    Hiermee kunt u de relatieve breedte van de tabel aangeven. Normaal gesproken staat deze mogelijkheid ‘uit’: de breedte van de tabel wordt enkel en alleen bepaald door de toevallige breedte van de elementen die u in de velden van de tabel opneemt. Wanneer u een vinkje plaatst, krijgt u de touwtjes in handen. Normaal gesproken wordt de breedte dan gesteld op honderd procent van het beeldscherm.
    U kunt dit percentage vanzelfsprekend ook kleiner maken. Bovendien kunt u ook een absolute grootte opgeven. De eenheidsmaat daarvoor is de pixel. Absolute groottes worden in tabellen alleen gebruikt wanneer een tabel alleen één afbeelding bevat -- dat komt niet vaak voor.
  • Table min height
    Hiermee kunt u aangeven hoe hoog de tabel minimaal dient te zijn. Ook deze mogelijkheid staat normaal gesproken uit, en wanneer u een vinkje plaatst, komt de stand op 100% van de hoogte van het scherm van de gebruiker.
    Ook hier kunt u eventueel een absolute grootte aangeven, in pixels. Overigens heet deze mogelijkheid Table minimal height (Minimale hoogte van de tabel) omdat het uiteraard mogelijk is dat u een dusdanig grote tabel maakt, met zoveel gegevens dat ze met geen mogelijkheid in een klein scherm te passen zijn. In dat geval zullen de meeste bladerprogramma’s de door u gestelde norm overschrijden.
  • Onder deze twee velden waarmee u de grootte van de tabel kunt opgeven, volgt een veld (Table color) waarmee u de kleur van de tabel kunt bepalen. Normaal gesproken neemt de tabel de kleur van de rest van de pagina aan. Wanneer u een vinkje voor deze keuzemogelijkheid plaatst, kunt u deze kleur veranderen. Door op de knop met de tekst Choose Color te klikken, krijgt u een palet te zien waaruit u een kleur kunt kiezen. Dit palet ziet er hetzelfde uit als het palet dat u te zien krijgt bij het bepalen van andere kleuren op de pagina. Ik verwijs u zonodig naar hoofdstuk 2 voor een uitleg.

    U ziet dat de randen van de tabel wel wit zijn gebleven. Dit is een eigenaardigheidje van Netscape. In de Internet Explorer ziet de gekleurde tabel er iets anders uit.

    In de voorafgaande hoofdstukken heb ik u al een aantal maal op het hart gedrukt om uw werk met verschillende bladerprogramma’s te bekijken. Dat geldt met name wanneer u gebruik maakt van de eigenschappen van tabellen. U ziet in het bovenstaande voorbeeld dat de kleur van een tabel anders wordt geïnterpreteerd in de twee meest populaire bladerprogramma’s. Andere bladerprogramma’s -- en oudere versies van deze twee programma’s kunnen helemaal niet met deze kleuren omgaan. In Netscape versie 2, bijvoorbeeld, nemen tabellen altijd de kleur van de rest van de pagina aan, wat u als ontwerper ook heeft opgegeven.

    In de voorbeelden die hierboven gebruikt zijn, staat boven elke tabel een kopje. Dit kopje kunt u aanmaken met de mogelijkheid Include caption (Voeg titel in). Door een vinkje voor deze mogelijkheid te plaatsen, kunt u een titel toevoegen. U kunt ervoor kiezen om deze titel boven (above) of onder (below) de tabel te plaatsen.

    Overigens kunt u titels van tabellen natuurlijk ook altijd geheel onafhankelijk van de tabel opschrijven. U kunt een gewoon kopje maken en daaronder uw tabel definiëren. Het is echter beter om gebruik te maken van de hier besproken keuzemogelijkheid. Zo weet elk bladerprogramma dat hij uw kopje als een kopje bij de tabel moet behandelen, hoe dat ook verder geïnterpreteerd wordt.

    De laatste keuzemogelijkheid in het venster dat u te zien krijgt nadat u Table heeft gekozen in het menu Properties, biedt u de mogelijkheid om de tabel te plaatsen op de pagina. U kunt hem links of rechts uitlijnen of centreren, net zoals u dat met paragrafen kunt doen.

    Kenmerken van rijen

    U kunt niet alleen de eigenschappen van hele tabellen bepalen, ook onderdelen van een tabel zijn gevoelig voor veranderingen. In het venster dat u tevoorschijn roept met de keuze Table in het menu Properties vindt u ook een afdeling Row:

    U treft hier vooral mogelijkheden aan om de tekst in de velden in de tabel uit te lijnen. U kunt die tekst zowel horzontaal als verticaal tamelijk precies plaatsen. Daarnaast kunt u ook de kleur van één rij velden wijzigen:

    Veranderingen toepassen

    Onderin het venster waarin u de eigenschappen van tabellen, rijen en velden kunt aangeven vindt u vier knoppen.

    U klikt op OK wanneer u tevreden bent met de doorgevoerde veranderingen en terug wilt keren naar het bewerkingsvenster; op Annuleren wanneer u terug wilt keren zonder de veranderingen door te voeren; op Toepassen wanneer u de wijzigingen wilt doorvoeren zonder het huidige venster te verlaten, zodat u nog meer veranderingen kunt doorvoeren; en op Help voor Engelstalige hulpinformatie.

    Eigenschappen van velden

    Ook eigenschappen van individuele velden kunnen worden aangepast. In het venster dat u tevoorschijn roept met de keuze Table in het menu Properties vindt u ook een afdeling Cell.

    Met de bovenste twee velden kunt u bepalen hoe groot een veld moet worden. U kunt hiermee velden maken die twee kolommen of twee rijen bestrijken. Wanneer u bijvoorbeeld dit veld op de volgende manier invult, kunt u het volgende resultaat krijgen.

    Het rechtse veld op de bovenste rij omsluit nu twee kolommen. Op dezelfde manier kunt u ook een veld maken dat twee rijen omsluit, of zelfs twee rijen en twee kolommen.

    Onder deze twee velden wordt het venster horizontaal in tweeën gedeeld. Links staan een aantal mogelijkheden voor tekstuilijning (text alignment); rechts kunt u aangeven of een bepaald veld een kopje bevat (header style), of gewone tekst (wrap text). Kopjes in een tabel vindt u meestal in de kolom uiterst links en in de bovenste rij. Hieronder kunt u weergeven hoeveel ruimte het veld in beslag moet nemen. Met de eerste mogelijkheid Cell width (Veldbreedte) kunt u bijvoorbeeld aangeven dat twee velden in een tabel even breed zijn. U geeft dan een van de twee velden de waarde 50%.

    Op soortgelijke wijze kunt u ook de relatieve hoogte aangeven van een veld. Bovendien kunt u hier -- net als eerder bij de tabelgrootte -- ook een absolute grootte voor elk veld aangeven in pixels. Tenslotte is het mogelijk om een individueel veld een afwijkende kleur te geven.

    Tabellen als opmaakinstrument

    Ik heb tot nu toe relatief veel aandacht besteed aan het creëren van tabellen. Een belangrijke reden hiervoor is dat deze tabellen een heel belangrijk instrument vormen in het ontwerp van een Web-pagina. Met behulp van tabellen kunt u elk element op een pagina uiterst precies plaatsen. Veel Web-ontwerpers hebben uitgebreid gebruik gemaakt van deze mogelijkheden. Het is de moeite waard om enkele van deze pogingen eens van nabij te bekijken.

    Een bekend voorbeeld is de site van de grote Internet-aanbieder Planet Internet. Deze maakt gebruik van een tabel om de beschikbare informatie in drie onafhankelijke kolommen te kunnen presenteren.

    De tabel bestaat uit één rij met drie heel erg hoge velden. Links vindt de gebruiker een inhoudsopgave, rechts korte huishoudelijke mededelingen en in het midden de eigenlijke inhoud van de pagina. Planet Internet komt er als het ware openlijk voor uit dat het een tabel gebruikt: om de verschillende velden en om de tabel als geheel ziet u een duidelijke lijn getekend. Op andere sites wordt dit feit verdoezeld doordat alle lijnen op nul (0) zijn gezet. Een voorbeeld hiervan is de site van de Volkskrant.

    In feite zijn in deze site enkele tabellen in elkaar geschoven. De buitenste tabel heeft twee kolommen: links de kolom met de inhouds opgave, rechts een kolom die zelf weer een tabel bevat met drie kolommen, met elk de aankondiging van een anders nieuwsbericht.

    Een voorbeeld van een site waarin vernuftig gebruik wordt gemaakt van het feit dat tabellen en velden een eigen kleur kunnen krijgen, is die van het bedrijf Microsoft.

    De twee advertenties op dit scherm zijn samen in een tabel geplaatst. Allebei de advertenties nemen een rij van de tabel in beslag, en elke rij heeft precies een veld. Die rijen hebben allebei een eigen kleur gekregen. Op die manier vallen de advertenties beter op. Een alternatief was geweest op de teksten op te nemen in een gekleurde GIF-afbeeldingen. Dat zouden dan tamelijk grote afbeeldingen geworden zijn en dat had het laden van de pagina aanzienlijk vertraagd. Een gespecificeerde kleur kost daarentegen nauwelijks extra tijd: het enige dat over het Internet verstuurd wordt, is een korte code over welke kleur er gebruikt wordt. Die code bestaat uit ongeveer zes letters, zoals we in het volgende hoofdstuk zullen zien, en wordt daarom in een zeer kleine fractie van een seconde verstuurd, hoe druk het op het Net ook is.

    Tekst uitlijnen en laten inspringen

    Er zijn nog meer opmaakelementen dan alleen de tabel die nog een behandeling in dit hoofdstuk verdienen. Allereerst zijn daar de knoppen om de tekst uit te lijnen en te laten inspringen op de onderste knoppenbalk.

    Met de eerste twee knoppen kunt u een alinea, een kopje of een afbeelding iets laten inspringen ten opzichte van de rest van de tekst. Met de tweede knop kunt u het eigenlijke inspringen regelen, met de eerste knop kunt u dat inspringen weer ongedaan maken.

    Met de drie knoppen ernaast kunt u bepalen dat een alinea, een kopje of een afbeelding moet worden uitgelijnd aan de linkerkantlijn, aan de rechterkantlijn, of dat dat element van de pagina moet worden gecentreerd.

    Horizontale lijnen

    Ook aan de horizontale lijn valt nog wel het een en ander te sleutelen. Al in hoofdstuk 1 heb ik uiteengezet hoe u een dergelijke lijn op een pagina kunt plaatsen. Een alternatieve manier om dit te doen is overigens door in het menu Insert de mogelijkheid Horizontal Line te kiezen.

    Wanneer de lijn op uw pagina staat, vallen er nog een aantal aspecten aan te veranderen. Om dit te bewerkstelligen, klikt u ergens op de lijn met uw rechtermuisknop. U krijgt dan een menuutje te zien.

    In dit menu kiest u de mogelijkheid Horizontal Line Properties. Er komt verschijnt dan een venster waarin u de eigenschappen van de lijn kunt aangeven.

    In het veld achter de tekst Height kunt u de dikte van de lijn aangeven. Deze is normaal gesproken gesteld op 2 pixels, maar u kunt besluiten om een dunnere, of juist een veel dikkere lijn te maken. Hieronder ziet u voorbeelden van lijnen van respectievelijk 1, 2, 3, 4, 5, 6, 7 en 8 pixels dik.

    Het is ook mogelijk om de lengte van de lijn aan te geven, in percentages van het beeldscherm of in pixels. Hieronder ziet u voorbeelden van lijnen met een lengte van respectievelijk 100, 80, 60, 40 en 20 procent van het beeldscherm.

    Met de drie radioknoppen hieronder kunt u aangeven of u de lijn wilt centreren (de standaard), of dat u hem aan de kantlijn links of rechts wilt uitlijnen. De laatste opmaakmogelijkheid die u met betrekking tot lijnen heeft is het aan of uit zetten van de zogenaamde 3D Shading (3D-schaduw). Ook dit effect kan het best geïllustreerd worden met een voorbeeld. In onderstaande schermafbeelding heeft de eerste lijn wel en de tweede lijn geen schaduw. Verder zijn ze in alle opzichten gelijk.

    Bijzondere opmaakelementen voor letters

    Behalve cursieve, vette en niet-proportionele letters kunnen Netscape en Internet Explorer nog enkele bijzondere soorten letters weergeven. U vindt hier een overzicht van in het deelmenu Character van het menu Properties.

    De eerste twee mogelijkheden en de vierde in dit venster hebben we al op een andere manier onderzocht. Het zijn aanduidingen voor respectievelijk vet, cursief en niet-proportioneel. Met de derde mogelijkheid kunt u tekst onderstrepen. De vijfde en de zesde mogelijkheid spreken waarschijnlijk voor zich -- ze bieden u de mogelijkheid om met subscripts en superscripts te werken, bijvoorbeeld wanneer u een wiskundige formule wilt opschrijven. De zevende mogelijkheid (strikethrough) kunt u gebruiken om doorgestreepte tekst weer te geven. Bij al deze mogelijkheden moet worden aangetekend dat ze niet door alle bladerprogramma’s kunnen worden weergegeven.

    Andere eigenschappen van lettertekens

    In het deelmenu Character van het menu Properties staan nog enkele mogelijkheden die ik hier langs wil lopen. Onder Blink vindt u twee mogelijkheden om de kleur van de huidige tekst te veranderen. Met Text Color krijgt u een kleurenpalet, met Default Color laat u de tekst weer de kleur aannemen die de standaard is op de huidige pagina. Hieronder vindt u twee mogelijkheden om aan te geven dat de tekst tot een zogenaamd JavaScript-programma behoort. In hoofdstuk 6 ga ik hierop iets dieper in. Wanneer u de laatste mogelijkheid kiest, tenslotte, worden alle bijzondere eigenschappen die u aan een tekstfragment heeft toegekend, weggegooid. De tekst is niet langer, vet, knipperemd, groengekleurd of cursief. Hij neemt de standaard vormen aan.

    Over de laatste mogelijkheid in dit deel van het deelmenu, Blink (knipper), moeten nog een aantal woorden worden gewijd. In veel HTML-handleidingen wordt expliciet tegen het gebruik van knipperende teksten gewaarschuwd omdat het de lezer teveel af zou leiden. Nu is het waar dat het oog erg snel getrokken wordt door een knipperende tekst. Het wordt soms misschien zo sterk getrokken dat andere delen van de pagina minder de aandacht trekken. Toch kan een knipperende tekst een enkele keer een goed effect sorteren, bijvoorbeeld als u inderdaad uit alle macht het oog van de lezer op een bepaalde tekstgedeelte wilt richten, waarbij hij wat u betreft de rest van de tekst mag negeren. U kunt het best uiterst spaarzaam omgaan met de knipperfunctie. Maar hij zit er niet voor niets.

    Adres-informatie

    Uit het menuutje linksonder in de knoppenbalk hebben we tot nu toe twee mogelijkheden systematisch overgeslagen.

    De eerste mogelijkheid is preformatted (gepreformateerd). In hoofdstuk 1 is even aan de orde gekomen dat een gedicht dat gebruik maakt van veel bijzondere opmaak of een tabel die bekeken moet kunnen worden in een bladerprogramma dat geen tabellen ondersteunt, het best in een niet-proportioneel lettertype kan worden gezet. Wanneer u een tekstgedeelte gepreformatteerd verklaart, krijgt het dan ook een niet-proportioneel lettertype, maar bovendien worden alle spaties, harde returns en dergelijke die u in de tekst invoert gewoon overgenomen. U hoeft daarvoor dus geen speciale codes in te voeren.

    Interessanter is nog de mogelijkheid om een tekstgedeelte tot adres te bestempelen. Alle gegevens die u normaal gesproken aan het eind van een pagina toevoegt -- informatie over de Web-master, een e-mailadres, auteursrechtelijke informatie -- kunt u tot adres verklaren. Het effect hiervan in de vormgeving is dat al deze informatie cursief gezet wordt. Het betekent echter ook dat intelligente zoekprogramma’s op het Internet deze informatie als adres kunnen herkennen en bijvoorbeeld op de vraag: geef alle pagina’s die persoon X beheert de juiste naam en het juiste e-mailadres als antwoord kunnen geven. De uwe.