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
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 .