 | Peatüki sisukord |  |
3.5 Tabelid
Tabelite kasutamine pakub rohkesti võimalusi informatsiooni ja andmete kujundamiseks.
- Tabelina on hea kujundada esiletõstmist väärivad andmed kompaktsel ja korrastatud kujul.
- Pealkirjad paigutatud ühelahtrilisse tabelisse on pilkupüüdvad.
- Tabelivahendid võimaldavad ka tekstiveergude vormistamist.
Üldjuhul sisaldab iga tabel kindla hulga tabeliridu ja tabeliveerge. Need määravadki tabeli struktuuri, mille kirjeldamiseks on HTML-keeles olemas vastavad paarismärgendid:
<table>(tabel)<thead>(tabeli päis)<th>(pealkirjalahter)<tbody>(tabeli keha)<tr>(tabelirea algus)<td>(andmelahter)<caption>(määrab kogu tabeli kohale tabeli pealkirja)
Allpool toodud näites on hea kombe kohaselt kasutatud lugemise kergendamiseks taandeid.
<!DOCTYPE html>
<head>
<title>Tabelid</title>
</head>
<body>
<table>
<caption>Tabel 1. Minu tabel</caption>
<thead>
<tr>
<th>1. veerg
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Üks</td>
</tr>
<tr>
<td>Kaks</td>
</tr>
<tr>
<td>Kolm</td>
</tr>
</tbody>
</table>
</body>
</html>
Antud veebidokument näeb veebilehitsejas järgmiselt välja:
Kuidas määrata tabeli raami ja raami paksust? Kahjuks HTML5 ei toeta sellist funktsionaalsust, sest kujunduse eest vastutab CSS. Mõni mooduli pärast vaatame põhjalikumalt, kuidas lisada tabelitele kujundust.
Iseseisev ülesanne:
On antud kood. Skitseeri, kuidas võiks tabel välja näha. Kontrolli oma ennustusi.
<!DOCTYPE html>
<head>
<title>Tabelid</title>
</head>
<body>
<table>
<caption>Tabel 2. Tooted</caption>
<thead>
<tr>
<th>
Toode
</th>
<th>
Hind
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Õun </td>
<td> 1€ </td>
</tr>
<tr>
<td> Ananass</td>
<td> 2€ </td>
</tr>
<tr>
<td> Kommikarp </td>
<td> 3€ </td>
</tr>
</tbody>
</table>
</body>
</html>
| Peatüki sisukord | |