Tabelid HTML dokumentides.
Ülesanne 1. Avame kaustast dokumendi ja salvestame selle uue nimega.
Üheks võimsamaks ja laialdasemalt kasutatavamaks HTML vahendiks on tabelid. Andmete esitamine tabelina ei vaja lisaselgitusi. HTML dokumentides kasutatakse tabeleid mitte ainult traditsiooniliselt (andmete esitamiseks) vaid ka kui HTML dokumentide vormindamise vahendit (lehekülje elementide omavahelise asukoha määratlemine).
Esimene HTML keele versioon ei näinud ette spetsiaalseid vahendeid tabelite kuvamiseks kuna oli mõeldud põhiliselt lihtsa teksti kirjutamiseks. HTML dokumentide kasutusalade sfääri laienemisega sai aktuaalseks ülesanne andmete esitamiseks, milledele on iseloomulik ridade ja veergude olemasolu. Dokumentide loomist, mis sisaldasid veergudesse joondatud andmeid teostati esimeses HTML keele versioonis eelvormindatud teksti kasutamisega, mille sees teostati vajalik joondamine tühikute sisestamise abil. Nagu te juba õppinud olete kuvatakse tekst konteiner teegi <PRE></PRE> sees monolaiusega ðriftina (kõik sümbolid, tühikud ja kirjavahemärgid on ühelaiused) ja kõik tühikud ja tabulatsioonimärgid on tähenduslikud. Töö selliste tekstide joondamiseks teostati käsitsi, mis oluliselt aeglustas dokumentide loomist. Andmete esitamine tabelikujul sai standardiks "D'Facto" kuna algselt oli realiseeritud kõikides juhtivates lehitsejates ja alles pika aja möödudes lisati see HTML spetsifikatsiooni HTML3.2.
Spetsiaalsed vahendid tabelite loomiseks aga ei välista ka tänapäeval eelvormindatud teksti kasutamise võimalust. Tabelite kasutamine ei ole piiratud vaid andmete esitamisega ridadena ja veergudena. Üheks tabelite kasutusalaks on mitmesuguste andmete paigutuse organiseerimine leheküljel, andmeteks võib olla nii lihtne tekst kui ka kujutised, teised tabelid jne.
Lihtsaimate HTML tabelite loomine.
Ülesanne 2.
Teek <TABLE></TABLE>.
Tabeli kirjeldamine peab asuma dokumendi sisulises osas teekide <BODY> ja </BODY> vahel. Dokumendis võib olla suvaline arv tabeleid, kusjuures on lubatud isegi tabelite olemasolu tabelite sees. Iga tabel peab algama teegiga <TABLE> ja lõppema teegiga </TABLE>. Nende teekide sees asub tabeli sisuline kirjeldus. Suvaline tabel koosneb kas ühest või mitmest reast, kusjuures igas ühes neist on teatud arv lahtreid - pesi.
Teek <TR></TR>.
Iga tabeli rida algab teegiga <TR> (Table Row) ja lõppeb teegiga </TR>.
Teegid <TD> ja <TH>.
Iga tabeli rea lahter piiratakse teekidega <TD> ja </TD> (Table Data) või <TH> ja <TH> (Table Header). Teeki <TH> kasutatakse reeglina tabeli pealkirjade lahtrite jaoks ja teeki <TD> andmeid sisaldavate lahtrite jaoks. Erinevus nende kasutamises seisneb vaid vaikimisi kasutatava ðrifti tüübis, mida kasutatakse lahtri sisu kuvamiseks ja ka andmete paigutuse poolest lahtri sees. <TH> tüüpi lahtrite sisu kuvatakse poolrasvase ðriftiga ja see on joondatud lahtri keskele (ALIGN=CENTER, VALIGN=MIDDLE) ja <TD> tüüpi lahtrite kuvatakse vaikimisi joonatuna vasakule ALIGN=LEFT ja vertikaalsuunas keskele VALIGN=MIDDLE.
Read ja veerud.
Ridade arvu tabelis määrab teekide <TR> arv ja veergude arvu teekide <TD> või <TH> maksimaalne arv kõikides ridades.
Pealkiri.
Tabelil võib olla pealkiri, mis asub teekide <CAPTION> ja </CAPTION> vahel. Tabeli pealkirja kirjeldus peab asuma kohe peale teeki <TABLE> ja enne esimest teeki <TR>. Vaikimisi asub tabeli pealkiri selle kohal (ALIGN=TOP) joondatuna keskele.
Ülesanne 3. Koostame lihtsa tabeli.
Tabelite esitusviisid leheküljel.
Vaatleme nüüd lähemalt mitmesuguseid parameetreid, mida võib kasutada tabelit kirjeldavates teekides.
Tabeli päise teek <CAPTION>.
Pealkirja teegi <CAPTION> ainus lubatud parameeter on ALIGN, mille väärtuseks saab olla: TOP - pealkiri tabeli peal või BOTTOM - pealkiri, mis asub tabeli all. Parameetrit ALIGN võib ka mitte sisestada teeki <CAPTION>, siis on selle väärtuseks vaikimisi TOP. Horisontaalsuunas paigutatakse tabeli pealkiri alati keskele. Pealkirja teek <CAPTION> võib tabelis ka puududa. enamikel juhtudel kasutatakse pealkirjana harilikku teksti, kuid tegelikult võib teekide <CAPTION> ja </CAPTION> vahele paigutada kõiki teeke, mida võib paigutada teekide <BODY> ja </BODY> vahele.
Ülesanne 4. Lisame teegile <CAPTION> parameetri ALIGN.
Lehitseja Microsoft Internet Explorer pakub lisavõimalusi pealkirja asukoha valikuks. Parameetrile ALIGN on lubatud ka väärtused: LEFT, CENTER ja RIGHT (horisontaalseks joondamiseks). See on üks harvadest juhtudest kui laialdaselt kasutusel olevat parameetrit ALIGN saab kasutada nii horisontaalseks kui ka vertikaalseks joondamiseks. Näiteks tagab kirjapilt ALIGN=RIGHT selle, et pealkiri asub tabeli peal ja on joondatud tabeli parema äärejoone järgi. Kui aga kirjutada ALIGN=BOTTOM, siis asub pealkiri tabeli alla keskele nii nagu ka viimases ülesandes. Ent kahekordne parameetri ALIGN kasutamine ühes pealkirjas on lubamatu. (Küll on lubatud aga kahe pealkirja kasutamine.) seepärast on lisaks sisse toodud parameeter VALIGN tabeli pealkirja vertikaalseks joondamiseks, mille väärtuseks saab olla kas TOP või BOTTOM.
Ülesanne 5. Lisame parameetri VALIGN.
Märkus: horisontaalse joondamise võimalus on HTML keele spetsifikatsiooni laiendiks ja seda ei toeta lehitseja Netscape Navigator. Seepärast tuleb neid parameetri ALIGN lisaväärtusi kasutada ettevaatlikult nn "äärmise vajaduse" korral.
Teegi <TABLE> parameetrid.
Põhiliseks tabeli loomise teegiks on <TABLE>. Teeki võib lisada terve rea parameetreid, milledest igaühte võib ka mitte lisada. Lubatud parameetrite hulk sõltub lehitsejast.
Parameeter BORDER.
Parameeter BORDER juhib igat lahtrit ümbritseva raami laiust, mis sisuliselt annavad tabeli võrgustiku ja tabelit ümbritseva raami. Vaikimisi raame ei kuvata (kui puudub parameeter BORDER) ja kasutaja näeb vaid veergudena asetsevaid andmeid. On olemas palju töid, kus tabeli võrgustiku kuvamine ei ole soovitatav, näiteks kui on vaja paigutada kindla kujunduse järgi kuval teksti ja pilte ning muid HTML dokumendi elemente. Kuid enamikel juhtudel on palju kasulikum eraldada siiski andmed üksteisest võrgustiku joontega, mis oluliselt kergendab tabelis oleva informatsiooni vastuvõtlikust ja sellest arusaamist.
Selleks, et lisada tabeli ümber (ja lahtrite ümber) raam, tuleb teeki <TABLE> lisada parameeter BORDER. Parameetril BORDER võib olla arvuline väärtus, mis näitab selle paksust pikselites. Kui parameeter on antud ilma väärtuseks, siis on selle suuruseks vaikimisi 1.
Ülesanne 6. Lisame teegi <TABLE> parameetrile BORDER väärtuse.
Tabeli üldised mõõtmed on nii parameetri BORDER puudumisel kui ka selle olemasolul samad (erandiks on parameeter BORDER=0).
Parameeter CELLSPACING.
Parameetri CELLSPACING kirjapilt CELLSPACING=num, kus num on parameetri arvuline väärtus pikselites määrab ära kauguse tabeli üksikute lahtrite vahel (õigemini lahtrite raamide vahel) nii horisontaalsuunas kui ka vertikaalsuunas. Vaikimisi on selle parameetri väärtuseks 2, st et HTML dokumentides jäetakse tabeli lahtrite vahele tühi ruum.
Vaadake esimest tabelit dokumendis "tabelid.htm". Lahtrite piirjooned on siin eraldatud üksteisest tühja ruumiga.
Kui panna parameetri väärtuseks CELLSPACING=0, siis lähestikku jäävate tabelite lahtrite piirjooned sulavad kokku ja loovad ühtse võrgustikuga tabeli mulje.
Ülesanne 7. Lisame teegile <TABLE> parameetri CELLSPACING.
Parameeter CELLPADDING.
Parameeter CELLPADDING kirjutatakse samuti nagu ka parameeter CELLSPACING. Suurus num määrab tabeli lahtri ja tabeli lahtris olevate andmete vahelise kauguse pikselites. Vaikimisi on parameetri väärtuseks arv 1. Kui panna parameetri väärtuseks arvu 0, siis tekib olukord kus andmed on vahetult tabeli lahtri piirjoone vastu, mis omakorda jätab ebaesteetilise mulje.
Parameetrite CELLSPACING ja CELLPADDING toime tabeli puhul, millele on määratud raamide laiuseks arv 0 on väliselt samasugune. Mõlemad parameetrid mõjutavad vastavaid vahekaugusi nii horisontaalsuunas kui ka vertikaalsuunas. Kahjuks ei ole ette nähtud eraldi horisontaalsuunas või vertikaalsuunas vahekauguse juhtimist nagu on see kujutise teegi <IMG> parameetrite HSPACE ja VSPACE puhul.
Kõik kolm parameetrit: BORDER, CELLSPACING ja CELLPADDING töötavad üksteisest sõltumatult ja kui neist on mõni puudu, siis võetakse selle väärtuseks vaikimisi määratud arv. Kui aga jätta välja kõik kolm parameetrit, siis on minimaalseks vahemaaks andmete vahel kõrvutiolevates lahtrites on võrdne 6 pikseliga. (CELLSPACING=2 + CELLPADDING=1 + BORDER=1 + 2 pikselit raamide endi paksuse arvelt).
Kõige väiksem (kompaktsem) on tabel siis kui võtta kõigi kolme parameetri väärtuseks 0. Sellisel juhul on kõikides tabeli lahtrites olevad andmed vahetult üksteise kõrval. Sellise tabeli kasutamise näiteks võib olla tabel kus igas lahtris on mingisugune graafiline kujutise osa ja mis kõik kokku moodustavad mingi suurema graafilise kujutisi.
Ülesanne 8. Lisame nüüd uue lihtsa tabeli, milles on üks rida ja selles kolm veergu, tabeli lahtritesse sisestame kolm GIF pilti, mis te joonistasite eelmises tunnis animatsiooni loomiseks.
Parameetrid WIDTH ja HEIGHT.
Tabeli kuvamisel määratakse selle laius ja kõrgus automaatselt lehitseja poolt. Kusjuures arvesse võetakse: kogu dokumenti, antud tabelit ja selle üksikuid veerge ja ridasid ja ka selle, mis on tabeli lahtrites kirjeldavate parameetrite väärtusi.
Enamusel juhtudest annab tabeli mõõtmete dünaamiline määramine tulemusena esteetiliste mõõtmetega kujutise, kusjuures kuva mõõtmeid kasutatakse kõige efektiivsemalt. Ent on olemas juhuseid kus on vaja sunniviisiliselt määratleda tabeli laiust ja kõrgust. Selleks kasutatakse parameetreid WIDTH ja HEIGHT. Kirjapilt: WIDTH=num ja HEIGHT=num, kus num on kas kogu tabeli laiuse suurus pikselites või siis tabeli laius protsentides % kogu kuva laiusest. Võib muidugi sisestada ka suurema protsendimäära kui 100% kuigi on raske ette kujutada olukordi kus selliseid tabeleid vaja läheks.
Ülesanne 9. Lisame parameetrid WIDTH ja HEIGHT.
Loomulikult võib tabeli mõõtmete etteandmisel kasutada ka parameetrite segatüüpi väärtusi, st laius anda pikselites ja kõrgus protsentides ja vastupidi.
Analoogseid parameetreid võib anda ka üksikute lahtrite jaoks.
Ülesanne 10. Sisestame mõõtmed ka esimese tabeli lahtrite jaoks.
Parameeter ALIGN.
Teegi <TABLE> parameeter ALIGN võimaldab joondada tabeli kas vasakule ALIGN=left, paremale ALIGN=right või keskele ALIGN=center. Vaikimisi on tabelid joondatud vasakule.
Kui parameetri ALIGN väärtuseks on left või right on lubatud teksti voolamine ümber tabeli sarnaselt kujutiste teeki <IMG> sisestatava parameetriga ALIGN.
Täpsemaks teksti voolamise juhtimiseks saab kasutada teeki <BR> parameetriga CLEAR sarnaselt teegiga <IMG>.
Väärtuse center korral on teksti voolamine keelatud ja tabel paigutatakse teksti sisse nii, et tekst paigutatakse tabeli ette ja järele, kuid tabeli kõrvale jääb mõlemalt poolt tühi ruum.
Kui aga parameeter ALIGN puudub, siis on teksti voolamine keelatud, kuigi parameetri vaikimisi väärtuseks on left.
Ülesanne 11. Lisame parameetri ALIGN.