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.


Seniorennet