Tabellen zijn nuttig om informatie een beetje overzichtelijk weer te geven. In HTML lukt het weergeven wel, maar het maken van tabellen is nogal een gepruts, met een moeilijk leesbare code. I'm sorry, het is niet anders.
Ik laat u eerst een tabelletje zien en daarna de code die er bij hoort:
| Patat | normaal | 2,75 |
| Patat | dubbel groot | 4,25 |
| Mayo | 0,50 |
<TABLE BORDER="1"> <TR> <TD>Patat</TD> <TD>normaal</TD> <TD>2,75</TD> </TR> <TR> <TD>Patat</TD> <TD>dubbel groot</TD> <TD>4,25</TD> </TR> <TR> <TD>Mayo</TD> <TD><BR></TD> <TD>0,50</TD> </TR> </TABLE>
Voor de goede orde: ik heb hier alles blunt achter elkaar getikt. In uw code zult u dit vermoedelijk wat ordelijker neerzetten.
Laten we de diverse tags eens uit elkaar peuteren. Vooraan en achteraan staat de tag <TABLE> ... </TABLE>. Dat betekent, zoals u al vermoed zult hebben, zoveel als: hier begint c.q. eindigt deze tabel. Hier is er nog een attribuut aan toegevoegd (BORDER="1"): er is opgegeven dat er een randje met een dikte van 1 om elke cel heen gezet moet worden. (U ziet zometeen hoe u hier wel of geen gebruik van kunt maken.) Dan is een tabel in rijen opgedeeld: <TR> ... </TR>, van "table row". Binnen elke regel zijn weer cellen gedefinieerd, met <TD> ... </TD>, van "table data".
De eigenlijke gegevens vindt u dus steeds in zo'n cel. Hier: eerste rij, cel 1: "Patat", enzovoorts. Kijkt u even of u de diverse stukjes tekst op de verwachte locatie in de code kunt terugvinden. (Misschien is het makkelijk als u deze pagina even uitprint, en met een accentueerstift of zo de code te lijf gaat.)
Dit is leuk, en voor veel situaties kunt u hier mee uit de voeten. Maar er zijn diverse methoden om het uiterlijk van een tabel te beïnvloeden.
Hier moet u maar eens mee experimenteren. Tekent u op een stukje papier een tabel met wat van dit soort grappen, en bedenkt u eens hoe dat in HTML zou moeten. Grote kans dat het de eerste keer niet lukt: gewoon verder prutsen.
| Tabellen worden vaak gebruikt om een "stramien" over een pagina te leggen en daarmee teksten en afbeeldingen precies te kunnen plaatsen. Wellicht bent u gewend om de pagina's in uw verenigingsblad in kolommen te verdelen. | Dat kunt u hier doen door een tabel van 1 regel te maken, en 3 cellen. In elke cel komt dan een stukje tekst. U zult dan wel een beetje moeten schuiven om die tekst in gelijke stukken te verdelen. Het attribuut "VALIGN="top"" lijkt hier op zijn plaats. | Als extra accessoire heb ik hier wat witruimte tussen de stukjes tekst gemaakt. Dat gaat met <TABLE CELLSPACING="aantal pixels">. |
U kunt hiermee ook het hele beeld van een pagina beïnvloeden. Een vaak voorkomende indeling bestaat hieruit dat de linkerreep van een pagina voor navigatie wordt gebruikt, en de rechterzijde de "gewone" tekst bevat. U zoudt dit dan zo vormgeven dat de pagina uit een tabel bestaat met één rij en twee cellen. De hoogte van die cellen is dan gelijk aan die van de gehele pagina. Eventueel kunt u nog een verticaal lijntje trekken tussen die twee cellen. Dat neemt dan de vorm aan van een middelste cel, die heel smal is, en de gewenste kleur als achtergrondkleur heeft.
Zo'n pagina-grote tabel, met een zwarte verticale streep van 3 pixels breed, zou er dan qua code als volgt uit zien:
<TABLE>
<TR>
<TD WIDTH="200">(hier volgt dus de gehele inhoud van het linker deel)
</TD>
<TD WIDTH="3" BGCOLOR="black">
</TD>
<TD WIDTH="*">(hier volgt het rechter deel)
</TD>
</TR>
</TABLE>
Toch nog even een waarschuwende opmerking bij het bovenstaande. Ik heb zojuist beschreven hoe u de breedte van een kolom kunt instellen. Dat is heel nuttig, maar het kan problemen opleveren bij het uitprinten van een pagina. Stelt u zich voor: u hebt een pagina gemaakt met diverse kolommen. Aan de linkerkant een hoeveelheid navigatie-toestanden, in het midden de "hoofdtekst", daarnaast nog wat plaatjes of reclame of zo, en dan rechts nog wat, externe links of zo. Al knutselend bent u uitgekomen op 200 plus 500 plus 150 plus 200 is 1050 pixels breed, past prima op uw beeldscherm. Echter, als iemand zo'n pagina uitprint zou er aan de rechterkant best wel wat kunnen wegvallen.
Hoe erg dat is zal van de omstandigheden afhangen. Maar als te verwachten is dat er nog wel eens een print van uw pagina gemaakt zou kunnen worden, verdient het aanbeveling om met dit probleem rekening te houden. (Voorbeeld: als u een stel wandelingen beschreven hebt, zal uw bezoeker eerder een printje meenemen dan een laptop.) In zo'n geval zou ik u adviseren om daar bij de lay-out van de pagina rekening mee te houden, en eens een print te (laten) maken, bij voorkeur op verschillende printers.
We hebben zojuist de TH-tag besproken, waarmee u de bovenste rij van een tabel wat extra nadruk kunt geven. Een meer algemene truc om de gegevens in een tabel wat meer te structureren is intussen bedacht: u kunt een tabel in drie stukken verdelen, kop, lichaam en voet, ofwel <THEAD>, <TBODY> en <TFOOT>. Ik laat hier zometeen een voorbeeld van zien.
Hierboven hebben we gezien dat u ofwel randen tussen alle cellen kunt maken, ofwel die randen uit kunt zetten, met BORDER="1" (of een ander aantal) of BORDER="0" in de TABLE-tag.
Kennelijk is er vraag geweest naar meer mogelijkheden op dit gebied. Met het attribuut RULES in de TABLE-tag kunt u wat extra trucs uithalen. Er zijn diverse waarden bij dit attribuut mogelijk, maar ik kan me bij slechts twee ervan een zinnig gebruik voorstellen. Met RULES="none" bereikt u dat er geen randen binnen een tabel worden getoond. Met RULES="groups" zet u horizontale randen tussen de drie hierboven genoemde groepen.
Als u dit wilt bereiken, zet u dus in de TABLE-tag het attribuut RULES="groups". Vervolgens deelt u de tabel als volgt in:
<TABLE RULES="groups">
<THEAD>
(volgt alles wat er in de kop moet)
<TBODY>
(volgt alles wat er in de romp moet)
<TFOOT>
(volgt alles wat er in de voet moet)
</TABLE>
En dan zou u dit effect moeten bereiken (spiekt u desgewenst rustig even in de code):
| Type | Lancia Fulvia | Peugeot 404 | Renault 16 |
| Cylinderinhoud | 1216 cc | 1618 cc | 1470 cc |
| Motorvermogen | 71 pk | 70 pk | 55 pk |
| Topsnelheid | 145 km/u | 146 km/u | 142 km/u |
| Prijs | ƒ 10.650 | ƒ 9.980 | ƒ 8.650 |
(Dat waren de nieuwprijzen in 1966 of daaromtrent... in die tijd had je een Jaguar E-type voor nog geen 40 mille!)
Maar ik moet zeggen dat u hier ongeveer hetzelfde effect zou hebben kunnen verkrijgen door het middelste gedeelte als één regel te behandelen, en de diverse items binnen elke cel met een BR-tag onder elkaar te zetten...
Maakt u een klein tabelletje, met een enkele rij en twee cellen. Ga voor uzelf na dat de code zou moeten bestaan uit, van buiten naar binnen: de TABLE- en /TABLE-tags, éénmaal de tags "TR" en "/TR" (omdat er slechts één rij is), en tweemaal de tags "TD" en "/TD" (omdat er twee cellen per regel zijn).
| Tabellen zijn lastig | maar met wat prutsen kom je er wel. |
Hieronder vindt u een tabel met wat grapjes. Kijkt u in de code (blader voor die truc desnodig even terug naar het hoofdstukje Wat hebt u nodig?) en probeer na te gaan of u begrijpt hoe het zo werkt. Maakt u daarna een tabel naar eigen inzicht.
| Onderdelenmarkt | ||
| Onderdelen aangeboden | ||
| versnellingspook | Alfa Spider 1969 | 67,50 |
| De Dion-as | Daf 66 1976 | t.e.a.b. |
| Boeken gezocht | ||
| Werkplaatshandboek | Volvo Amazone | Moet in goede staat verkeren, geen ezelsoren, koffievlekken en met van dat soort ellende! |
(Ik heb hier wat mee moeten prutsen voor het ding er uit zag zoals ik wou. De breedte van de derde cel (150 pixels) kon ik pas opgeven bij de laatste tekst (over die ezelsoren). Als ik het opgaf bij de "67,50" werkte het niet.)
Als u een tabel van 20 bij 80 cellen moet maken met alle mogelijke opmaakcodes, zult u bij voorbaat hoofdpijn krijgen. Kan ik me voorstellen. In dat geval zoudt u kunnen overwegen uit te wijken naar een "normale" terkstverwerker, zoals Word 97 of later, danwel de tekstverwerkers van WP Office, Lotus of Star Office. (Voor normaal werk houdt u het natuurlijk op Kladblok of zo, maar voor deze rotklus mag u smokkelen.) Ook met Excel kunt u HTML-tabellen maken.
U kunt nu naar Plaatjes.