cursus 2: toveren met TABELLEN

Les 4


De tabel gebruikt voor de opmaak


Zoals gezegd gaan we nu in praktijk brengen wat we tot nu toe geleerd hebben...
Los van de dingen die ik voorkauw kun je natuurlijk zelf ook wat dingen uitproberen om te zien wat er gebeurt.

Hier is een kleine ongesorteerde lijst:

Ingrediënten voor appeltaart

Dit is allemaal leuk en aardig, maar wat als we het recept hier willen plaatsen...

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel

...omdat we er een plaatje naast willen zetten van een...     appeltaart!

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel

Om dit te bereiken kunnen we wel een tabel gebruiken, denk je niet?
Als we een tabel maken, zetten we er eerst kaders om. Dan zie je tenminste wat je doet!

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel

We gaan dit tabelletje stap voor stap opbouwen. Het is eigenlijk niet zo moeilijk!
Begin met een tabel en zet de ongeordende lijst erin:

<table border="3">
<tr>
<td> Ingrediënten voor Appeltaart
<ul>
<li>Appels
<li>Meel
<li>Suiker
<li>Kaneel
</ul>

</td>
</tr>
</table>

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel


Weet je nog, als je geen afmeting opgeeft maakt de browser de tabel zo groot als hij zijn moet om de data er in te laten passen.
Vervolgens gaan we de tabel (bijna) zo breed maken als het scherm en voegen we nog een tweede cel toe. De linker cel maken we iets kleiner dan de rechter cel.

<table border="3" width="100%">
<tr>
<td width="40%"> </td>
<td width="60%"> Ingrediënten voor Appeltaart
<ul>
<li>Appels
<li>Meel
<li>Suiker
<li>Kaneel
</ul>
</td>
</tr>
</table>

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel


Als je dat nog niet gedaan hebt, kopieer dan nu even het plaatje van de appeltaart (applepie.gif) naar je werkdirectory.
Zet het nu in de linker cel.

<table border="3" width="100%">
<tr>
<td width="40%"> <img src="applepie.gif"> </td>
<td width="60%"> Ingrediënten voor Appeltaart
<ul>
<li>Appels
<li>Meel
<li>Suiker
<li>Kaneel
</ul>
</td>
</tr>
</table>

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel


We moeten nu alleen nog het plaatje aan de rechterkant van de cel uitlijnen en de kaders uitzetten.

<table border="0" width="100%">
<tr>
<td width="40%" align="right"> <img src="applepie.gif"> </td>
<td width="60%"> Ingrediënten voor Appeltaart
<ul>
<li>Appels
<li>Meel
<li>Suiker
<li>Kaneel
</ul>
</td>
</tr>
</table>

Ingrediënten voor Appeltaart
  • Appels
  • Meel
  • Suiker
  • Kaneel


Het is weer gelukt!


Een tabel in een tabel


Kunnen we ook een tabel in een tabel zetten. Gelukkig wel. Je kunt er namelijk heel mooie effecten mee creëren.
We beginnen met een simpele tabel:

Jan Kees Piet
Rick Jeroen Ronald
<table border="3">
<tr>
<td>Jan</td>
<td>Kees</td>
<td>Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

We kopiëren deze tabel. Vervolgens verwijderen we uit de code de naam Jan en op die plaats plakken we de gekopieerde tabel.
De code ziet er dan zo uit:

Jan Kees Piet
Rick Jeroen Ronald
Kees Piet
Rick Jeroen Ronald
<table border="3">
<tr>
<td>  <table border="3">
      <tr>
      <td>Jan</td>
      <td>Kees</td>
      <td>Piet</td>
      </tr>
      <tr>
      <td>Rick</td>
      <td>Jeroen</td>
      <td>Ronald</td>
      </tr>
      </table>
</td>
<td>Kees</td>
<td>Piet</td>
</tr>
<tr>
<td>Rick</td>
<td>Jeroen</td>
<td>Ronald</td>
</tr>
</table>

Het resultaat is een tabel in een tabel!


Afbeeldingen als link


