Tabelgerelateerde Tags
In dit artikel leggen we tabelgerelateerde tags uit.
Dit legt uit hoe je tabellen en tabelbijschriften in HTML kunt beschrijven met voorbeelden.
YouTube Video
Tabelgerelateerde Tags
<table>-Tag
1<table>
2 <tr>
3 <th>Header 1</th>
4 <th>Header 2</th>
5 </tr>
6 <tr>
7 <td>Data 1</td>
8 <td>Data 2</td>
9 </tr>
10</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
-
De
<table>-tag wordt gebruikt om een tabel te maken die gegevens organiseert en weergeeft in rijen en kolommen.De
<table>-tag organiseert gegevens visueel en maakt tabellen met meerdere rijen en kolommen. Rijen worden gedefinieerd met de<tr>-tag, kopcellen met de<th>-tag en gegevenscellen met de<td>-tag. -
Je kunt de stijl en indeling van de tabel aanpassen met behulp van CSS.
<tr>-Tag
1<tr>
2 <td>Row 1, Cell 1</td>
3 <td>Row 1, Cell 2</td>
4</tr>-
De
<tr>-tag wordt gebruikt om rijen in een tabel te definiëren.De
<tr>-tag wordt gebruikt om elke rij van een tabel te maken, met daarin cellen (<td>of<th>). -
Elke rij kan meerdere cellen bevatten, waarmee de algemene structuur van de tabel wordt gevormd.
<th>- en <td>-Tags
1<th>Header 1</th>
2<td>Data 1</td>- De
<th>-tag definieert een kopcel van een tabel. Wordt meestal gebruikt in koprijen, waarbij de inhoud van de cellen vetgedrukt en gecentreerd is. - De
<td>-tag definieert een standaard gegevenscel van een tabel, die reguliere tabelgegevens weergeeft.
colspan- en rowspan-attributen
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td colspan="2">Spanning Cell</td>
11 </tr>
12 <tr>
13 <td rowspan="2">Spanning Cell</td>
14 <td>Data 1</td>
15 </tr>
16 <tr>
17 <td>Data 2</td>
18 </tr>
19 </tbody>
20</table>| Header 1 | Header 2 |
|---|---|
| Spanning Cell | |
| Spanning Cell | Data 1 |
| Data 2 | |
colspan en rowspan zijn attributen die worden gebruikt wanneer tabelcellen meerdere kolommen of rijen beslaan.
- Het
colspan-attribuut zorgt ervoor dat een cel zich over meerdere kolommen kan uitstrekken. - Het
rowspan-attribuut zorgt ervoor dat een cel meerdere rijen kan beslaan.
<thead>, <tbody>, <tfoot>-Tags
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td>Data 1</td>
11 <td>Data 2</td>
12 </tr>
13 <tr>
14 <td>Data 3</td>
15 <td>Data 4</td>
16 </tr>
17 </tbody>
18 <tfoot>
19 <tr>
20 <td>Footer 1</td>
21 <td>Footer 2</td>
22 </tr>
23 </tfoot>
24</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
| Footer 1 | Footer 2 |
-
De
<thead>-tag wordt gebruikt om het kopgedeelte van een tabel te definiëren. Het bevat meestal de kolomkoppen.De
<thead>-tag bevindt zich bovenaan de tabel en definieert de kolomtitels of -koppen. Dit helpt om secties van gegevens duidelijk te onderscheiden. -
De
<tbody>-tag definieert het hoofdgedeelte van de tabel. Het bevat de gegevensrijen.De
<tbody>-tag bevat het hoofdgedeelte van de gegevens in de tabel. Het bevindt zich tussen de rijen die door de<thead>- en<tfoot>-tags worden omsloten. -
De
<tfoot>-tag definieert het voetgedeelte van de tabel, dat totalen of aantekeningen bevat.De
<tfoot>-tag bevindt zich aan het einde van de tabel en wordt gebruikt om totalen of andere opmerkingen weer te geven. Het is vooral nuttig bij het samenvatten of tonen van totalen voor grote datasets.
<caption> en <colgroup> Tags
1<table>
2 <caption>Sample Table Caption</caption>
3 <colgroup>
4 <col style="background-color: #f2f2f2">
5 <col style="background-color: #e6e6e6">
6 </colgroup>
7 <thead>
8 <tr>
9 <th>Header 1</th>
10 <th>Header 2</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td>Data 1</td>
16 <td>Data 2</td>
17 </tr>
18 <tr>
19 <td>Data 3</td>
20 <td>Data 4</td>
21 </tr>
22 </tbody>
23</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
-
De
<caption>-tag voegt een onderschrift (kop) toe om de inhoud van de tabel duidelijker te maken. Het wordt meestal bovenaan de tabel geplaatst en dient om de algemene inhoud van de tabel samen te vatten. -
De
<colgroup>-tag groepeert kolommen binnen een tabel en wordt gebruikt om stijlen of indelingen toe te passen. U kunt achtergrondkleuren of breedtes voor specifieke kolommen opgeven door de<col>-tag toe te voegen.
Tabelvoorbeeld
1<table>
2 <caption>Table Title</caption>
3 <colgroup>
4 <col span="2" style="background-color: lightblue;">
5 </colgroup>
6 <thead>
7 <tr>
8 <th>Header 1</th>
9 <th>Header 2</th>
10 <th>Header 3</th>
11 <th>Header 4</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>Data 11</td>
17 <td>Data 12</td>
18 <td>Data 13</td>
19 <td>Data 14</td>
20 </tr>
21 <tr>
22 <td>Data 21</td>
23 <td>Data 22</td>
24 <td>Data 23</td>
25 <td>Data 24</td>
26 </tr>
27 </tbody>
28 <tfoot>
29 <tr>
30 <td colspan="3">Table Footer Title</td>
31 <td>Table Footer Summary</td>
32 </tr>
33 </tfoot>
34</table>| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 11 | Data 12 | Data 13 | Data 14 |
| Data 21 | Data 22 | Data 23 | Data 24 |
| Table Footer Title | Table Footer Summary | ||
-
De
<table>-tag wordt gebruikt om een tabel te maken die gegevens in rijen en kolommen weergeeft. -
De
<thead>-tag groepeert de koprijen van de tabel. Deze bevat meestal<th>-tags, die als koppen dienen. -
De
<tbody>-tag groepeert de hoofdinhoud van de tabel. Deze bevat meestal gegevensrijen die bestaan uit<td>-tags. -
De
<tfoot>-tag groepeert de voetrijen van de tabel. Deze is geschikt voor het weergeven van totalen of notities. -
De
<colgroup>-tag groepeert de kolommen van een tabel en wordt gebruikt om stijlen toe te passen op alle kolommen tegelijk. -
De
<caption>-tag voegt een bijschrift of kop toe aan de tabel, waardoor gebruikers de inhoud van de tabel beter begrijpen. -
Het
colspan-attribuut zorgt ervoor dat een cel zich over meerdere kolommen kan uitstrekken. -
Het
rowspan-attribuut zorgt ervoor dat een cel meerdere rijen kan beslaan.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.