De familie-tabel
Hoi Kim,
willen jullie eens meekijken op deze pagina?
http://members.chello.nl/j.ammers8/familie.html
... schots en scheef ...
nu kijk ik bij de bron (want daar kan ik het vast heel handig aanpassen ) maar ... ik ehm zie zoveel informatie staat dat ik niet zo goed zie welke cel van welke tabel is etc.
Tja, dat is ... precies de reden waarom tabellen niet zo geschikt zijn voor opmaak-zaken. Dat kan beter/mooier met css. Maar voor wie dit niet beheerst is er for the time being wel wat aan te doen (met maar een
klein beetje css erbij).
We gaan Kompozeren!
(Schenk eerst maar een bak thee in, want er valt wat te scrollen)
Kompozer-instellingen
Je kunt Kompozer op twee manieren instellen: allerlei eigenschappen direct in de html laten zetten, of in plaats daarvan css-eigenschappen gebruiken. Zie
familie-tabel-kompozer-options.gif.
- Voordeel van css-eigenschappen is, dat je er later een mooi stylesheet van kunt maken. Maar hierbij merk ik dat Kompozer een tekortkoming heeft. Eigenschappen zoals de breedte en hoogte van een afbeelding worden dan ook in een (inline) style="width: ..px; height: ..px" geplaatst. Als je dat in de html laat staan, vervuilt het de html met opmaak. Maar als je het via een ID naar je stylesheet zou overzetten, zouden alle images apart benoemd en gestijld moeten worden, wat de css vervuilt met een grote hoeveelheid afmetingen: van alle gebruikte afbeeldingen! Dat is ook erg lastig als je eens een image wilt vervangen door eentje met een wat andere afmeting. Dan moet je dat in je stylesheet gaan regelen.Bij een img kan in de html gewoon width=".." en height=".." opgenomen worden, maar dat doet Kompozer op deze manier dus niet.
- Als je het vakje "css-eigenschappen" daarentegen niet aanvinkt, zijn de eigenschappen van een element niet makkelijk naar een stylesheet te verplaatsen. Ik merkte ook dat Kompozer er "verboden eigenschappen" in stopt, zoals align="...". Dat mag volgens de html-specificaties niet.
- Daarom zou ik toch maar voor de css-eigenschappen kiezen, en de breedtes en hoogtes van images dan maar met de hand (in de code-weergave) omzetten:
HTML:
<img src="..." style="width: 300px; height: 200px;" alt=""><!-- attentie: px als eenheid! -->
wordt dan:
<img src="..." width="300" height="200" alt=""><!-- attentie: géén px als eenheid! -->
Heel onhandig! Maar na deze niet zo echt opmonterende intro nu het leukere werk. :d
Stap 1
Om de familie-tabel te maken, beginnen we met een schone lei: een nieuwe pagina. Nu een tabel invoegen van 1 rijtje en 3 kolommen. We slaan de pagina meteen op met een eigen naam.
Stap 2
We voegen de linker foto toe in de linker cel, en de rechter foto in de rechter cel. Nog geen instellingen regelen, alleen de locatie invullen, en vertellen dat er geen alt-tekst bij hoeft.
Stap 3
De gegevens invullen in de middelste cel. We geven elk van de regels een apart kop-formaat: de naam wordt een <h2>, de geboortedatum een <h3>, en de geboorteplaats een <h4>. Dat is makkelijk om later alles te stylen.
Verder moet deze cel altijd een breedte hebben van 200px (hoogte regelt zichzelf). In de cel gaan staan, rechts klikken, en "Eigenschappel tabel cel" venster oproepen. Alleen deze breedte opgeven, zie
familie-tabel-celbreedte.gif
Stap 4
Nu staat de tabel nog steeds over de volle breedte, en zit de tekst niet in het midden.
We gaan ergens in de tabel staan, en dan naar Menu > Tabel-eigenschappen. De breedte van 100% van het scherm wissen (als je dat bij een eerdere stap doet, zie je in de ontwerp-weergave alleen maar hele smalle lege cellen). Tabel gecentreerd uitlijnen! Tegelijk ontdoen we ons even van alle randjes en overbodige binnenruimtes, zie
familie-tabel-tabelproperties.gif.
Stap 5
Maar de tekst in de middelste cel zit nog niet in het midden. Als je in het tabblad "Cellen" van dezelfde Tabeleigenschappen de horizontale inhoud-uitlijning van de cellen vaststelt op "gecentreerd", zie
familie-tabel-celproperties.gif, dan blijkt dat niet voor de hele tabel te werken, maar alléén voor de cel waar je in staat. Ook onhandig! - Dat gaan we dus niet zo doen.
We duiken de code-weergave in. Er staat:
HTML:
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="5">
Dat verander je in:
HTML:
<table
style="text-align: center; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="5">
Nu geldt het wel voor de hele tabel.
Tegelijk pakken we ook even de kleuren in de tekstcel aan (ik zou iets donkerder achtergrond nemen voor de leesbaarheid).
Stap 6
Het begint er al op te lijken! Alleen nu zitten er onderaan de fototjes nog witte randjes, en komen ze niet mooi gelijk met de onderkant van de tekstcel in het midden. Zie
familie-tabel-img-uitlijnen.gif. Kan dat nou? - De reden is, dat er rekening mee gehouden wordt dat (bij tekst en een img op dezelfde regel) sommige letters neerhaaltjes hebben die onder de regel uitkomen, zoals een kleine letter p of j. De afstand komt er dan bij een img nog standaard onder. Maar het is te verhelpen met css!
Ga naar de code-weergave en tik in, op een nieuwe regel vlak voor de </head>:
HTML:
<style type="text/css">
table img {
vertical-align: top;
}
</style>
Nu is dat ook geregeld:
Stap 7
Nu we toch in de broncode bezig zijn, kan alle "inline" (inwendige) css uit de html gehaald worden. Daarvoor voegen we in de html op een aantal punten een class="..." (= "soort css") toe, en omschrijven we in de css-regels wat die class precies moet doen. Daarmee kan de css worden:
Code:
<style type="text/css">
body {
background: rgb(255, 255, 204);
color: black;
}
.fam { /* een class in de html heeft in de css dezelfde naam met een puntje ervoor */
margin: 15px auto; /* links er rechts automatisch (gecentreerd), boven en onder 15px */
text-align: center;
border: 0;
}
.fam img { /* = alle img's die in het element met de class="fam" zitten; hier dus alle images van de tabel */
vertical-align: top;
}
.fam-tekst {
width: 200px;
background: rgb(233, 118, 61);
color: white;
}
</style>
De html-code voor de tabel wordt nu heel overzichtelijk:
HTML:
<table class="fam" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><img alt=""
src="http://members.chello.nl/j.ammers8/kim-verkleind.jpg"
height="219" width="200"></td>
<td class="fam-tekst">
<h2>Mama Kim</h2>
<h3>13-07-1982</h3>
<h4>Geboren: Amstelveen</h4>
</td>
<td><img alt=""
src="http://members.chello.nl/j.ammers8/kimvakklein.jpg"
height="219" width="164"></td>
</tr>
</tbody>
</table>
En dat is andere koek dan het origineel
:
HTML:
<table style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: right; width: 262px;"><img style="width: 200px; height: 219px;" alt="foto" src="kim-verkleind.jpg">
</td>
<td style="width: 0px;" align="undefined" valign="undefined"></td>
<td style="vertical-align: top; text-align: center; background-color: rgb(255, 153, 102); width: 228px;"><big style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"><br>
Mama Kim</span></big><span style="font-weight: bold;"><br style="color: rgb(255, 255, 255);">
<br style="color: rgb(255, 255, 255);">
<span style="color: rgb(255, 255, 255);">13-07-1982</span><br style="color: rgb(255, 255, 255);">
<br style="color: rgb(255, 255, 255);">
</span>
<div style="text-align: right;">
<div style="text-align: center;"><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);">Geboren: Amstelveen</span></span><br>
</div>
<span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"></span></span></div>
<span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);">
<br>
</span></span></td>
<td style="width: 0px;" align="undefined" valign="undefined"></td>
<td style="vertical-align: top; text-align: left; width: 290px;"><img style="width: 164px; height: 219px;" alt="" src="kimvakklein.jpg"><br>
</td>
</tr>
</tbody>
</table>
Stap 8 t/m 2500
Het prettige van de classes in de html is, dat je bij een volgend familielid niet alles nog eens dunnetjes over hoeft te doen. De classes en dus de opmaak blijven hetzelfde, de html in feite ook, en alleen wat in een tabel anders is, hoeft te veranderen. Je kopieert gewoon de tabel in de broncode, je plakt 'm er onder, en dan kan je in de opmaak-weergave (of meteen in de broncode, wel zo snel) zo de andere foto's en de andere gegevens invullen. Hokus pokus, het gaat vanzelf!
Zo zijn al snel de 2500 familieleden in kaart gebracht.
Je kunt eventueel ook één foto gebruiken in plaats van twee. Celletje meer of minder: gecentreerd blijft het altijd.
Zo, dat leek wel een mini-cursus.
Succes,
ÇSShunter
