Geavanceerde Tabellen

Info 
Door: Onbekend lid Moeilijkheidsgraad: 2/3
Views:30.040Reacties: 9(Bekijken)
  Log in om zelf te reageren
 Waardering:8/10 (3 stemmen)



Alvorens aan deze tutorial te kunnen beginnen moet je de basis van tabellen onder de knie hebben. Als je weet hoe je ze moet opbouwen zal deze tutorial een verrijking van je kennis zijn. :wink: . Er is namelijk meer te doen in de wondere wereld van tabellen dan enkel de cellpadding, cellspacing of border aan te passen. Voor de basis van tabellen verwijs ik je door naar html tabellen tutorial.

We zullen dan maar beginnen.

Het Caption Element


Met het caption element definieer je een bijschrift bij een tabel. De caption tag zet je net onder de table tag.

#Code
1
2
3
<table width="100%"  border="1" cellspacing="2" cellpadding="1">
  <caption>Dit is het bijschrift</caption>
<tr>...


Het Summary Attribuut


Met het summary attribuut kan je een samenvatting van de inhoud van je tabel geven. De summary-inhoud wordt echter niet op het scherm getoond, maar kan handig zijn voor speechbrowsers.

#Code
1
2
<table summary="Dit attribuut geeft je de mogelijkheid een samenvatting van je tabel mee te geven." width="100%"  border="1" cellspacing="2" cellpadding="1">
<tr>...

Het Frame Attribuut


Het frame attribuut bepaalt waar al dan niet een buitenrand van een tabel wordt weergegeven.

Mogelijke waarden van het frame-attribuut:
  • void: geen randen (dit is de standaardwaarde)
  • above: bovenkant
  • below: onderkant
  • hsides: boven en -onderkant
  • lhs: linkerkant
  • rhs: rechterkant
  • vsides: linker- en rechterkant
  • border: alle vier zijden

Het Rules Attribuut


Het rules attribuut bepaalt waar al dan niet de binnenste lijnen van een tabel worden weergegeven.

Mogelijke waarden van het rules-attribuut:

  • none: geen lijnen (dit is de standaardwaarde)
  • groups: alleen de lijnen tussen de rijgroepen en kolomgroepen
  • rows: alleen de lijnen tussen de rijen
  • cols: alleen de lijnen tussen de kolommen
  • all: alle lijnen tussen de rijen en kolommen.

Table Header


Zoals je weet zijn tabellen opgemaakt uit te tags <tr> en <td>, er is echter nog een tag: <th>. Deze staat voor Table Header. Zogezegd de header van je tabel. Wat is er zo speciaal aan deze tag en hoe moet je deze tag gebruiken? Even uitleggen aan de hand van een voorbeeldje.

De <th> gebruik je net zoals een <td>, maar met deze tag definiëer je een del als rij- of kolomtitel. De inhoud van zo'n cellen wordt standaard vet gezet en gecentreerd. Natuurlijk kan je dit aanpassen in css. Als je een vergelijking zou willen maken kan je stellen dat de <th> van de tabellen gelijk is aan de <h1> van de tekst.

Een voorbeeld:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table width="100%"  border="1" cellspacing="2" cellpadding="1">
  <tr>
    <th>Cel Header 1</th>
    <th>Cel Header 2</th>
    <th>Cel Header 2</th>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>a3</td>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
  </tr>
</table>


Tabelstructuur groeperen


Doormiddel van volgende tags kan je de cellen groeperen in je tabel. Klinkt allemaal heel abstract, maar met een voorbeeld zal alles duidelijk worden. De volgende tags kunnen heel handig van pas komen als je CSS eigenschappen aan groepen cellen wil meegeven.

Let op: De tags moeten altijd in deze volgorde worden geplaatst. De logica is ver te zoeken, maar toch moet het zo.

#Code
1
2
3
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>

Een concreet voorbeeld:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table width="400px"  border="1" cellspacing="2" cellpadding="1">
  <thead style="background-color:#FFEE99">
    <tr>
     <th>Header 1</th>
     <th>Header 2</th>
    </tr>
  </thead>
  <tfoot style="background-color:#CCFFFF">
    <tr>
     <th>Footer  1</th>
     <th>Footer 2</th>
    </tr>
  </tfoot>
  <tbody style="background-color:#FFCCFF">
   <tr>
    <td>a1</td>
    <td>a2</td>
   </tr>
   <tr>
    <td>b1</td>
    <td>b2</td>
   </tr>
  </tbody>
</table>


Verder kunnen we een tabel ook opmaken per kolom. Hier komt CSS (Cascading Style Sheet) bij kijken, dus als je dat nog niet volledig onder de knie hebt kan je er Cursus CSS meer over leren.

Om tabellen per kolommen op te maken maak je gebruik van de <colgroup> en de <col> tags.
Deze zet je in de table tag. Het wordt vast duidelijker aan de hand van een voorbeeld.

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table width="100%" border="1" cellpadding="1" cellspacing="2">
    <colgroup span="3">
        <col style="background-color:#FFEE99 ">
        <col style=" background-color:#FFCCFF">
        <col>
    </colgroup>
    <colgroup>
        <col style=" background-color:#CCFFFF ">
    </colgroup>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
        <td>a4</td>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
        <td>b4</td>
    </tr>
</table>


Even uitleg geven:

Je ziet dat de colgroup en de col tags net onder de table tag staan.
Ik heb 2 colgroup tags. In de eerste colgroup tag staat er span="3". Dit wil zeggen dan de eerste colgroup overheen de 3 eerste kolommen gaat. De tweede colgroup gaat dus over de laatste kolom.

Ik heb in totaal 4 col tags staan. 3 in de eerste colgroup tag, 1 in de laatste colgroup tag.
En zoals je kan zien heb ik aan de eerste twee cols een style gegeven:
Bij de eerste col was dat style="background-color:#FFEE99", dit geeft de eerste kolom een gele achtergrond kleur.
Bij de tweede col was dat style="background-color:#FFCCFF", dit geeft de tweede kolom een paarse achtergrond kleur.

En ten slotte in de 2de colgroup tag (er staat maar 1 col tag in.)
style="background-color:#CCFFFF". Dat geeft de laatste kolom een blauwe achtergrond kleur.

Zo, nu weet je weer wat meer over tabellen :wink:. Heb je toch nog ergens vragen bij, of lukt er iets niet goed, ga dan naar het forum.

9 reacties
mar4ever Geplaatst op 28-12-2008 om 15:39
 

Regular
coffecup html editor!!
kan je tabellen maken van alles
ook een dhtml menu enzevoort enzovoor
natu 25 Geplaatst op 29-12-2007 om 14:23
 

Regular
kan ik ook mijn randen zwart maken en mijn celletjes grijs?
Susanh Geplaatst op 22-01-2007 om 09:24
 

Regular
Duidelijke uitleg! Ik heb er veel aan. Zo worden tabellen veel leuker ;).
Z4uit Geplaatst op 17-01-2007 om 15:46
 

Regular
Hey iedereen,

Is het ook mogelijk een tabel of div te maken waar de breedte van de tabel/div afhangt van de hoogte?

Ik wil namelijk een viekantje maken waar plaatjes in komen te staan met de hoogte van de browser als alle vier de zijdes van het vierkantje.

Ik hoop echt dat zoiets bestaat, en als dat niet zo is, dat imand weet hoe het bovenstaande wel moet.

groetjes,

Z4uit
Laurent Geplaatst op 02-01-2007 om 16:15
 

Regular
Bestaat er ook zoiets als <rowgroup> i.p.v. <colgroup> ?

Pagina 1 2 

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