Ronde animated Zwaan
 

6: Tabellen

Nut en toepassing van tabellen

Tabellen zijn weliswaar vrij moeilijk te programmeren in HTML, maar zie bieden de gebruiker een grote mate van vrijheid om zelf te bepalen hoe en waar op de pagina bepaalde teksten zullen worden weergegeven.

Stel, je hebt een familie waarvan de kinderen op zich niet belangrijk genoeg zijn om ze als aparte personen op te nemen; je wilt ze echter voor de volledigheid wel bij de ouders vermelden (bijv. in het notitieveld bij partnerschap). Je wilt dat de vermelding in Geneanet er als volgt komt uit te zien:

Kinderen Zwaan

Je kunt dit proberen met tabs ( ) of spaties ( ), maar dan krijg je zoiets als:


Nr.Naam kindGeb.datumOverl.datum
1 Willem Hendrik Zwaan 2 januari 1865 18 december 1920
2 Jannetje Gijsbertha Zwaan 5 juni 1866 onbekend
3 Cornelis Frederik Zwaan 9 september 1868 10 september 1868
4 Willemijn Zwaan 23 december 1870 5 mei 1954
5 Elisabeth Johanna Zwaan 2 april 1872 18 november 1962


Dit is het nog niet helemaal; natuurlijk kun je dit proberen te repareren door 'losse' spaties en tab's toe te voegen, maar helemaal netjes wordt het nooit.

Werking tabellen

Bij het maken van tabellen krijg je te maken met horizontale cellen (rows / rijen) en verticale cellen (columns / kolommen) 1. Een tabel bestaat dus uit een aantal rows en columns. Elk kruispunt van een row en een column levert een cel op. Een tabel met 7 rows en 5 columns heeft dus 35 cellen. Elke cel moet apart worden ingevuld en kan een individuele opmaak krijgen, maar zo ver hoef je niet te gaan. Bij tabellen kun je zelf grootte, hoogte, breedte, kleur en dikte van cellen en lijnen (of geen) instellen, zodat je een grote invloed kunt uitoefenen op het aanzicht van de tabel. In deze instructie ga ik uit van eenvoudige tabellen zonder teveel toeters en bellen.
Gelukkig biedt HTML-Kit een groot aantal (semi-)automatische instellingen voor tabellen, waardoor die je veel werk uit handen kan nemen.

1 In het vervolg spreek ik over rows en columns, omdat deze termen ook door HTML-Kit worden gebruikt.

Ontwerpen van bovenstaande tabel

Bovenstaande tabel beziende kunnen we zien, dat deze uit 4 columns en 6 rows. Er moeten dus 24 cellen worden gevuld, waarbij de eerste row vet gemaakt moet worden. Een belangrijke functie van HTML-Kit is dat hij bij invoer van het teken < al weet dat je een element wilt invoeren (er moet wel minimaal 1 spatie volgen op deze <). Ga naar de eerstvolgende blanco regel (of de plaats waar je de tabel wilt invoeren) en typ daar < .
Direct wordt een pop-upscherm geopend met heel veel elementen. typ een t, zoek table en (dubbel)klik erop. Je ziet nu <table></table>. Plaats je cursor achter de e van de eerste table en geef een spatie. De tekst wordt met een aantal regels uitgebreid. Helaas heeft HTML-Kit hier een 'bug'. Op de laatste regel zie je een dubbele eindcode. Verwijder het deel ></table> (incl. één >), zodat alleen de eindcode </table> overblijft.

Invoeren rows en columns

De begin en eindcode <tr> en </tr> geven een row aan. Elke nieuwe row wordt tussen deze twee van deze codes opgevoerd (onder de laatste row).
De begin en eindcode <td> en </td> geven een column aan. Elke nieuwe column wordt tussen deze twee van deze codes opgevoerd. Indien meerdere columns binnen 1 row nodig zijn, worden deze ook binnen dezelfde begin- en eindcode van de row geplaatst. Feitelijk vormen de gegevens die tussen <td> en </td> worden ingevoerd de cellen.
In ons voorbeeld hebben we zoals al is aangegeven, een tabel nodig van 6 rows en 4 columns. Voor het overzicht is het beter om elke cel (column) op een aparte regel te beginnen. Eerst gaan de de tabel zelf 'optuigen'.
Binnen de rowcodes
<tr>
</tr>
zien we 1 paar <td> </td>

Kopieer dit ene paar en plak het direct daaronder 3 x terug. Je hebt nu 4 paren <td> </td> tussen de begin- en eindcode van de row.
Kopieer vervolgens de 6 regels van <tr> t/m </tr> en plak deze 5 x onder de bestaande 6 regels. Je hebt nu totaal 38 regels voor de tabel (incl. de begin- en eindcode voor de tabel zelf)
Zou je nu naar de Preview gaan, dan krijg je (als alles correct is uitgevoerd) niets te zien. Dat komt, omdat alleen de tabel is gedefinieerd, maar nog leeg en onopgemaakt is.
We gaan daarom eerst de tabel zelf aanpassen. Dit doen we in de begincode <table>. Voer onderstaande handelingen uit:

Handeling Uitleg/toelichting