In les 4 van 'HTML voor beginners' is een imagemap gemaakt. Dat was vrij ingewikkeld. Daarbij werd een plaatje in vieren gesplitst en kon elk deel van dat plaatje als link gebruikt worden. Met behulp van tabellen kunnen we dat resultaat veel simpeler bereiken met behulp van de volgende vier plaatjes: les1.gif, les2.gif, les3.gif en les4.gif

      

We maken een tabel met vier cellen (twee rijen en twee kolommen) en zetten in elke cel een plaatje:

<table>
<tr>
<td><img src="afb/les1.gif"></td>
<td><img src="afb/les2.gif"></td>
</tr>
<tr>
<td><img src="afb/les3.gif"></td>
<td><img src="afb/les4.gif"></td>
</tr>
</table>

We zetten de cellpadding, de cellspacing en de border van de tabel en de border van de afbeeldingen op nul, voegen de links toe en klaar is Kees!

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href=".........."><img src="les1.gif" border="0"></td>
<td><a href=".........."><img src="les2.gif" border="0"></td>
</tr>
<tr>
<td><a href=".........."><img src="les3.gif" border="0"></td>
<td><a href=".........."><img src="les4.gif" border="0"></td>
</tr>
</table>

Een plaatje splitsen met een tabel


Hier komt een situatie die we met een tabel kunnen oplossen.
Stel dat je een lumineus idee hebt voor een bewegend plaatje (animatad gif). Het probleem is alleen dat je plaatje wat aan de grote kant is. Misschien weet je dat een animated gif uit een serie gif's bestaat die na elkaar worden getoond. Je bestand wordt dus zo groot als de grootte van het plaatje maal het aantal keren dat het na elkaar getoond wordt. De lezers van je homepage zullen niet blij zijn als er ongevraagd 700 kB data door hun telefoonlijn geperst wordt. En dat is nog niet alles; van een plaatje van dat formaat kan de browser het ook behoorlijk moeilijk krijgen, zeker op de wat tragere systemen. De oplossing? Verdeel het plaatje in hapklare brokken en zet ze in een tabel.
Hier is een voorbeeld:

Netscape tegen Microsoft?

Artwork by Boris Vallejo

Hier is dezelfde tabel maar nu met de cellspacing aangezet.

Netscape tegen Microsoft?

Je ziet dat het enige bewegende deel van het plaatje de ogen zijn. Alleen dat kleine stukje hoeft dus meerdere keren getoond te worden om het te laten bewegen. Het zou zonde van de bandbreedte zijn om de rest, die toch hetzelfde blijft, ook steeds opnieuw binnen te halen.

Hier is de html code voor die tabel. De titel tussen de <caption>-tags heb ik er zelf voor de grap bijgezet. Het is natuurlijk niet noodzakelijk en het heeft verder geen effect op de tabel. Je hebt nu wel weer een extra tag geleerd.

<table border="0" cellspacing="0" cellpadding="0">
<caption align="top"><h4>Netscape tegen Microsoft?</h4></caption>
<tr>
<td rowspan=3><img src="draak4.gif"></td>
<td><img src="draak3.gif"></td>
<td rowspan=3><img src="draak5.gif"></td>
</tr>
<tr>
<td><img src="ogen.gif"></td>
</tr>
<tr>
<td><img src="draak2.gif"></td>
</tr>
</table>

Dit is de layout.

draak4.gif
	  
draak3.gif
	  
draak5.gif
ogen.gif

	  
draak2.gif

	  

Als je het zelf wilt proberen, sla dan eerst de afbeeldingen op in de map waar ook je pagina met de tabel staat!


En nu verder?


Na deze cursus 'toveren met TABELLEN' gaan we verder met de cursus 'het gebruik van FRAMES'.
Verder wil ik je wijzen op het tag-overzicht. Dit is een overzicht van alle tags die je in deze cursussen tegenkomt met een link naar de pagina waarin er iets over deze tags verteld wordt.


einde les 4
naar toveren met TABELLEN - les 1
naar het tag-overzicht