Waar vandaan: Thuis op Internet > Cursus website maken voor senioren >
9.3 Extra opmaak voor de tabel
Er zijn nog 2 dingen die je kan instellen met betrekking tot de opmaak van de cellen van je tabel, en je kan je tabel ook uitlijnen.
De eerste is dat je de plaats tussen 2 cellen kan aangeven. Ze hoeven
dus niet allemaal tegen elkaar te hangen, maar kunnen een bepaalde ruimte
tussen elkaar hebben.
Dit doen we door de parameter cellspacing="" mee te geven
aan de tag <table>.
Een voorbeeld:
<table width="50%" border="1" cellspacing="15"
cellpadding="0">
<tr>
<td>Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
</tr>
</table>
Dit wordt:
Cel 1 |
Cel 2 |
Bij bovenstaande voorbeeld zullen alle cellen 15 pixels van elkaar liggen. Dit kan je gebruiken om bepaalde effecten te creëren.
We kunnen ook de plaats tussen de tekst in de cel en de rand van de cel opgeven. Dit doen we door de parameter cellpadding=””. We geven hier ook een waarde op in pixels.
Een voorbeeld:
<table width="50%" border="1" cellpadding="15">
<tr>
<td>Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
</tr>
</table>
Dit wordt:
Cel 1 |
Cel 2 |
Zowel celspacing="" als celpadding="" combineren is ook perfect mogelijk in de tag <table>.
Bijvoorbeeld:
<table width="50%" border="1" cellpadding="15"
cellspacing="7">
<tr>
<td>Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
</tr>
</table>
Dit wordt:
Cel 1 |
Cel 2 |
We kunnen de tabel ook uitlijnen. We kunnen deze links, rechts of in
het midden plaatsen.
Dit doen we door de parameter die we reeds hebben gezien om titels of
tekst uit te lijnen, namelijk align="".
We kunnen in de tag <table> volgende 3 invoegen: align="left"
(links uitlijnen), align="center" (in het midden) of align="right"
(rechts uitlijnen).
Enkele voorbeelden ter verduidelijking:
<table width="50%" border="1" align="left">
<tr>
<td>Links</td>
</tr>
</table>
Dit wordt:
Links |
<table width="50%" border="1" align="center">
<tr>
<td>Midden</td>
</tr>
</table>
Dit wordt:
Midden |
<table width="50%" border="1" align="right">
<tr>
<td>Rechts</td>
</tr>
</table>
Dit wordt:
Rechts |
We gaan een extra tabel maken op onze voorbeeld pagina, we gaan de volgende mee integreren:
Huisdier | Aantal |
Kat | 1 |
Kippen | 5 |
Vissen | 30 |
Vogels | 5 |
De HTML code hiervan is:
<table width="50%" border="1" align="center"
cellpadding="2" cellspacing="5">
<tr>
<td><b>Huisdier</b></td>
<td><b>Aantal</b></td>
</tr>
<tr>
<td>Kat</td>
<td>1</td>
</tr>
<tr>
<td>Kippen</td>
<td>5</td>
</tr>
<tr>
<td>Vissen</td>
<td>30</td>
</tr>
<tr>
<td>Vogels</td>
<td>5</td>
</tr>
</table>
Dit maakt dat onze voorbeeldpagina hetvolgende wordt:
<html>
<head>
<title>Mijn persoonlijke website</title>
</head>
<body bgcolor="#99CCFF" text="#0000FF">
<h1><font color="#000000"
face="Courier New, Courier, mono">Mijn
persoonlijke website</font></h1>
<p>U bent hier beland op mijn persoonlijke website!</p>
<h2><font color="#000000">Beginpagina</font></h2>
<p>U bent op de <u>beginpagina</u> van mijn <u>persoonlijke
website</u>, van hieruit kan u naar de rest van mijn website surfen.</p>
<h3><font color="#000000">Welkom</font></h3>
<p>Ik heet u van harte welkom op mijn website. Veel plezier op
deze site, <i>en kom nog eens een keertje terug</i>!</p>
<p align="right"><font size="1">Deze
website wordt regelmatig bijgewerkt.</font></p>
<p>Op mijn <b>persoonlijke website</b> kan je heel
wat informatie vinden over mijzelf, en mijn interesses.</p>
<ul>
<li>Over mijzelf</li>
<li>Over mijn hobbies
<ol>
<li>Fotografie</li>
<li>Website's
maken</li>
</ol>
</li>
<li>Enkele links</li>
</ul>
<p>Mijn huisdieren:</p>
<table width="50%" border="1" align="center"
cellpadding="2" cellspacing="5">
<tr>
<td><b>Huisdier</b></td>
<td><b>Aantal</b></td>
</tr>
<tr>
<td>Kat</td>
<td>1</td>
</tr>
<tr>
<td>Kippen</td>
<td>5</td>
</tr>
<tr>
<td>Vissen</td>
<td>30</td>
</tr>
<tr>
<td>Vogels</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Klik hier om de voorbeeldpagina te bekijken.
Klik hier om naar de complexe tabellen te gaan.