| |||
| |
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: |
|
 |
Je kunt dit proberen met tabs ( ) of spaties ( ), maar dan krijg je zoiets als: Nr. Naam kind Geb.datum Overl.datum 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. |
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.
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.
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.
We gaan nu de tabel vullen, te beginnen met de kopregel.
Vervang de eerder ingevoerde cijfers 1 t/m 4 door de juiste tabel koppen Nr, Naam kind, Geb. datum en Overl.datum en maak ze (per coloumn) vet.
In de rows 2 t/m 6 worden de lege columns stuk voor stuk gevuld vanuit het voorbeeld, waarbij je die van links naar rechts leest en je de gegevens uit die cellen per row van boven naar beneden invult (steeds binnen de begin- en eindtag).
Als je vervolgens (of tussendoor) via tabblad Preview je tabel bekijkt zul je zien, dat HTML-Kit netjes zelf de breedte van de cellen heeft bepaald en alle door jou ingevulde parameters (bgcolor, border, cellpadding, cellspacing) netjes heeft toegevoegd.
Op dit moment kun je steeds bepaalde parameters in de begintag van de tabel aanpassen, net zolang tot je tevreden bent.
Dan is het een kwestie van kopiëren (tabblad Editor) en plakken in het juiste veld in Geneanet.
Voor degenen die nog meer vrijheid in het maken van tabellen willen hebben, zijn er nog een aantal extra parameters beschikbaar.
Stel je wilt in de kopregel de tekst midden in de cel laten plaatsen in plaats van links uitlijnend: Plaats de cursor aan het einde van de begintag van de eerste row en geef een spatie. Uit het submenu kies je [align] (uitlijnen) en klik op het 'plusje' ervoor. Uit de aangeboden parameters kies je 'center'. Bekijk het effect via Preview.
Bij een langere tabel met nummers wil je mogelijk die nummers rechts laten uitlijnen. Helaas is dit alleen op cel (column) niveau te regelen. Bij elke column in elke rij die je rechts wilt laten uitlijnen, moet je zoals bovenstaand kiezen voor de parameter [align] en dan kiezen voor "right", maar met kopiën en plakken gaat dit snel(ler).
Je kunt zelf de breedte van de gehele tabel bepalen, door in de begintag de parameter 'Width' te selecteren en hier een percentage in te voeren. Bijvoorbeeld 80% betekent, dat de tabel 80% van de totale breedte van de pagina zal innemen.
Evenzo kun je zelf bepalen welke breedte de columns binnen een row krijgen. Je hoeft alleen in de columns in de eerste row een breedte parameter in te vullen. Hier moet je wel goed bekijken wat het effect is. De parameter 'Width' wordt in een percentage van de breedte van de tabel aangegeven.
Ps. Het aanpassen van kleuren in de tekst is geen tabelfunctie, maar een opmaakfunctie en wordt bepaald door de tag <font> en </font>, gekoppeld aan de parameter "color="#******"
 |
|
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.
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 >>) |
 |
||
Laatst geactualiseerd: 21 februari 2021 | Dickduck 2019 |
||
