Tabellen Hans Roeyen V 3.0 12 februari 2015
Inhoud 1. Tabellen... 3 1.1. De Tabel tags... 3 1.1.1. Het border attribuut... 4 1.2. De Tabel cellen... 4 1.3. Alignering en spanning... 8 1.1.2. De align attributen... 8 1.1.3. De span attributen... 8 1.1.4. De padding attributen... 8 1.4. Nesten van tabellen... 9 1.5. Tabellen met lege cellen... 10 1.6. Samenvatting Tabel tags:... 22 Hans Roeyen HTML tabellen 2-22
1. Tabellen Een tabel kunnen we zien als een schikking van tekst en/of afbeeldingen in verticale kolommen en horizontale rijen. Er zijn verscheidene redenen om te kiezen voor het gebruik van tabellen: Opmerking: In opsommingen, lijsten van namen, getallen, en vergelijkbare zaken die we in een tekstverwerker met behulp van tabulatie zouden verwerken. Tabellen zijn daar, in tekstverwerking, eigenlijk ook voor te gebruiken. Indien je meer wilt dan <img align= left > en <img align= right > in de plaatsing tussen tekst en afbeeldingen. Tabellen kun je gebruiken om kaders en boorden te trekken rond tekst en afbeeldingen. Het aanmaken van subtiele of duidelijke verschillen in achtergrondkleur om bepaalde zaken te accentueren. Gebruik nooit tabellen voor de indeling van je pagina. In de vorige versie (HTML 4.01) werd dat heel veel gedaan maar met HTML5 niet meer. Een onderverdeling van de pagina zoals een navigatiebalk, banner, menu s en dergelijke wordt met CSS gemaakt. 1.1. De Tabel tags Om tabellen aan te maken moeten we beginnen met de <table> tag. Vervolgens maken we gebruik van de tag. Deze tag creëert een rij in de tabel die één of meerdere cellen met informatie zal bevatten. Om die individuele cellen aan te maken gebruiken we de <td> tag. De informatie die in die cel moet komen, plaatsen we na deze tag. We onderscheiden nog een vierde tag, <th>. Deze wordt gebruikt zoals de <td> tag maar de cel maakt deel uit van de hoofding van de tabel. Hans Roeyen HTML tabellen 3-22
Een eenvoudige tabel <title>hier komt de titel van de pagina</title> <table style="width:100%"> <td> salon</td> <td>tafel</td> 1.1.1. Het border attribuut Een tabel zal standaard geen boord krijgen. Indien we wel een boord willen moeten we gebruik maken van het border attribuut. Let wel: het niet meegeven van het border= 0 attribuut kan wel als gevolg hebben dat de ruimte die normaal gezien ingenomen wordt door de boord wel aanwezig blijft. Indien we dit niet willen moeten we wel degelijk werken met het border= 0 attribuut. Tabellen en boorden kunnen eveneens lastige materie zijn met bepaalde browsers. 1.2. De Tabel cellen We kunnen zoveel cellen maken als we willen maar elke rij in een tabel moet hetzelfde aantal kolommen hebben als andere rijen. In principe kunnen we eender welk HTML element gebruiken binnenin een cel. Wel moeten we rekening houden met het feit dat de tags die we in één cel gebruiken niet overgedragen worden naar de andere cellen, en dat de tags die buiten de tabel gebruikt worden geen invloed zullen hebben op wat binnenin de tabel staat. Merk wel op dat alle opmaak zoals lettertype, letterkleur en grootte met HTML5 volledig met CSS wordt gedaan. Dat kan door een tabel een ID te geven met als voordeel dat je elke tabel een andere opmaak kunt geven. Hans Roeyen HTML tabellen 4-22
<table id="t01"> <th>voornaam</th> <th>familienaam</th> <th>punten</th> <td>eva</td> <td>jansen</td> <td>94</td> De opmaak staat dan in een apart CSS bestand. CSS wordt later in de module behandeld. table#t01 { width: 100%; background-color: #f1f1c1; } Het kan natuurlijk nooit kwaad om het even te proberen. Hans Roeyen HTML tabellen 5-22
Voorbeeld 1: verschillende tabellen <title>verschillende tabellen</title> <h4>een kolom</h4> <h4>een rij en drie kolommen:</h4> <h4>twee rijen en drie kolommen:</h4> Hans Roeyen HTML tabellen 6-22
Voorbeeld 2: tabellen met verschillende boorden <title>tabellen met verschillende boorden</title> <h4>normale boord</h4> <td>eerste</td> <td>tweede</td> <h4>dikke boord</h4> <table border="8" style="width:100%"> <td>eerste</td> <td>tweede</td> <h4>heel dikke boord</h4> <table border="15" style="width:100%"> <td>eerste</td> <td>tweede</td> Hans Roeyen HTML tabellen 7-22
1.3. Alignering en spanning Standaard zal alles wat we in een cel plaatsen links uitgelijnd en verticaal gecentreerd worden. 1.1.2. De align attributen De inhoud van de cellen kunnen we horizontaal en verticaal uitlijnen met behulp van de <align> en <valign> attributen. Deze attributen kunnen we gebruiken op zowel de als op de <td> tag. Uiteraard zullen de attributen die we meegeven met de tag gelden voor alle cellen op die rij. 1.1.3. De span attributen We kunnen eveneens een cel meerdere kolommen laten overspannen. Dit bekomen we met het colspan=.. attribuut in de <td> tag. Met rowspan=.. krijgen we hetzelfde effect maar dan met rijen. Voorbeeld: <title>overspannen van rijen</title> <table style="width:100%"> <td rowspan="2">hallo</td> <td>hoi</td> <td>dag</td> 1.1.4. De padding attributen Met de cellpadding en cellspacing attributen van de <table> tag kunnen we de ruimte rond de boorden van een tabel ingeven. Cellspacing gebuiken we om aan te geven in pixels hoeveel ruimte er moet zijn tussen de boorden van de tabel en de cellen van de tabel. Cellpadding geeft aan in pixels hoeveel ruimte er moet zijn rond de data in de cellen. Hans Roeyen HTML tabellen 8-22
1.4. Nesten van tabellen We kunnen zonder problemen tabellen maken binnen tabellen. We krijgen dan constructies in de aard van: <title>nesten van tabellen</title> <td>...</td> <td> <table style="width:100%"> <td>...</td> </td> Hans Roeyen HTML tabellen 9-22
1.5. Tabellen met lege cellen Cellen in tabellen waar geen inhoud staat kunnen soms door bepaalde browsers niet correct weegegeven worden. Dit kunnen we oplossen door in de lege cellen een non-breaking space ( ) te plaatsen. <title>tabellen met lege cellen</title> <td>rij 1, cel 1</td> <td>rij 1, cel 2</td> <td>rij 2, cel 1</td> <td> </td> Hans Roeyen HTML tabellen 10-22
Voorbeeld 3: <title>tabellen zonder boorden</title> <h4>deze tabel heeft geen boorden:</h4> <table border="0" style="width:100%"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> <h4>en deze tabel heeft ook geen boorden:</h4> <table border="0" style="width:100%"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> Hans Roeyen HTML tabellen 11-22
Voorbeeld 4: tabel hoofdingen <title>tabellen hoofdingen</title> <h4>deze tabel heeft hoofdingen:</h4> <th>name</th> <th>telephone</th> <th>telephone</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <h4>verticale hoofdingen:</h4> <table border="1" style="width:100%""> <th>first name</td> <td>bill Gates</td> <th>telephone</td> <td>555 77 854</td> <th>telephone</td> <td>555 77 855</td> Hans Roeyen HTML tabellen 12-22
Voorbeeld 5: gebruik van lege cellen <title>cellen zonder inhoud</title> <td></td> <td> </td> Hans Roeyen HTML tabellen 13-22
Voorbeeld 6: een tabel met een titel <title>een tabel met een titel</title> <h4>deze tabel heeft een titel en een dikke boord</h4> <table border="6" style="width:100%"> <caption>een titel</caption> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> Hans Roeyen HTML tabellen 14-22
Voorbeeld 7: overspannen van cellen <title>overspannen van cellen</title> <h4>een cel die twee kolommen overspant:</h4> <th>naam</th> <th colspan="2">telefoon</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <h4>een cel die twee rijen overspant:</h4> <th>voornaam</th> <td>bill Gates</td> <th rowspan="2">telephone</th> <td>555 77 854</td> <td>555 77 855</td> Hans Roeyen HTML tabellen 15-22
Voorbeeld 8: weergeven van elementen binnen elementen <title>elementen binnen elementen</title> <td><p>dit is een alinea.</p> <p>dit is een alinea. </p> </td> <td>deze cel bevat een tabel: </td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>deze cel bevat een lijst <ul> <li>appels</li> <li>bananen</li> <li>pompelmoes</li> </ul> </td> <td>hallo</td> Hans Roeyen HTML tabellen 16-22
Voorbeeld 9: gebruik van cellpadding <title>gebruik van celpadding</title> <h4>zonder cellpadding:</4> <td>eerste</td> <td>tweede</td> <h4>met cellpadding:</4> <table border="1" style="width:100%" cellpadding="10"> <td>eerste</td> <td>tweede</td> Hans Roeyen HTML tabellen 17-22
Voorbeeld 10: gebruik van cellspacing <title>gebruik van celspacing</title> <h4>zonder cellspacing:</4> <td>eerste</td> <td>tweede</td> <h4>met cellspacing:</4> <table border="4" style="width:100%" cellspacing="10"> <td>eerste</td> <td>tweede</td> Hans Roeyen HTML tabellen 18-22
Voorbeeld 11: een achtergrond in een tabel (wordt niet meer gedaan met HTML5) <title>een achtergrond in een tabel</title> <h4>een achtergrondkleur:</4> <table border="4" style="width:100%" bgcolor="red"> <td>eerste</td> <td>tweede</td> <h4>een achtergrondafbeelding</4> <table border="1" style="width:100%" background="zonsondergang.jpg"> <td>eerste</td> <td>tweede</td> Hans Roeyen HTML tabellen 19-22
Voorbeeld 12: een achtergrond in een cel <title>een achtergrond in een cel</title> <h4>achtergronden in cellen:</4> <td bgcolor="red">eerste</td> <td background="winter.jpg">tweede</td> Hans Roeyen HTML tabellen 20-22
Voorbeeld 13: uitlijnen in cellen <title>uitlijnen in cellen</title> <th align="left">uitgaven</th> <th align="right">januari</th> <th align="right">februari</th> <th align="left">kleren</th> <th align="right"> 241,10</th> <th align="right"> 50,20</th> <th align="left">make-up</th> <th align="right"> 32,10</th> <th align="right"> 74,20</th> <th align="left">eten</th> <th align="right"> 532,10</th> <th align="right"> 374,20</th> <th align="left">totaal</th> <th align="right"> 1732,10</th> <th align="right"> 2574,20</th> Hans Roeyen HTML tabellen 21-22
1.6. Samenvatting Tabel tags: Tag <table> <th> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Functie Definieert een tabel Definieert een tabel hoofding Definieert een rij Definieert een cel Definieert een titel Definieert kolomgroepen Definieert de attribuutwaarde voor kolommen Definieert een tabel head (koptekst) Definieert een tabel body Definieert een tabel footer (voettekst) Hans Roeyen HTML tabellen 22-22