">
Hart.GratisHandleiding.eu

Gratis Handleiding (en veel meer). De site met gratis handleidingen, handleidingen om gratis software te downloaden, gratis games te spelen, dvd's te kopieeren, te besparen, vakantie- en reistips, pagina's voor kinderen, senioren, te datenonline te shoppen, online casino spelen, handleiding bridge, handleiding mahjong, solliciteren, keuze van uw mobiele telefoon en veel meer..... Verder vindt u ook de beste surftips.

HOME HANDLEIDINGEN RECEPTEN ZOEKEN CONTACT ZOEKEN

 Rubrieken:

  Website maken

  Aanmelden site bij
  zoekmachines

  Banner en buttons

  CSS cursus beginners

  Eigen startpagina

     Handleiding startpagina

  Favicon maken

  HTML cursus beginners

  HTML cursus gevorderden

  Links naar uw site

  Linkwoorden

  Logo's maken  

  Sitemap maken

  Sitemap verzenden

  Webbadge

  Webhosting

  Website gratis

  Website promotie

  Webmaster
  hulpprogramma

  Zoekwoorden

Tabellen

Bij tabellen denk je waarschijnlijk aan saaie overzichten van cijfers en andere informatie. Dan heb je echt een verkeerd beeld van wat je allemaal met tabellen kunt doen. Er bestaan maar weinig websites die geen gebruik  maken van tabellen. Probeer het onderstaande maar eens te bereiken zonder tabellen (en css, maar dat komt later).

Probeer

eens

dit

zonder

maar

tabellen

Dat wordt moeilijk inderdaad. Hierboven zie je dus een tabel. Dat is  op de volgende manier duidelijker:

Probeer

eens

dit

zonder

maar

tabellen

Het zal je duidelijk worden dat je met deze tabellen veel kunt doen.  Zo kun je bijvoorbeeld tekst in twee kolommen zetten:

Dit is de eerste kolom van de tekst. Deze tekst gaat eigenlijk  nergens over, maar laat je wel zien dat je met tabellen...

 

...tekst in twee kolommen kunt zetten.  Natuurlijk is het mogelijk om de tekst in 3, 4 of meer kolommen te zetten!

Zo zijn er nog veel meer belangrijke toepassingen van tabellen in een  webpagina. Voor een goede webpagina zijn tabellen bijna onmisbaar. We gaan je  nu leren hoe je zo'n tabel maakt.

Zoals je weet bestaat een tabel uit rijen en kolommen. Hieronder zie je een tabel met 5 rijen en 2 kolommen:

 

 

 

 

 

 

 

 

 

 

Dit is een kolom met 2 rijen en 5 kolommen:

 

 

 

 

 

 

 

 

 

 

Nu willen we een tabel opnemen in onze html-code. Het begin van een tabel  markeren we met de tag <table>. We eindigen een tabel altijd  met de sluittag </table>. Maar met alleen die twee codes  kan de browser niets. We moeten opgeven hoeveel rijen en kolommen er in  moeten komen. Het begin van een nieuwe rij geef je aan met de tag <tr>,  van Table Row(tabel rij). Je geeft hiermee aan dat je de  tabelrij begint. Het einde van een rij geef je natuurlijk aan met </tr>.

Zo een rij hebben we, maar ook hier kan de browser niet veel mee. Een  rij zonder kolommen bestaat namelijk niet, iedere rij heeft minstens 1  kolom. Onze tabel krijgt 2 kolommen. Het begin van een kolom geef je aan  met de tag <td>, van Table Data. Deze tag sluit  je natuurlijk af met </td>. De broncode van onze tabel met  2 rijen en 2 kolommen ziet er zo uit:

<table>

<tr>
<td>Inhoud van kolom 1 in rij 1</td>
<td>Inhoud van kolom 2 in rij 1</td>
</tr>

<tr>
<td>Inhoud van kolom 1 in rij 2</td>
<td>Inhoud van kolom 2 in rij 2</td>
</tr>

</table>

Het resultaat ziet er zo uit:

Inhoud van kolom 1 in rij 1

Inhoud van kolom 2 in rij 1

Inhoud van kolom 1 in rij 2

Inhoud van kolom 2 in rij 2

