n00b pro

04. HTML tabellen

Youtube: HTML tabellen

Let op: deze Youtube video is nog een oudere versie, zonder elementen <thead>, <tbody>, <tfoot>, <colgroup> en <col>, en het scope attribuut.

https://www.youtube.com/watch?v=uqkCF5ka1TM

Wel of geen tabel?

Tabellen worden in HTML eigenlijk weinig gebruikt. Ze dienen enkel voor tabulaire data, dus voor gegevens die wanwege hun beketenis in rijen en kolommen moeten staan Gebruik het nooit voor layout, dat doen we later met CSS!

De vraag is dus: lijkt het op een spreadsheet waarin cellen hun betekenis krijgen door de rij en de kolom waarin ze zitten (tabel), of is het eerder een gridweergave die ook anders kan (geen tabel)?

Dit is een tabel; zonder rijen en kolommen verliezen de gegevens hun betekenis:

Dit is geen tabel; er zijn andere manieren te bedenken om dit weer te geven:

Een shopping cart is dan weer wel een tabel, een soort rekenblad met rijen en kolommen:

Elementen en attributen voor tabellen in HTML

De elementen gebruikt in een tabel, min of meer in volgorde van verschijning:

element betekens
<table> duidt de tabel aan
<caption> bijschrijft, dus een tekst die de tabel beschrijft
<colgroup> optioneel: hiermee kan je kolommen in groepen onderverdelen
<col> gebruikt in <colgroup>: duidt een groep kolommen aan
<thead> optioneel: duidt het bovenste deel van de tabel aan
<tbody> duidt het middelste deel van de tabel aan
<tfoot> duidt het onderste deel van de tabel aan
<tr> "table row", een rij dus
<th> "table header", dus een titelcel bovenaan
<td> "table data", een gewone tabelcel
attribuut voorbeeld waarden betekenis
scope <th scope="col"> row, col beschrijft deze header cell een rij of een kolom?
colspan <td colspan="2"> getal cel overspant meerdere kolommen
rowspan <td rowspan="2"> getal cel overspant meerdere rijen

Voorbeeld

Basisversie met <table>, <tr> en <td>:

Omdat tabellen zonder opmaak er niet uitzien, zullen we alvast een stukje opmaak met CSS voorzien, al komt dit pas later aan bod. 

<!-- begin CSS blok -->
<style>
   table { border-collapse: collapse; }  /* geen ruimte tussen cellen */ 
   td, th { border: 1px solid black; padding: 5px; } /* rand en ruimte rond cellen */  
</style>
<!-- einde CSS blok -->
<table>
   <tr>
      <td>Ayoub</td>
      <td>90</td>
      <td>85</td>
      <td>88</td>
   </tr>
   <tr>
      <td>Bryan</td>
      <td>78</td>
      <td>92</td>
      <td>80</td>
   </tr>
   <tr>
      <td>Chee</td>
      <td>85</td>
      <td>89</td>
      <td>92</td>
   </tr>
</table>

Uitbreiding met <caption> en <th scope="...">

Het <th> element duidt een header cel aan, het scope attribuut duidt aan of het om een rij of een kolom gaat:

<!-- begin CSS blok -->
<style>
   table { border-collapse: collapse; }  
   td, th { border: 1px solid black; padding: 5px; } 
</style>
<!-- einde CSS blok -->
<table>
   <caption>Cijfers studenten</caption>
   <tr>
      <th scope="col">student</th>
      <th scope="col">wiskunde</th>
      <th scope="col">fysica</th>
      <th scope="col">nederlands</th>
   </tr>
   <tr>
      <th scope="row">Ayoub</th>
      <td>90</td>
      <td>85</td>
      <td>88</td>
   </tr>
   <tr>
      <th scope="row">Bryan</th>
      <td>78</td>
      <td>92</td>
      <td>80</td>
   </tr>
   <tr>
      <th scope="row">Chee</th>
      <td>85</td>
      <td>89</td>
      <td>92</td>
   </tr>
</table>

Uitbreiding met <thead>, <tbody> en <tfoot>

Met deze elementen kan je je tabel onderverdelen in een bovenste, middelste en onderste gedeelte. Op zich zul je geen verschil zien, maar het is wel handig om b.v. de header een achtergrondkleur te geven, en de footer in schuin te zetten: 

