close

Tabellen in HTML: een handleiding voor het maken en opmaken van tabellen in HTML

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.