HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML -tabellen


Met HTML-tabellen kunnen webontwikkelaars gegevens in rijen en kolommen rangschikken.


Voorbeeld

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Een HTML-tabel definiëren

Een tabel in HTML bestaat uit tabelcellen in rijen en kolommen

Voorbeeld

Een eenvoudige HTML-tabel:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Tabel Cellen

Elke tabelcel wordt gedefinieerd door een <td>en een </td>tag.

td staat voor tabelgegevens.

Alles tussen <td>en </td>is de inhoud van de tabelcel.

Voorbeeld

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Opmerking: tabelgegevenselementen zijn de gegevenscontainers van de tabel.
Ze kunnen allerlei HTML-elementen bevatten; tekst, afbeeldingen, lijsten, andere tabellen, enz.



Tabelrijen

Elke tabelrij begint met een <tr>en eindigt met een </tr>tag.

tr staat voor tafelrij.

Voorbeeld

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

U kunt zoveel rijen in een tabel hebben als u wilt, zorg er wel voor dat het aantal cellen in elke rij hetzelfde is.

Opmerking: er zijn momenten waarop een rij minder of meer cellen kan hebben dan een andere. Dat leer je in een later hoofdstuk.


Tabelkoppen

Soms wil je dat je cellen headers zijn, in die gevallen gebruik je de <th>tag in plaats van de <td>tag:

Voorbeeld

Laat de eerste rij tabelkoppen zijn:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Standaard is de tekst in <th>elementen vet en gecentreerd, maar je kunt dat veranderen met CSS.


HTML-oefeningen

Test jezelf met oefeningen

Oefening:

Voeg een tabelrij toe met twee tabelkoppen.

De twee tabelkoppen moeten de waarde "Naam" en "Leeftijd" hebben.

<tafel>
  
    
    
  
  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>


HTML-tabeltags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .