Structuur van thead, tbody en tfoot
Organiseer tabelrijen in semantische secties voor kop, hoofdgedeelte en voettekst.
Structuur van thead, tbody en tfoot is een gratis HTML Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Delen van een tabel
Een volledige HTML-tabel heeft drie optionele maar aanbevolen delen:
<thead>— koprijen<tbody>— bodyrijen (belangrijkste gegevens)<tfoot>— voettekstrijen (totalen, samenvattingen)
thead
Het element <thead> bevat de koprijen:
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->tbody
Het element <tbody> bevat de belangrijkste gegevensrijen:
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>5</td>
<td>$49.99</td>
</tr>
<tr>
<td>Widget B</td>
<td>3</td>
<td>$29.99</td>
</tr>
</tbody>
</table>tfoot
Het element <tfoot> bevat voettekstrijen — meestal totalen of samenvattingen:
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<td>$309.92</td>
</tr>
</tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->Volledig gestructureerde tabel
Een volledige tabel met alle drie de delen:
<table>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
<tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
</tbody>
<tfoot>
<tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
</tfoot>
</table>Waarom thead, tbody en tfoot gebruiken?
Voordelen van tabelstructuur:
- Semantiek — schermlezers begrijpen het verschil tussen koptekst, gegevens en samenvatting
- CSS-selectie — geef de delen afzonderlijk een stijl
- Afdrukken — thead wordt op elke afgedrukte pagina herhaald
- Scrollen — scroll de tbody afzonderlijk met CSS-overflow
Scrollable tbody
Laat alleen de body scrollen terwijl de koptekst vast blijft staan:
table {
display: flex;
flex-direction: column;
height: 300px;
}
tbody {
overflow-y: auto;
flex: 1;
}Impliciete tbody
Als je <tbody> weglaat, voegt de browser er automatisch een toe:
<!-- Written without tbody: -->
<table>
<thead>...</thead>
<tr><td>Data</td></tr> <!-- browser wraps this in tbody -->
</table>
<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->Meerdere tbody-elementen
Een tabel kan meerdere groepen met <tbody> bevatten:
<table>
<thead>...</thead>
<tbody>
<tr><td colspan="3"><strong>Category A</strong></td></tr>
<tr><td>Item 1</td><td>2</td><td>$10</td></tr>
</tbody>
<tbody>
<tr><td colspan="3"><strong>Category B</strong></td></tr>
<tr><td>Item 2</td><td>5</td><td>$25</td></tr>
</tbody>
</table>Tabeldelen opmaken
Selecteer delen met CSS:
thead {
background: #1e293b;
color: white;
}
tbody tr:hover {
background: #f0f9ff;
}
tfoot {
border-top: 2px solid #334155;
font-weight: bold;
background: #f8fafc;
}Gedrag van schermlezers
Met een goede thead/tbody-structuur kunnen schermlezers:
- Kolomkoppen aankondigen als context voor elke gegevenscel
- Tussen delen navigeren (kopgebied versus gegevensgebied)
- Gebruikers vertellen hoeveel rijen en kolommen er zijn
thead-rijen met meerdere rijen
Een thead kan meerdere rijen bevatten voor complexe kopteksten:
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Q1</th>
<th colspan="2">Q2</th>
</tr>
<tr>
<th>Units</th><th>Revenue</th>
<th>Units</th><th>Revenue</th>
</tr>
</thead>Korte controle
Waar staat tfoot meestal in de HTML-bron ten opzichte van de weergegeven tabel?
Samenvatting: thead tbody tfoot
De belangrijkste punten van tabelstructuur:
<thead>— koprijen (worden bij het afdrukken herhaald)<tbody>— gegevensrijen (kunnen meervoudig zijn)<tfoot>— rijen met samenvattingen of totalen- Maakt CSS-selectie van delen en toegankelijke tabelweergave mogelijk
- Schrijf tbody altijd expliciet, ook al voegen browsers het toe
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Structuur van thead, tbody en tfoot” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Structuur van thead, tbody en tfoot”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “Structuur van thead, tbody en tfoot”?
Organiseer tabelrijen in semantische secties voor kop, hoofdgedeelte en voettekst. Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Structuur van thead, tbody en tfoot”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- table, tr, td en th
- Structuur van thead, tbody en tfoot
- colspan en rowspan voor celoverspanning
- Toegankelijkheid van tabellen: scope, summary en caption