Html tabelid
H
TML'i abil saab luua mitmesuguseid tabeleid.
Tabeli määrab <table> märgis. Tabel ise jaguneb ridadeks (moodustatakse <tr> märgise abil) ja read omakorda lahtriteks (moodustatakse <td> märgise abil). Tähed td (table data) määratlevad lahtri sisu milleks võib olla tekst, pilt, nimekiri, paragrahv, vorming, horisontaaljoon, tabel jne.
<table border="1"><tr>
<td>rida 1, lahter 1</td>
<td>rida 1, lahter 2</td>
</tr>
<tr>
<td>rida 2, lahter 1</td>
<td>rida 2, lahter 2</td>
</tr>
</table>
Selline on tulemus brauseris:
| rida 1, lahter 1 | rida 1, lahter 2 |
| rida 2, lahter 1 | rida 2, lahter 2 |
Tabelid ja äärise atribuut
Kui äärise atribuuti ei määrata siis kuvatakse tabel ilma ääristeta. Mõnikord on seda vaja kuid enamikel juhtudel soovitakse, et tabelil oleksid äärised.
Selleks, et äärised oleksid nähtavad, kasutatakse äärise atribuuti.
<table border="1">
<tr>
<td>Rida 1, lahter 1</td>
<td>Rida 1, lahter 2</td>
</tr>
</table>
Pealkirjad tabelis
Pealkirjad tabelites määratakse <th> märgisega. Sellel märgisel on umbes samasugune funktsioon nagu <td> märgisel seega loob ta tabeli lahtri mis võib sisaldada nii teksti kui ka pilte.
Tegelikult on <th> märgis mõeldud tabeli ridade v. tulpade pealkirjade loomiseks. Üldjuhul asub pealkiri tabeli ülemises ääres v. siis tabeli küljel. Pealkiri ise sisaldab informatsiooni tabeli lahtri v. rea kohta. Enamik brausereid kuvab teksti sellises tabeli lahtris paksult ja keskele nihutatult.
Pane tähele. Ära kasuta <th> märgist tabeli lahtrite kujundamiseks.
<table border="1">
<tr>
<th>Pealkiri 1</th>
<th>Pealkiri 2</th>
</tr>
<tr>
<td>rida 1, lahter 1</td>
<td>rida 1, lahter 2</td>
</tr>
<tr>
<td>rida 2, lahter 1</td>
<td>rida 2, lahter 2</td>
</tr>
</table>
Selline on tulemus brauseris:
| Pealkiri 1 | Pealkiri 2 |
|---|---|
| rida 1, lahter 1 | rida 1, lahter 2 |
| rida 2, lahter 1 | rida 2, lahter 2 |
Tühjad lahtrid tabelis
Paljudes brauserites tühje lahtreid ei kuvata.
<table border="1">
<tr>
<td>rida 1, lahter 1</td>
<td>rida 1, lahter 2</td>
</tr>
<tr>
<td>rida 2, lahter 1</td>
<td></td>
</tr>
</table>
Selline on tulemus brauseris:
| Pealkiri 1 | Pealkiri 2 |
|---|---|
| rida 1, lahter 1 | rida 1, lahter 2 |
| rida 2, lahter 1 |
Nagu näha, puudub tühjal lahtril ääris. (NB! Mozilla Firefox kuvab ääriseid).
Selleks, et vältida äärise puudumist, tuleb tühja lahtrisse lisada tühiku märgis ( ).
<table border="1">
<tr>
<td>rida 1, lahter 1</td>
<td>rida 1, lahter 2</td>
</tr>
<tr>
<td>rida 2, lahter 1</td>
<td> </td>
</tr>
</table>
Selline on tulemus brauseris:
| Pealkiri 1 | Pealkiri 2 |
|---|---|
| rida 1, lahter 1 | rida 1, lahter 2 |
| rida 2, lahter 1 |
Tabeli atribuudid - colspan rowspan
Atribuudid "colspan" ja "rowspan" aitavad kujundada tabeli lahtreid ja ridu. Näiteks on vaja, et teema (tekst v. pilt) ulatuks üle mitme lahtri v. rea.
Alustame sellest, et loome kõigepealt tabeli mille kood on selline:
<table border="1"> <tr><th>Pealkirja lahter 1</th> <th>Pealkirja lahter 2</th> <th>Pealkirja lahter 3</th></tr> <tr><td>tulp 1 rida 1</td> <td>tulp 2 rida 1</td> <td>tulp 3 rida 1</td></tr> <tr><td>tulp 1 rida 2</td> <td>tulp 2 rida 2</td> <td>tulp 3 rida 2</td></tr> <tr><td>tulp 1 rida 3</td> <td>tulp 2 rida 3</td> <td>tulp 3 rida 3</td></tr> <tr><td>tulp 1 rida 4</td> <td>tulp 2 rida 4</td> <td>tulp 3 rida 4</td></tr> </table>
Tulemus peaks olema selline:
| Pealkirja lahter 1 | Pealkirja lahter 2 | Pealkirja lahter 3 |
|---|---|---|
| tulp 1 rida 1 | tulp 2 rida 1 | tulp 3 rida 1 |
| tulp 1 rida 2 | tulp 2 rida 2 | tulp 3 rida 2 |
| tulp 1 rida 3 | tulp 2 rida 3 | tulp 3 rida 3 |
| tulp 1 rida 4 | tulp 2 rida 4 | tulp 3 rida 4 |
"Colspan" "ütleb" brauserile, et tabeli lahter peab ulatuma üle mitme tulba.
Vaatame kuidas see toimib. Oletame, et on vaja luua selline lahter mis ulatuks üle kahe tulba. S.t. et "colspan" atribuut saab väärtuseks 2.
Loome sellise tabeli:
<table border="1"> <tr><th>Pealkirja lahter 1</th> <th>Pealkirja lahter 2</th> <th>Pealkirja lahter 3</th></tr> <tr><td colspan="2">tulp 1 rida 1</td> <td>tulp 3 rida 1</td></tr> <tr><td>tulp 1 rida 2</td> <td>tulp 2 rida 2</td> <td>tulp 3 rida 2</td></tr> <tr><td>tulp 1 rida 3</td> <td>tulp 2 rida 3</td> <td>tulp 3 rida 3</td></tr> <tr><td>tulp 1 rida 4</td> <td>tulp 2 rida 4</td> <td>tulp 3 rida 4</td></tr> </table>
Niisuguse tulemuse saame siis kui eemaldame teisest reast teise lahtri ning samal real määrame "colspan" väärtuseks 2:
| Pealkirja lahter 1 | Pealkirja lahter 2 | Pealkirja lahter 3 |
|---|---|---|
| tulp 1 rida 1 | tulp 3 rida 1 | |
| tulp 1 rida 2 | tulp 2 rida 2 | tulp 3 rida 2 |
| tulp 1 rida 3 | tulp 2 rida 3 | tulp 3 rida 3 |
| tulp 1 rida 4 | tulp 2 rida 4 | tulp 3 rida 4 |
"Rowspan" "ütleb" brauserile, et tabeli tulp peab ulatuma üle mitme rea.
Vaatame kuidas see toimib. Oletame, et on vaja luua selline tulp mis ulatuks üle kahe rea. S.t. et "rowspan" atribuut saab väärtuseks 2.
Loome sellise tabeli:
<table border="1"> <tr><th>Pealkirja lahter 1</th> <th>Pealkirja lahter 2</th> <th>Pealkirja lahter 3</th></tr> <tr><td rowspan="2">tulp 1 rida 1</td> <td>tulp 2 rida 1</td> <td>tulp 3 rida 1</td></tr> <tr><td>tulp 2 rida 2</td> <td>tulp 3 rida 2</td></tr> <tr><td>tulp 1 rida 3</td> <td>tulp 2 rida 3</td> <td>tulp 3 rida 3</td></tr> <tr><td>tulp 1 rida 4</td> <td>tulp 2 rida 4</td> <td>tulp 3 rida 4</td></tr> </table>
Niisuguse tulemuse saame siis kui eemaldame esimesest tulbast teise lahtri ning samas tulbas määrame "rowspan" väärtuseks 2:
| Pealkirja lahter 1 | Pealkirja lahter 2 | Pealkirja lahter 3 |
|---|---|---|
| tulp 1 rida 1 | tulp 2 rida 1 | tulp 3 rida 1 |
| tulp 2 rida 2 | tulp 3 rida 2 | |
| tulp 1 rida 3 | tulp 2 rida 3 | tulp 3 rida 3 |
| tulp 1 rida 4 | tulp 2 rida 4 | tulp 3 rida 4 |
Loome nüüd tabeli kus kasutame mõlemaid atribuute korraga:
<table border="1"> <tr><th>Pealkirja lahter 1</th> <th>Pealkirja lahter 2</th> <th>Pealkirja lahter 3</th></tr> <tr><td rowspan="2" colspan="2">tulp 1 rida 1</td> <td>tulp 3 rida 1</td></tr> <tr><td>tulp 3 rida 2</td></tr> <tr><td>tulp 1 rida 3</td> <td>tulp 2 rida 3</td> <td>tulp 3 rida 3</td></tr> <tr><td>tulp 1 rida 4</td> <td>tulp 2 rida 4</td> <td>tulp 3 rida 4</td></tr> </table>
Tulemus peaks olema selline:
| Pealkirja lahter 1 | Pealkirja lahter 2 | Pealkirja lahter 3 |
|---|---|---|
| tulp 1 rida 1 | tulp 3 rida 1 | |
| tulp 3 rida 2 | ||
| tulp 1 rida 3 | tulp 2 rida 3 | tulp 3 rida 3 |
| tulp 1 rida 4 | tulp 2 rida 4 | tulp 3 rida 4 |
<thead>, <tbody>, ja <tfoot> märgised
Need kolm märgist lisavad võimalusi tabelite kujundamisel. Otseselt on need mõeldud tabeli erinevate sektsioonide määratlemiseks. Täpsemalt öeldes saab nende mäergiste abil kujundada tabeli ülaosa (<thead>), sisu (<tbody>) ja alaosa (<tfoot>) eraldi.
<thead>
on tabeli märgis mis määrab need read mis asuvad tabeli ülemises osas. Suurte ja mahukate tabelite puhul laetakse see osa alla kõige enne ning külastaja saab rutem infole ligi.
Loome lihtsa tabeli koos "thead" märgisega:
<table style="width: 400px; border: 1px solid #000; caption-side: bottom;" summary="Selles tabelis on andmed kehakaalu kohta kuude lõikes"> <caption align="bottom"> Minu kehakaalu muutused möödunud aastal</caption> <thead> <tr><th>Kuu</th> <th>Kehakaal (kg)</th></tr> <thead> <tbody> <tr><td>Jaanuar</td> <td>130</td></tr> <tr><td>Veebruar</td> <td>128</td></tr> <tr><td>Märts</td> <td>125</td></tr> <tr><td>Aprill</td> <td>121</td></tr> <tr><td>Mai</td>< td>119</td></tr> <tr><td>Juuni</td> <td>117</td></tr> <tr><td>Juuli</td> <td>111</td></tr> <tr><td>August</td> <td>108</td></tr> <tr><td>September</td>< td>105</td></tr> <tr><td>Oktoober</td> <td>103</td></tr> <tr><td>November</td> <td>100</td></tr> <tr><td>Detsember</td> <td>99</td></tr> </tbody> </table>
Tulemus peaks olema selline:
| Kuu | Kehakaal (kg) |
|---|---|
| Jaanuar | 130 |
| Veebruar | 128 |
| Märts | 125 |
| Aprill | 121 |
| Mai | 119 |
| Juuni | 117 |
| Juuli | 111 |
| August | 108 |
| September | 105 |
| Oktoober | 103 |
| November | 100 |
| Detsember | 99 |
Ülalpool olevas tabeli "thead" sektsioonis saab kasutada kõiki standartseid siili omadusi, ridade ja lahtrite kujundamisel.
<tbody>
määrab tabeli sisu mis omakorda võimaldab selles teha muudatusi.
Kordame eelmist näidet ning lisame "tbody" elementi veidi värvi:
<tbody style="background-color: #ccc;">
Tulemus peaks olema selline:
| Kuu | Kehakaal (kg) |
|---|---|
| Jaanuar | 130 |
| Veebruar | 128 |
| Märts | 125 |
| Aprill | 121 |
| Mai | 119 |
| Juuni | 117 |
| Juuli | 111 |
| August | 108 |
| September | 105 |
| Oktoober | 103 |
| November | 100 |
| Detsember | 99 |
Kui on soovi, saab tabeli sisu veelgi värvilisemaks muuta. Tuleb vaid vastavad sisu osad eraldi määratleda.
Näiteks nii:
<tbody style="background-color: #ff7f50;"> <tr><td>Jaanuar</td> <td>130</td></tr> <tr><td>Veebruar</td> <td>128</td></tr> <tr><td>Märts</td> </tbody> <tbody style="background-color: #bdb76b;"> <td>125</td></tr> <tr><td>Aprill</td> <td>121</td></tr> <tr><td>Mai</td>< td>119</td></tr> <tr><td>Juuni</td> </tbody> <tbody style="background-color: #8fbc8f;"> <td>117</td></tr> <tr><td>Juuli</td> <td>111</td></tr> <tr><td>August</td> <td>108</td></tr> <tr><td>September</td>< </tbody> <tbody style="background-color: #add8e6;"> td>105</td></tr> <tr><td>Oktoober</td> <td>103</td></tr> <tr><td>November</td> <td>100</td></tr> <tr><td>Detsember</td> <td>99</td></tr> </tbody> </table>
Tulemus peaks olema selline:
| Kuu | Kehakaal (kg) |
|---|---|
| Jaanuar | 130 |
| Veebruar | 128 |
| Märts | 125 |
| Aprill | 121 |
| Mai | 119 |
| Juuni | 117 |
| Juuli | 111 |
| August | 108 |
| September | 105 |
| Oktoober | 103 |
| November | 100 |
| Detsember | 99 |
Tabeli generaator
Selleks, et kiiresti vajalik tabel luua on olemas erinevaid generaatoreid. Siin on üks Stephen Chapman'i poolt loodud generaator mis töötab JavaScript'i abil.
Lisa vajalikud parameetrid ning kopeeri tulemus oma tekstiredaktorisse.
Näited
Lihtne tabel
Kuidas luua lihtsat tabelit Html dokumenti
Erinevad tabeli äärised
Erinevad tabeli äärised
Ääristeta tabel
Niimoodi saab luua tabeleid milledel puuduvad äärised.
Pealkirjad tabelis
Sedasi luuakse pealkirju tabelisse.
Tühjad lahtrid
Tühiku märgise kasutamine tühjade lahtrite loomiseks.
Tabeli alapealkiri
Näide sellest kuidas luua tabelitele alapealkirju.
Tabeli lahtri ulatus
Lahter ulatub üle mitme tulba v. rea.
Märgised tabeli sees
Kuidas kasutada Html märgiseid tabeli sees.
Lahtri sisu ja tabeli äärise vahe (Cell padding)
Lahtri sisu ja tabeli äärise vahelise kauguse seadmine
Lahtrite vahekaugus (Cell spacing)
Lahtrite omavahelise kauguse seadmine
Tausta värvi v. pildi lisamine tabelisse
Nii saab muuta tabeli tausta värvi.
Tausta värvi v. pildi lisamine tabeli lahtrisse
Nii saab lisada pilte tabeli lahtrisse.
Sisu nihutamine tabeli lahtris
Sisu nihutamine tabeli lahtris
Raami atribuudi kasutamine
Tabeli raamistuse seaded
Raami ja äärise atribuudi kasutamine
Tabeli äärise ja raamistuse seaded.
Tabeli märgised
| Märgis | Kirjeldus |
|---|---|
| <table> | Määratleb tabeli |
| <th> | Määratleb tabeli pealkirja |
| <tr> | Määratleb tabeli rea |
| <td> | Määratleb tabeli lahtri |
| <caption> | Määratleb tabeli alapealkirja |
| <colgroup> | Määratleb tabeli tulpade grupid |
| <col> | Määratleb tabeli tulbad |
| <thead> | Määratleb tabeli pealkirja |
| <tbody> | Määratleb tabeli sisu ( keha ) |
| <tfoot> | Määratleb tabeli jaluse ( allrea ) |
