»» Nu worden de lessen een graadje moeilijker. Nu geen tekstopmaak, maar
tabellen. Tabellen?? Hey, we gaan toch geen wiskunde doen he?? Nee.
Tabellen worden namelijk op webpagina's niet zo gebruikt als ze bij
wiskunde worden gebruikt. Ook webhulpje.nl gebruikt tables. Als je
deze les gevolgd heb, zul je ze op nog veel meer websites tegenkomen.
Veel webpagina's maken gebruik van tables. Je kan er veel dingen mee
naast elkaar zetten, je website in verschillende vlakken verdelen,
je website overzichtelijker maken, je website een mooier design geven,
kortom, genoeg redenen. Zullen we dan maar beginnen???
tmmk
ps. Kijk, voordat u de les doet, onderaan de pagina!
HTML
Ok, tables zitten zoals ik zei ietsjes ingewikkelder in elkaar.
Zelfs Een ervaren webbouwer kan hier nog wel is de mist mee ingaan.
Een klein Tabletje:
<table> <tr> <td>
Hier komen eventueel plaatjes, links, tekst, of wat dan ook. </td>
</tr> </table>
Een korte uitleg van de tags vind ik hier wel op zijn plaats:
<table>: De begintag.
<tr>: een table row oftewel een rij.
<td>: table data invoeren.
Dit zijn de basistags (met de endtags erbij gerekend) voor een table.
Niet dat dit alle tags zijn maar minder mag niet.
Nu hebben we praktisch nog niks:
| Hier komen eventueel plaatjes, links, tekst, of wat dan ook. |
We gaan de table dus een beetje opvleuren:
<table border="3" bordercolorlight="#00FFFF"
bordercolordark="#888888" align="center" valign="middle">
<tr> <td bgcolor="#555555">
Hier komen eventueel plaatjes, links, tekst, of wat dan ook. </td>
</tr> </table> Nu hebben we dus:
| Hier komen eventueel plaatjes, links, tekst,
of wat dan ook. |
Ok, de kleuren zijn lelijk, maar de schoonheid straalt van de code af.
Even de attributen bij de <table> tag
uitleggen.
border="getal": dit attribuut geeft de dikte van de lijn die om de
table heen staat aan.
bordercolorlight="#kleur": dit geeft de kleur van de border,
linksboven aan.
bordercolordark="#kleur": dit geeft de kleur van de border,
rechtsonder aan.
align="plaats": Dit geeft aan waar de table in de lengte moet staan.
Mogelijke waarden zijn: left, center en right.
valign="plaats": Dit geeft aan waar de table in de hoogte moet staan.
Mogelijke waarden zijn: top, middle en bottom.
En nog onbesproken attributen voor in de <table>
tag:
width="getal": geeft de breedte van de table aan. Dit kan ook in
procenten.
height="getal": geeft de hoogte van de table aan. Dit kan ook in
procenten.
cellspacing="getal": dit geeft de ruimte tussen cellen weer in
pixels.
cellpadding="getal": dit bepaalt de ruimte tussen de cel(len) en de
rand.
bgcolor="#kleur": stelt de achtergrondkleur van de table vast.
En het attribuut bij de <tr> tag: bgcolor="#FF0000":
dit is de achtergrondkleur van de cell.
Zo dit waren alle attributen van de <table>
en de <td> tag.
We gaan er nu verder mee werken. Als je een table wilt met 2 rijen, naast
elkaar. Dan moet je 2 table data's maken in een row.
Zo komen er 2 vakken, in een rij. Als je op die manier blijft denken, valt alles
nog wel mee.
<table border="1" width="20"> <tr> <td> tekst
</td> <td> plaatje </td>
</tr> </table>
Nu krijgen we dit:
Ik hoop dat je het tot nu toe een beetje begrepen hebt, en zo niet, lees het dan
nog een keer door. We gaan nu een stapje verder.
We gaan de colspan en rowspan gebruiken. Colspan: Colspan staat voor collumn
span. oftewel cell-sprijding.
Je "sprijdt" met dit attribuut je cell uit over de lengte en/of
breedte van een cell.
Begrijp je het niet?? Dan hier een voorbeeld:
| Bovenaan tekst |
| linksonderaan tekst |
rechtsonderaan tekst |
Ik hoop dat je het nu wel een beetje begrijpt. de bonodigde code:
<table border="1"> <tr> <td colspan="2"> Bovenaan
tekst </td> <td> linksonderaan tekst </td>
<td> rechtsonderaan tekst </td> </tr>
</table>
Eigenlijk zeg je gewoon met colspan, maak jezelf in de breedte, net zo
groot als 2 cellen. Zorg wel dat je dan 2 cellen hebt in de row eronder. Anders
heeft het ook geen zin. Als je een cell evengroot wilt maken als 3 of meer
cellen, maak dan gewoon van de 2 bij collspan een 3 of meer. Vrij simpel,
eigenlijk. Nu een voorbeeld van de rowspan:
| tekst |
rechtsboven tekst |
| linksonder tekst |
En ook hier weer de benodigde code:
<table border="1"> <tr> <td rowspan="2"> tekst
</td> <td> rechtsboven tekst </td>
</tr> <tr> <td> linksonderaan tekst </td>
</tr> </table>
Als je dit begrijpt heb je tables maken goed onder de knie. Je kunt nu:
Tables uitlijnen Cellen van binnen uitlijnen Kleuren en grootes van de tables en
cellen regelen. Een cell net zo groot maken als 2 cellen horizontaal en
verticaal. De ruimtes tussen cellen en de rand regelen. De ruimtes tussen cellen
regelen. en je kunt nu de kleur van de borders regelen.
De volgende les gaat over forms.
_
|(\/)(\/)|<
Vorige les//--Terug naar
't webhulpje--\\Volgende les
Voor vragen kan je terecht in het forum!!
Copyright © 't webhulpje, Nederland
Alle rechten voorbehouden. Niets van deze elektronische uitgave mag worden
verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar
gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door
fotokopieėn, opnamen, of op enige andere manier, zonder voorafgaande
schriftelijke toestemming van de uitgever en/of de beheerder van deze website.