Om grote hoeveelheden gegevens overzichtelijk in uw webpagina te presenteren, kunt u gebruik maken van tabellen. In dit artikel leggen we aan de hand van onderstaand voorbeeld uit hoe u een tabel kunt maken en vormgeven.
1. Klik in het 'Body' veld op de plek waar u de tabel wilt invoegen en klik op het tabel-icoon:
2. Er opent zich een menu waarin u het gewenste aantal rijen en kolommen kunt ingeven. Voor dit voorbeeld nemen we 10 rijen en 10 kolommen. Klik op 'Insert/Update' om de tabel te plaatsen.
3. Nu kunt u de tabel gaan vullen met de te presenteren informatie.
4. Wanneer u onderaan de pagina op 'Opslaan / Save' klikt kunt u het voorlopige resultaat bekijken. Dit ziet er ongeveer zo uit:
5. Waarschijnlijk staat alle tekst erg dicht op elkaar. Klik op 'Bewerken / Edit' om terug te gaan naar de text editor.
Klik met de muis in de tabel en klik op het tabel-icoon. Om de tabel breder te maken en de tekst meer ruimte te geven voert u bij 'Width'bijvooprbeeld 100% in. (Bij 100% wordt er voor de tabel de maximale - in de template beschikbare- breedte genomen) Klik op 'Insert / Update'.
Wanneer u wederom de pagina opslaat zal het resultaat er ongeveer zo uitzien:
6. Om er voor te zorgen dat er iets meer ruimte komt tussen de regels gaat u terug naar de editor en klikt u op het icoon 'Row properties'.
Hier kunt u bij 'Height' de regelhoogte instellen. Voor dit voorbeeld maken we er 25px van.
Selecteer 'Update all rows in table'om de instelling op alle rijen toe te passen.
Het resultaat na opslaan ziet er ongeveer zo uit :
7. Ga terug naar de text editor en klik op het tabelicoon om de tabel een achtergrondkleur te geven.
Klik in het tabel menu op 'Advanced' en selecteer bij 'Background color' de gewenste kleur. Klik op 'Update' om de wijziging op te slaan.
8. Om de eerste rij een onderscheidende kleur te geven klikt u met de muis in de desbetreffende rij en klikt u op 'Row properties'.
Ga naar 'Advanced' om bij 'Background color' de gewenste kleur in te geven of te selecteren. Klik op 'Update'.
Het resultaat in de text editor ziet er ongeveer zo uit:
Sla de pagina op om het resultaat te bekijken. Dit ziet er ongeveer zo uit:
9. Om ervoor te zorgen dat er aan de linkerkant wat ruimte ontstaat tussen de tekst en de tabelrand gaat u terug naar de text editor. Klik met de muis in de eerste kolom en klik op 'Insert Column Before' om aan de linkerkolom een extra kolom toe te voegen.
(In sommige websites kunt u ook werken met cel 'margin' of 'paddng' om ruimte te bepalen. Dit wordt echter niet door elke template en door elke browser ondersteund.)
10. Om boven de tabel een tabeltitel toe te voegen klikt u met de muis in de bovenste rij en klikt u op 'Insert Row Before'.
Selecteer de hele eerste rij (behalve de eerste cel!) en klik op 'Merge Table Cells' om van de losse cellen één tabelrij te maken.
Door de tekst te selecteren en op het icoon 'Bold' te klikken (of Ctrl+B) kunt u de tekst vetgedrukt maken.
Om de bovenste regel een accentkleur te geven. Klikt u in de titelregel en vervolgens op 'Row Properties'.
Selecteer de gewenste kleur en klik op 'Update'.
Naar wens kunt u ook de tekstkleur aanpassen. Selecteer hiervoor de tekst en kies de gewenste kleur.
Sla de pagina op. Het resultaat ziet er ongeveer zo uit:
11. Om de leesbaarheid te vergroten kunt u kleine kleurverschillen aanbrengen in de rijen.
Klik in de 2e 'normale' rij en klik op 'Row Properties'. Selecteer bij 'Advanced' de gewenste achtergrondkleur en klik op 'Update'.
Herhaal dit voor de 4e rij, de 6e rij, etc.
Om het onderscheid tussen de waarden en labels te vergroten kunt u nog de teksten in de bovenste rij en de eerste kolom vetgedrukt maken.
Klik op 'Save/ Opslaan' om de tabel op te slaan.
