Tabellen

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:89.241Reacties: 76(Bekijken)
  Log in om zelf te reageren
 Waardering:8.3/10 (12 stemmen)

HTML: de basis van iedere website» De opbouw van een html bestand | Tekst op je website zetten | Kleuren op je website | Lettertypen | Hyperlinks maken | Tabellen | Frames | Meer informatie over frames | Lijsten maken | Formulieren maken | I-frames | Metatags




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:

Probeereens
ditzonder
maartabellen

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 1Inhoud van kolom 2 in rij 1
Inhoud van kolom 1 in rij 2Inhoud 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 2Cel 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>

«Hyperlinks maken Frames »

76 reacties
Rolin Geplaatst op 06-03-2011 om 12:39
 

Regular
ben vandaag begonnen met mijn allereerste website, tot hiertoe lukt het vrij goed. Nu ben ik met tabellen bezig en loop ik vast. . heb mijn tekst mooi in de juiste vakjes gekregen maar mijn tabellen staan ondereen. Hoe kan ik dit oplossen?
relladeba Geplaatst op 24-09-2010 om 06:46
 

Regular
Hallo,
hoe kun je een volledige <tr> in kleur zetten zonder dit in elke <td> te moeten doen?
joevan74 Geplaatst op 10-03-2010 om 22:26
 

Regular
thx nog altijd alles in orde :p
Twinus Geplaatst op 08-03-2010 om 16:29
 

Regular
Joepie, halverwege HTML :p
ecoliner Geplaatst op 09-02-2010 om 17:58
 

Regular
Ik heb het volgende ingetikt:
<html>
<head>
<title>Au Bord'eaux</title>
</head>
<body bgcolor="#660000"
text="#CC9933">
<table>
<tr>
<td align="center"> <IMG="logo" SRC="C:Documents and SettingsHans.vanlanduytBureaubladwebsite au bord'eauxlogo wellnes.jpg"></TD>
</TR>
<tr> <td><font face="Lucida Calligraphy"align="center" > SAUNA</font></td>
<td><font face="Lucida Calligraphy"align="center" > HAMMAM</font></td>
<td><font face="Lucida Calligraphy"align="center" > JACCUZI</font></td>
<td><font face="Lucida Calligraphy"align="center" > ZWEMVIJVER</font></td>
</tr>
<tr>
<td align="center"><font size="1"><b>kom binnen</b></font></td>
</tr>
</table>

</body>
</html>

De woorden kom binnen komen niet op de site pag.

wat is er mis?

Pagina 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder