Return: Informatiekunde


Tables, randen en breedte van de cellen

Door voorgaande te doen, heb je een "table" in je website.

Als je dit voor het eerst doet is het handig om te weten waar de cellen nu precies beginnen en eindigen. Dat kan door bijvoorbeeld de dikte van de rand op te geven. De html-code hiervoor is "border". Je verandert <TABLE> in <TABLE BORDER="1"> of je kiest een groter getal dan 1 voor een dikke rand. Je kunt ook nog de kleur van de "border" opgeven. Je krijgt dan zoiets als: <TABLE BORDER="1" BORDERCOLOR="#FF0000"> Als je tevreden bent verander je later border="1" in border="0". In sommige websites staat echter altijd een rand. De makers vinden het juist mooi en strak. Aan jou de keuze.

Als dit gelukt is, dan gaan we opgeven hoe breed de "table" en de cellen moeten worden. Bijna iedereen kiest voor het hele scherm. Daarvoor geef je een breedte op van 100%. De html-code die je hiervoor nodig hebt is "width" (= breedte). Omdat het over de "table" gaat en NIET over de cellen, moet je deze code tussen de haken zetten achter het woord "table". Verander nu simpelweg <TABLE .....> in <TABLE WIDTH="100%" .......>

Daarna gaan we ook de breedte opgeven van de drie cellen. Omdat mijn plaatje erg breed is wil ik de helft van het scherm reserveren voor dat plaatje. Daarom verander ik <TD> in <TD WIDTH="25%"> bij de bovenste en bij de onderste. De middelste <TD> verander ik nu in <TD WIDTH="50%"> en die wordt dus breder dan de andere twee rechthoeken (twee maal zo breed). Wat de Browser nu laat zien is links en rechts een smalle rechthoek met tekst en in het midden een brede rechthoek met een plaatje.

N.B. Het stuk vanaf <TR> tot en met </TR> kopiëren levert weer een nieuwe horizontale regel met drie cellen op, die onder de eerste komt. Zo doet iedereen het. Probeer dat uit! Kijk ook op het voorbeeld dat op papier staat. Daar kun je zien HOE de verschillende "tables" eruit zien en welke html-codes je daarbij moet gebruiken. Door te kopiëren maak je steeds een extra horizontale regel erbij. Voor een dambord moet je 9 maal kopiëren om tien regels te krijgen. Tussen elke <TR> en </TR> moet dan ook tien maal een zin staan, die begint met <TD> en eindigt met </TD>, omdat elke regel ook weer verdeeld moet worden in tien cellen naast elkaar. Een mooi voorbeeld is het Dambord