In de eerste row plaatsje de cijfers 1 t/m 4 in de 4 columns (tussen de begin- en eindtag)

Door deze cijfers te plaatsen kun je zien hoe de tabel er uit komt te zien in tabblad Previes. Later kun je deze cijfers vervangen door de uiteindelijke tekst.

Plaats de cursor in de begintag <table summary=""> achter "" en geef een spatie

Door in een begincode een spatie achter het laatste teken te zetten, geeft HTML-Kit je een aantal variabelen, waarmee de code voorzien kan worden van diverse parameters

Na de spatie verschijnt het submenu. Kies daaruit [border] en (dubbel)klik hierop; binnen de "" voer je een getal tussen 1 en 5 in.

Dit bepaalt de dikte van de lijnen binnen de tabel. Je kunt hiermee 'spelen' en de waarde steeds aanpassen. Via het tabblad Preview kun je dan zien wat het resultaat is (Ps. je ziet slechts 1 row (4 columns), maar je kunt achteraf, als de tabel helemaal gevuld is, alsnog de waarde aanpassen.)

Geef achter de laatste " van de border opnieuw een spatie en kies [bgcolor] en (dubbel)klik hierop; via de kleurkiezer in de [favorites]bar kies je een geschikte kleur en klikt daarop.

Kies hier pasteltinten, anders wordt het al snel té gekleurd. Ik heb gekozen voor een pasteltint geel ("#ffffcc")

Geef achter de laatste " van de bgcolor opnieuw een spatie en kies [cellpadding] en (dubbel)klik hierop; voer tussen de "" het getal 5 in.

Cellpadding geeft de afstand aan tussen de tekst en de omliggende randen. Cellpadding geldt voor alle 4 zijden (links-rechts-boven-onder). Ook hierbij geldt, dat je dit zelf moet uitproberen, door een waarde te geven of te wijzigen en dit via tabblad Preview te bekijken.

Geef achter de laatste " van de Cellpadding opnieuw een spatie en kies [cellspacing] en (dubbel)klik hierop; voer tussen de "" het getal 0 in.

Cellspacing geeft de ruimte aan tussen de diverse cellen binnen de tabel. Bij waarde 0 is er geen ruimte en bestaan de lijnen uit 1 enkele streep. Bij een waarde van 1 of hoger worden er rondom elke cel aparte lijnen geplaatst met een tussenruimte ter grootte van de hier ingevoerde waarde. Ook hierbij is het een kwestie van uitzoeken wat voor jou de mooiste oplossing is.


Behalve de cijfers 1 t/m 4 zien we nog niet veel, maar we kunnen al wel zien hoe onze tabel er uit komt te zien.

Meer mogelijkheden

Voor degenen die nog meer vrijheid in het maken van tabellen willen hebben, zijn er nog een aantal extra parameters beschikbaar.

Gekoppelde cellen

Het is mogelijk om bepaalde columns aan elkaar te koppelen tot 1 cel. Stel dat je deze tabel wilt maken:
samengevoegde cellen
  1. Maak eerst de matrix voor een tabel met 5 rows en 4 columns door de begin- en eindtags van Row (tr) en Column (td) te kopiën (5 rows met elk 4 columns). De parameters (in de begintag van de tabel) zijn: [bgcolor="#d6fbd0" border="2" cellpadding="3" cellspacing="3"]

  2. In de eerste row in de begintag een spatie geven en uit het submenu de keuze colspan kiezen. (Dubbel)klik hierop en voer tussen "" het getal 4 in. (Dit betekent dat deze column de totale breedte van 4 kolommen krijgt). Voer ook de parameter align="center" in (zoals boven uitgelegd)

  3. Verwijder vervolgens de 3 overgebleven begin- en eindtags van de columns uit row 1

  4. In row 2 doe je in de columns 1 en 2 hetzelfde, alleen is de colspan hier niet "4", maar "2". Ook hier de 2 overgebleven begin- en eindtags van de columns uit row 2 verwijderen. Voer ook de parameter align="center" in (zoals boven uitgelegd)

  5. In de (enige) column van row 1 voer je de tekst "OUDERS" in en maak deze vet; in de twee columns van row 2 voer je achtereenvolgens "MAN" en "VROUW" in en maak deze ook vet.

  6. In de rows 3 t/m 5 voer je per column de gegeven (fantasie)namen in.

In de HTML-codering uit HTML-Kit is dit dan het uiteindelijke resultaat (alleen rows 1 t/m 3 afgebeeld)
Ik denk dat je hiermee voldoende handvatten hebt om een tabel netjes in Geneanet te kunnen krijgen.


samengevoegde cellen in HTML




Als alle opgemaakte tekst geheel naar verwachting is, kun je deze (vanuit tabblad Editor) kopiëren en in het betreffende Geneanet-veld plakken. Controleer wel of het resultaat in Geneanet overeenstemt met de Preview in HTML-Kit. Als dat zo is, hoef je het 'origineel' in HTML-Kit niet langer te bewaren.

Heb je op- of aanmerkingen, aanvullingen, correcties? Laat het me weten via een mailtje (klik >>) stuur mail Alle reacties worden beantwoord!

Zwemmende Zwaan

Laatst geactualiseerd: april 2024

Dickduck 2019