Een tabel is een essentieel onderdeel in HTML voor het weergeven van gegevens in een gestructureerd formaat met rijen en kolommen. In HTML worden tabellen gemaakt met de tags <table>, <tr> en <td>.
De tag <table> vertegenwoordigt de container van de hoofdtabel, die alle rijen en kolommen bevat. Rijen worden gedefinieerd met de tag <tr>(tabelrij), terwijl cellen binnen de rijen worden gedefinieerd met de tag <td>(tabelgegevens). Bovendien kunt u de tag <th>(tabelkop) gebruiken om kopcellen voor de tabel te definiëren.
U kunt attributen zoals colspan en rowspan gebruiken om cellen in de tabel samen te voegen of cellen over meerdere rijen en kolommen te spreiden. Bovendien kunt u CSS-eigenschappen toepassen om het uiterlijk en de lay-out van de tabel aan te passen.
Tabel( <table>)
- Het <table> element wordt gebruikt om een tabel in HTML te maken.
- Gegevens worden in rijen( <tr>) en kolommen( <td> of <th>) geplaatst.
- Elke gegevenscel wordt binnen <td>(gegevenscel) of <th>(kopcel) elementen geplaatst.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Kolomkop( <th>)
- Het <th> element wordt gebruikt om kolomkoppen in een tabel te maken.
- Meestal geplaatst in de eerste rij van de tafel.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Gegevensrijen( <tr>):
- Het <tr> element wordt gebruikt om gegevensrijen in een tabel te maken.
- Binnen deze elementen worden gegevenscellen( <td>) of kopcellen( <th>) geplaatst <tr>.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Kolomspanning( colspan)
Het colspan attribuut wordt gebruikt om het aantal kolommen te bepalen dat een gegevenscel of koptekstcel in de tabel zal beslaan.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Rijspanning( rowspan)
Het rowspan attribuut wordt gebruikt om het aantal rijen te bepalen dat een gegevenscel of koptekstcel in de tabel zal beslaan.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Cellen samenvoegen( colspan en rowspan)
U kunt beide colspan en rowspan attributen combineren om cellen in een tabel samen te voegen.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border eigendom
- De border eigenschap specificeert de dikte van de tabelrand.
- De waarde van border is een niet-negatief geheel getal.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding eigendom
- ,De cellpadding eigenschap specificeert de afstand tussen de celinhoud en de rand van de cel in de tabel.
- De waarde van cellpadding is een niet-negatief geheel getal
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing eigendom
- De cellspacing eigenschap specificeert de afstand tussen cellen in de tabel.
- De waarde van cellspacing is een niet-negatief geheel getal.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Met deze attributen en elementen kunt u tabellen in HTML maken en aanpassen aan uw behoeften. U kunt ze gebruiken om gegevens overzichtelijk en overzichtelijk weer te geven op uw website.