<!-- begin CSS blok -->
<style>
   table { border-collapse: collapse; }  
   td, th { border: 1px solid black; padding: 5px; }       
   thead { background-color: #f0f0f0 } /* grijze achtergrond header */ 
   tfoot { font-style: italic; } /* schuingedrukt in footer */ 
</style>
<!-- einde CSS blok -->
<table>
   <caption>Cijfers studenten</caption>
   <thead>
      <tr>
         <th scope="col">student</th>
         <th scope="col">wiskunde</th>
         <th scope="col">fysica</th>
         <th scope="col">nederlands</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Ayoub</th>
         <td>90</td>
         <td>85</td>
         <td>88</td>
      </tr>
      <tr>
         <th scope="row">Bryan</th>
         <td>78</td>
         <td>92</td>
         <td>80</td>
      </tr>
      <tr>
         <th scope="row">Chee</th>
         <td>85</td>
         <td>89</td>
         <td>92</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th scope="row">gemiddelde</th>
         <td>84.33</td>
         <td>88.67</td>
         <td>86.67</td>
      </tr>
   </tfoot>
</table>

Uitbreiding met <colgroup> en <col>

Met <colgroup> en <col> kun je kolommen groeperen. Dit is kan zinvol zijn om b.v. in dit voorbeeld wetenschapsvakken een andere achtergrondkleur te geven dan taalvakken: 

<!-- begin CSS blok -->
<style>
   table { border-collapse: collapse; }  
   td, th { border: 1px solid black; padding: 5px; }       
   thead { background-color: #f0f0f0 } 
   tfoot { font-style: italic; }  
   col {background-color: #f0f0f0;} /* grijze achtergrondkleur */
   col.wetenschapsvakken { background-color: #f0fff0; } /* lichtgroene achtergrondkleur */
   col.taalvakken { background-color: #f0f0ff; } /* lichtblauwe achtergrondkleur */
</style>
<!-- einde CSS blok -->
<table>
   <caption>Cijfers studenten</caption>
   <colgroup>
      <col>
      <col class="wetenschapsvakken" span="2">
      <col class="taalvakken">
   </colgroup>
   <thead>
      <tr>
         <th scope="col">student</th>
         <th scope="col">wiskunde</th>
         <th scope="col">fysica</th>
         <th scope="col">nederlands</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Ayoub</th>
         <td>90</td>
         <td>85</td>
         <td>88</td>
      </tr>
      <tr>
         <th scope="row">Bryan</th>
         <td>78</td>
         <td>92</td>
         <td>80</td>
      </tr>
      <tr>
         <th scope="row">Chee</th>
         <td>85</td>
         <td>89</td>
         <td>92</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th scope="row">gemiddelde</th>
         <td>84.33</td>
         <td>88.67</td>
         <td>86.67</td>
      </tr>
   </tfoot>
</table>

Uitbreiding met rowspan en colspan

Met rowspan en colspan kan je cellen samenvoegen. 

<!-- begin CSS blok -->
   <style>
   table { border-collapse: collapse; }  
   td, th { border: 1px solid black; padding: 5px; }       
   thead { background-color: #f0f0f0 } 
   tfoot { font-style: italic; }  
   col {background-color: #f0f0f0;} /* grijze achtergrondkleur */
   col.wetenschapsvakken { background-color: #f0fff0; } /* lichtgroene achtergrondkleur */
   col.taalvakken { background-color: #f0f0ff; } /* lichtblauwe achtergrondkleur */
</style>
<!-- einde CSS blok -->
<table>
   <caption>Cijfers studenten</caption>
   <colgroup>
      <col>
      <col class="wetenschapsvakken" span="2">
      <col class="taalvakken">
   </colgroup>
   <thead>
      <tr>
         <th scope="col" rowspan="2">Student</th>
         <th scope="col" colspan="3">Vakken</th>
         <th scope="col" rowspan="2">Aanwezigheid</th>
      </tr>
      <tr>
         <th scope="col">Wiskunde</th>
         <th scope="col">Fysica</th>
         <th scope="col">Nederlands</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Ayoub</th>
         <td>90</td>
         <td>85</td>
         <td>88</td>
         <td>hoog</td>
      </tr>
      <tr>
         <th scope="row">Brian</th>
         <td>78</td>
         <td>92</td>
         <td>80</td>
         <td>gemiddeld</td>
      </tr>
      <tr>
         <th scope="row">Chee</th>
         <td>85</td>
         <td>89</td>
         <td>92</td>
         <td>laag</td>
      </tr>
      <tr>
         <th scope="row">David</th>
         <td colspan="3">vrijgesteld</td>
         <td></td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th scope="row">gemiddelde</th>
         <td>84.33</td>
         <td>88.67</td>
         <td>86.67</td>
         <td> </td>
      </tr>
   </tfoot>
</table>