HTML -tabelkoppen
HTML-tabellen kunnen kopteksten hebben voor elke kolom of rij, of voor veel kolommen/rijen.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9.00 uur | ||
| 10:00 | ||
| 11:00 uur | ||
| 12:00 uur | ||
| 13:00 |
| MAANDAG | DI | WO | VERZAMELEN | VRIJ | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9.00 uur | |||||
| 10:00 | |||||
| 11:00 uur | |||||
| 12:00 uur |
| DECEMBER | ||
|---|---|---|
HTML-tabelkoppen
Tabelkoppen worden gedefinieerd met thelementen, elk thelement vertegenwoordigt een tabelcel.
Voorbeeld
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Verticale tabelkoppen
Om de eerste kolom als tabelkoppen te gebruiken, definieert u de eerste cel in elke rij als een thelement:
Voorbeeld
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Tabelkoppen uitlijnen
Standaard zijn tabelkoppen vet en gecentreerd:
| Voornaam | Achternaam | Leeftijd |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
Gebruik de CSS- text-aligneigenschap om de tabelkoppen links uit te lijnen:
Voorbeeld
th {
text-align: left;
}
Koptekst voor meerdere kolommen
U kunt een koptekst hebben die zich over twee of meer kolommen uitstrekt.
| Naam | Leeftijd | |
|---|---|---|
| Jill | Smit | 50 |
| Vooravond | Jackson | 94 |
Gebruik hiervoor het colspanattribuut op het
<th>element:
Voorbeeld
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
U leert meer over colspan en rowspan in het hoofdstuk Tabel colspan & rowspan .
Tabel titel
U kunt een bijschrift toevoegen dat als kop voor de hele tabel dient.
| Maand | Besparingen |
|---|---|
| januari | $ 100 |
| februari | $ 50 |
Gebruik de <caption>tag om een bijschrift aan een tabel toe te voegen:
Voorbeeld
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Opmerking: de <caption>tag moet onmiddellijk na de tag worden ingevoegd <table>.