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.
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:
![](img/04_tabellen/table3.jpg)
Een shopping cart is dan weer wel een tabel, een soort rekenblad met rijen en kolommen:
![](img/04_tabellen/table4.jpg)
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>
![](img/04_tabellen/tabel1.png)
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>
![](img/04_tabellen/tabel2.png)
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>
![](img/04_tabellen/tabel3.png)
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>
![](img/04_tabellen/tabel4.png)
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>
![](img/04_tabellen/tabel5.png)