Dit stelt nog niet veel voor, maar je kunt nu wel een tabel maken. Als  je het bovenstaande probeert en je laadt de pagina in de browser, valt  het je op dat de breedte van de tabel niet overeenkomt met wat je hierboven  ziet. Daarom geef je in de tag <table> de breedte op. Dat doe je  met het attribuut width. We raden je aan om de breedten in procenten op  te geven. Een tabel die de 90% van de breedte moet bedekken ziet er zo  uit:

<table width="90%">
De rest van de tabel
</table>

Om de breedte van de kolommen geef je op met die tag. Een tabel die 90% van  de pagina bedekt en kolommen bevat die allebei de helft van de tabel(dus 45%  van de pagina) innemen, komt er zo uit te zien:

<table width="90%">
<tr>
<td width="45%">Een  tabel van 90%</td>
<td width="45%">met een celbreedte  van 45%</td>
</tr>
</table>

Behalve de breedte kun je ook de hoogte van de tabel en de cellen opgeven.  Dat doe je met het attribuut height="hoogte". Dit kan ook weer in  pixels of procenten.

Een ander belangrijk attribuut is " border". Dit geef  je in de tag <table> aan. Zoals je waarschijnlijk al verwacht geeft  het de dikte van de rand van je tabel aan. Wil je een onzichtbare rand,  dan zet je deze op 0.

Verder kennen we nog de attributen cellpadding en cellspacing. Cellspacing  vertelt de browser de ruimte tussen de twee cellen. Kijk hieronder maar.

Eerst zie je een tabel met dikte 1 en cellspacing 1.

 

 

 


en deze tabel heeft dikte 1 en cellspacing 5

 

 

 

Ook is er nog het attribuut cellpadding. Dat maakt ruimte vrij tussen  de tekst in de cel en de rand. Kijk maar naar de verschillen:

Deze cellpadding is 1

 

 

 


en deze cellpadding is 15

 

 

 

Zo, dat verschil is duidelijk. Verder kun je nog kleuren aan je tabel  toevoegen. Dat kan op 2 manieren. Je kunt de border een kleur geven, met  de tag bordercolor="#3366cc", bijvoorbeeld. Een cel kan ook  een achtergrondkleur krijgen, dat doen we met het attribuut bgcolor="#000080".  Je kunt zowel per cel(dat doe je in de <td> tag) of per tabel(in  de <table> tag) de achtergrondkleur opgeven

Het is ook mogelijk om het volgende resultaat te krijgen:

Cel 1

Cel 2

Cel 3

Je ziet hier een tabel met 2 rijen. De eerste rij bestaat uit 1 cel,  de tweede rij bestaat uit 2 cellen.

Met de tags die je al kent was je dit niet gelukt. Daarom leren we je twee  nieuwe tags: colspan en rowspan.

<table width="90%" border="1">
<tr>
<td rowspan="2">Cel 1</td>
<td>Cel 2</td>
</tr>
<tr><td>Cel 3</td>
</tr>
</table>

Je geeft zo dus aan dat de eerste <td> tag 2 <tr> tags om spant.  Je kunt zoveel rows opspannen als je wilt. Ook vertciaal is dit mogelijk:

Cel 1

Cel 2

Cel 3

De broncode voor deze tabel ziet er zo uit:

<table width="90%" border="1" bordercolor="#000000"  cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">Cel 1</td>
</tr>
<tr>
<td>Cel 2</td>
<td>Cel 3</td>
</tr>
</table>

 

 Vorige pagina

                                             Volgende pagina

   | Over deze site | Disclaimer |
Neem contact op met de Webmaster met opmerkingen en tips

 TV/radio:

 Radio luisteren:webradio

 Wat is er op TV?

 TV gids (alle zenders)

 Uitzending gemist

 Verkeer:

 Files

 Routeplanner

 Nieuws/weer:

 NOS headlines

 Algemeen Dagblad

 Laatste nieuws

 Telegraaf

 Volkskrant

 Teletekst

 Het weer

 Handige hulpjes:

 Lettergrootte aanpassen

 Puzzelwoordenboek

 Online rekenmachine

 Zoeken naar mensen/adressen

 Handige info:

 SOS nummers

 Feestdagen 2011

 Feestdagen 2012

 Loterijen:

 Bank-giroloterij

 Euromillions

 Staatsloterij

 Postcodeloterij

 Link partners

 Webgids voor online winkelen

| More