HTML -tabelopskrifte
HTML-tabelle kan opskrifte vir elke kolom of ry hê, of vir baie kolomme/rye.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MAAN | DINS | TROU | VERSAMEL | VRY | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DESEMBER | ||
|---|---|---|
HTML-tabelopskrifte
Tabelopskrifte word gedefinieer met thelemente, elke thelement verteenwoordig 'n tabelsel.
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>
Vertikale tabelopskrifte
Om die eerste kolom as tabelopskrifte te gebruik, definieer die eerste sel in elke ry as 'n 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>
Belyn tabelopskrifte
By verstek is tabelopskrifte vet en gesentreer:
| Eerste naam | Van | Ouderdom |
|---|---|---|
| Jill | Smith | 50 |
| Eva | Jackson | 94 |
Gebruik die CSS-eienskap om die tabelopskrifte links te belyn text-align:
Voorbeeld
th {
text-align: left;
}
Kopskrif vir veelvuldige kolomme
Jy kan 'n kopskrif hê wat oor twee of meer kolomme strek.
| Naam | Ouderdom | |
|---|---|---|
| Jill | Smith | 50 |
| Eva | Jackson | 94 |
Om dit te doen, gebruik die colspankenmerk op die
<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>
Jy sal meer leer oor kolspan en ryspan in die Tabel kolspan en ryspan hoofstuk.
Tabel Onderskrif
Jy kan 'n byskrif byvoeg wat as 'n opskrif vir die hele tabel dien.
| Maand | Spaargeld |
|---|---|
| Januarie | $100 |
| Februarie | $50 |
Om 'n byskrif by 'n tabel te voeg, gebruik die <caption>merker:
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>
Let wel: Die <caption>merker moet onmiddellik na die <table>merker ingevoeg word.