Tabellen Maken en Structureren in HTML
Tabellen helpen gestructureerde gegevens weer te geven, zoals roosters, kalenders, financiële overzichten, menu's en prijslijsten. HTML biedt verschillende elementen voor het opbouwen van tabellen.
Belangrijkste tabelelementen:
<table>: de tabelcontainer;<tr>: een rij;<th>: een kopcel (vetgedrukt, gecentreerd);<td>: een gewone gegevenscel.
Hieronder wordt stap voor stap een eenvoudige menutabel opgebouwd.
Stap 1: Zet de HTML-structuur op
Begin met het maken van de basis HTML-structuur voor de pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Stap 2: Definieer de tabel
Voeg binnen het <body>-element de <table>-tag toe om de tabel te definiëren:
<table>
<!-- Table content will go here -->
</table>
Stap 3: Voeg een tabelonderschrift toe (optioneel)
Indien gewenst kan een titel aan de tabel worden toegevoegd met de <caption>-tag:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Stap 4: Maak tabelkoppen aan
Voeg vervolgens de tabelkoppen toe binnen het <thead>-element. Elke kop wordt gedefinieerd met de <th>-tag:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Stap 5: Vul de tabel met gegevens
Gebruik het <tbody>-element om de tabelrijen te omsluiten en <td>-tags om de cellen met de gegevens te definiëren:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Volledige code
Neem even de tijd om alle elementen grondig te bekijken zodat hun onderlinge relatie duidelijk is.
index.html
index.css
Standaard hebben HTML-tabellen geen specifieke visuele stijl. Om het uiterlijk van de tabel aan te passen, voegt u CSS-stijlen toe in een apart CSS-bestand of binnen een <style>-tag in de <head>-sectie van het HTML-bestand.
Er is echter geen noodzaak om op dit moment in CSS te duiken, aangezien de huidige focus alleen op HTML ligt.
Als u wilt zien hoe de tabel eruitziet zonder enige CSS-styling, kunt u regel 4 verwijderen: <link rel="stylesheet" href="index.css" />, waarmee de CSS-stijlen worden geïmporteerd.
Wilt u meer leren over CSS? Overweeg dan de CSS Fundamentals-cursus.
1. Welk HTML-element wordt gebruikt om een tabel op een webpagina te definiëren?
2. Welk HTML-element wordt gebruikt om een rij binnen een tabel te definiëren?
3. Wat is het doel van het <th>-element in een HTML-tabel?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Geweldig!
Completion tarief verbeterd naar 2.38Tabellen Maken en Structureren in HTML
Veeg om het menu te tonen
Tabellen helpen gestructureerde gegevens weer te geven, zoals roosters, kalenders, financiële overzichten, menu's en prijslijsten. HTML biedt verschillende elementen voor het opbouwen van tabellen.
Belangrijkste tabelelementen:
<table>: de tabelcontainer;<tr>: een rij;<th>: een kopcel (vetgedrukt, gecentreerd);<td>: een gewone gegevenscel.
Hieronder wordt stap voor stap een eenvoudige menutabel opgebouwd.
Stap 1: Zet de HTML-structuur op
Begin met het maken van de basis HTML-structuur voor de pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Stap 2: Definieer de tabel
Voeg binnen het <body>-element de <table>-tag toe om de tabel te definiëren:
<table>
<!-- Table content will go here -->
</table>
Stap 3: Voeg een tabelonderschrift toe (optioneel)
Indien gewenst kan een titel aan de tabel worden toegevoegd met de <caption>-tag:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Stap 4: Maak tabelkoppen aan
Voeg vervolgens de tabelkoppen toe binnen het <thead>-element. Elke kop wordt gedefinieerd met de <th>-tag:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<!-- Table content will go here -->
</table>
Stap 5: Vul de tabel met gegevens
Gebruik het <tbody>-element om de tabelrijen te omsluiten en <td>-tags om de cellen met de gegevens te definiëren:
<table>
<caption>New menu</caption>
<thead>
<tr>
<th>Category</th>
<th>Meal</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Appetizer</td>
<td>Garlic Shrimps</td>
<td>8$</td>
</tr>
<tr>
<td>Pasta</td>
<td>Lobster Linguine Noodles</td>
<td>16$</td>
</tr>
<tr>
<td>Sandwich</td>
<td>Lobster Tail Sandwich</td>
<td>11$</td>
</tr>
</tbody>
</table>
Volledige code
Neem even de tijd om alle elementen grondig te bekijken zodat hun onderlinge relatie duidelijk is.
index.html
index.css
Standaard hebben HTML-tabellen geen specifieke visuele stijl. Om het uiterlijk van de tabel aan te passen, voegt u CSS-stijlen toe in een apart CSS-bestand of binnen een <style>-tag in de <head>-sectie van het HTML-bestand.
Er is echter geen noodzaak om op dit moment in CSS te duiken, aangezien de huidige focus alleen op HTML ligt.
Als u wilt zien hoe de tabel eruitziet zonder enige CSS-styling, kunt u regel 4 verwijderen: <link rel="stylesheet" href="index.css" />, waarmee de CSS-stijlen worden geïmporteerd.
Wilt u meer leren over CSS? Overweeg dan de CSS Fundamentals-cursus.
1. Welk HTML-element wordt gebruikt om een tabel op een webpagina te definiëren?
2. Welk HTML-element wordt gebruikt om een rij binnen een tabel te definiëren?
3. Wat is het doel van het <th>-element in een HTML-tabel?
Bedankt voor je feedback!
