Andmete vormindamine tabelis.

Ülesanne 1. Avame kaustast dokumendi ja salvestame see uue nimega.

  1. Avage oma töölaual olev kaust "HTML40"
  2. Käivitage Notepad (Start-Programs-Accessories-Notepad) või intelligentsem tee Notepad käivitamiseks (Start - Run…; kirjutame lahtrisse notepad ja klõpsame korraldusnupul OK).
  3. Avage Notepad abiga kaustast "HTML40" dokument "uus.htm".
  4. Salvestage dokument samasse kausta uue nimega "tabelid-2.htm".
  5. Avage uus dokument "tabelid-2.htm" ka lehitseja abil.

Igat üksikut lahtri tabeli sees võib vaadelda kui vormindamiseks sõltumatut ala. Kõik reeglid, mida kasutame teksti vormindamiseks on rakendatavad ka tekstile lahtri sees. Lahtri sees on lubatud kasutada praktiliselt kõiki HTML keele teeke, mida on lubatud kasutada teekide <BODY> ja </BODY> vahel, sealhulgas ka teeke, mis juhivad teksti paigutust dokumendis: <P>, <BR>, <HR>; pealkirjade teeke: <H1> kuni <H6>; sümbolite vormindamise teeke: <B>, <I>, <STRONG>, <BIG>, <EM>, <FONT SIZE>, <FONT COLOR>; graafiliste kujutiste sisestamise teeke <IMG>; hüpertekstiviidete teeke <A> jne. seejuures tuleb silmas pidada järgmist: selleks, et vormindamise ala piirdub konkreetse lahtriga sõltumata sellest kas on olemas või puudub vastava vormindamise teegi sulgev teek.

Ülesanne 2. Lisage dokumendile pealkiri ja lihtne tabel.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Lisage dokumendi sisulisse ossa pealkiri: Tabelite vormindamine ja vormindage see esimese taseme pealkirja teegiga, joondage pealkiri lehekülje keskele.
  3. Lisage pealkirja alla lihtne tabel: kolm rida ja kolm veergu:

    <TABLE BORDER>
    <TR>
    <TD>
    Rida 1. Veerg 1.</TD>
    <TD>
    Rida 1. Veerg 2.</TD>
    <TD>
    Rida 1. Veerg 3.</TD>
    </TR>
    <TR>
    <TD>
    Rida 2. Veerg 1.</TD>
    <TD>
    Rida 2. Veerg 2.</TD>
    <TD>
    Rida 2. Veerg 3.</TD>
    </TR>
    <TR>
    <TD>
    Rida 3. Veerg 1.</TD>
    <TD>
    Rida 3. Veerg 2.</TD>
    <TD>
    Rida 3. Veerg 3.</TD>
    </TR>
    </TABLE>

  4. Joondage tabel lehekülje keskele.
  5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Andmete vormindamiseks lahtrite sees on järgmised parameetrid:

Parameetrid ALIGN, VALIGN, WIDTH ja HEIGHT.

Lahtrite sisu joondamiseks on parameetrid: ALIGN ja VALIGN. Võib kasutada teekides <TR>, <TD> ja <TH>.

Horisontaalse joondamise parameeter ALIGN võib omada väärtusi: left, right ja center (vaikimisi on määratud väärtus left teegile <TD> ja väärtus center teegile <TH>).

Vertikaalse joondamise parameeter VALIGN võib omada väärtusi: top (ülemise äärejoone järgi), bottom (alumise äärejoone järgi), middle (keskele), baseline (baasjoone järgi). Vaikimisi on parameetri VALIGN väärtuseks: middle. Joondamine baasjoone järgi kindlustab ühe rea teksti joondamise kõikides lahtrites ühtse baasjoone järgi.

Parameetrite sisestamine teeki <TR> määratleb kogu antud rea lahtrite joondamise parameetrid, kusjuures igas lahtris eraldi võivad olla määratud joondamiseks omad parameetrid, mis muudavad rea teegis <TR> määratud üldiseid parameetreid.

Ülesanne 3. Joondage ridu ja lahtreid.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Joondage tabeli esimese rea kõik elemendid keskele: lisame teeki parameetri ALIGN väärtusega center.
  3. Joondage tabeli esimese rea teise lahtri sisu paremale lisades teeki parameetri ALIGN väärtusega right.
  4. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

    Mnjah, ei muutunud midagi.

  5. Suurendage tabeli laiust WIDTH=85%-ni kogu kuva laiusest ja määrame lahtrite laiuseks 33% tabeli laiusest <TD WIDTH=33%>, kusjuures lahtrite laiused võib määrata ainult esimese rea jaoks.
  6. Määrake tabeli kõrguseks HEIGHT=250 pikselit ja iga rea kõrguseks 33% sellest <TR HEIGHT=33%>.
  7. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

    Kuna määrasime teegi <TR> parameetri ALIGN väärtuseks center on kõikide selle rea lahtrite sisu joondatud keskele, välja arvatud teine lahter kus määrasime eraldi joondamise parameetri ALIGN väärtuse right.

  8. Joondage teise rea ülemise äärejoone järgi VALIGN=top.
  9. Joondage kolmanda rea alumise äärejoone järgi VALIGN=bottom.
  10. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Parameetrid COLSPAN ja ROWSPAN.

Keerulistele tabelitele on omane, et mõned lahtrid on suuremad kui teised, jääb mulje, et nad on saadud justkui väiksemate lahtrite liitmise teel. Antud võimaluse realiseerib parameetrite COLSPAN (COLumn SPANning) ja ROWSPAN (ROW SPANning) kaudu teekides <TD> ja <TH>. Kirjapilt on järgmine: COLSPAN=num, kus num on arvuline väärtus, mis määrab mitme veeru peale tuleb veergu laiendada horisontaalsuunas. Parameetri ROWSPAN kasutamine on analoogiline, kui siin näidatakse ridade arv, mille hõivab antud lahter vertikaalsuunas. Vaikimisi on nende parameetrite väärtuseks 1. On lubatud ühe lahtri jaoks määratleda ka mõlemad parameetrid.

Ülesanne 4. Liidame lahtrid.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Liidame tabeli esimese rea teise ja kolmanda lahtri:

    A. eemaldage tabeli esimesest reast kolmas lahter.
    B. lisage esimese rea teise lahtri teeki parameeter
    COLSPAN=2.
    C. muutke teise lahtri laiuseks
    66%.

  3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.
  4. Liidame nüüd teise rea esimese ja kolmanda rea esimese lahtri:

    A. lisage teise rea esimese lahtri teegile parameeter
    ROWSPAN=2.
    B. eemaldage kolmandast reast esimene lahter.

  5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

    Tulemus: esimeses reas on kaks lahtrit, teises reas on kolm lahtrit ja kolmandas reas on kaks lahtrit.

Märkus: lahtrite liitmise parameetrite tähelepanuta kasutamine või tuua endaga kaasa lahtrite vastastikuse ülekatte (üks lahter on justkui teise peal) ja konfliktid, mille puhul on tulemus ettemääramatu. Liidetud pesade iseloomulik kasutamisala on harilikult mitmele veerule (reale) ühise pealkirja andmine.

Parameeter BGCOLOR.

Parameeter BGCOLOR võimaldab määrata kogu tabeli, üksikute ridade või lahtrite tausta värvi. Võib kasutada teekides: <TABLE>, <TR>, <TD> ja <TH>. Kirjapilt on BGCOLOR=väärtus, kus väärtus on kas RGB formaadis #RRGGBB või sisestatakse väärtusena värvi korrektne inglisekeelne nimetus.

Ülesanne 5. Värvime tabeli read.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Sisestage tabeli esimese rea teeki TR parameeter: BGCOLOR=#FF0000.
  3. Sisestage tabeli teise rea teeki TR parameeter: BGCOLOR=#FFFF00.
  4. Sisestage tabeli kolmanda rea teeki TR parameeter: BGCOLOR=#80FF00.
  5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Tabel tabelis.

Üksikud tabeli lahtri teegid võivad endas sisaldada praktiliselt kõiki HTML keele teeke ja andmeid, mis on lubatud teekide <BODY> ja </BODY> vahel. Sealhulgas võib tabeli lahtris asuda tervikuna ka teine tabel. Selliseid tabeleid nimetatakse teise, kolmanda jne taseme tabeliteks (analoogiliselt mitmetasemeliste loenditega). Nende kirjutamise reeglid on samad, mis ka harilike tabelite puhulgi ja ei vaja seega eraldi kirjeldust. Märgin vaid, et mitte kõik lehitsejad ei toeta keerulisi mitmetasemelisi tabeleid ja seepärast on nende kasutamisel vaja teatud mõõdutunnet.

Ülesanne 6. Sisestame tabeli teise rea esimesse lahtrisse teise taseme tabeli.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Sisestage tabeli teise rea esimesse lahtrisse sundreavahetuse teek <BR>
  3. Sisestage tabeli teise rea esimesse lahtrisse järgmine teise taseme tabel:

    <TABLE BORDER ALIGN=center BGCOLOR="blue">
    <TR>
    <TD>
    rida 1. veerg 1.</TD>
    <TD>
    rida 2. veerg 1.</TD>
    </TR>
    </TABLE>

    Tabelis on üks rida ja kaks lahtrit (veergu).

  4. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Teise, kolmanda, neljanda jne tabeli kasutamine teenib vaid ühte ülesannet - andmete paigutamine HTML leheküljel. Näiteks kui oleks vaja paigutada kolm eraldi tabelit samale lehele kõrvuti, siis saaks seda teha vaid nii, et luuakse üks üherealine ja kolme veeruga tabel (nähtamatu võrgustikuga BORDER=0), mille igasse veergu saab asetada teise taseme tabeli.

Tabelite ehitamise eripära.

Tühjade lahtrite kuvamine tabelites.

Üheks tabelite kuvamise eripäraks paljudel lehitsejatel on tühjade lahtrite kuvamine. On olemas erinevus tühjadel lahtritel, kus pole mingeid andmeid ja lahtritel kus on mittekuvatav informatsioon, näiteks teegid. Kui lahtris on mingi informatsioon (ka mittekuvatav), siis kuvatakse see lahter täpselt samuti nagu lahtrid, milledes on kuvatav informatsioon. Kui aga lahtri teekide ja vahel ei olegi midagi, siis kuvavad erinevad lehitsejad seda lahtrit erinevalt: Netscape ei kuva tühja lahtrit üldse ja kuvab seal kus peaks asuma tühi lahter lehekülje tausta, tühjade lahtrite ümber ei kuvata ka raami; Internet Explorer kuvab tühja lahtri nii, et kuvab ainult lahtri tausta jättes samuti kuvamata lahtri raami.

Ülesanne 7. "Loome" tühjad lahtrid.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Eemaldage mõnest tabeli lahtrist selgitav tekst.
  3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Tabeli raami värvi määramine.

Tabeli raami värvi määramiseks saab kasutada parameetrit BORDERCOLOR, mille väärtuseks on kas RGB formaadis #RRGGBB või sisestatakse väärtusena värvi korrektne inglisekeelne nimetus. Seda parameetrit võib kasutada teekides: <TABLE>, <TR>, <TD> ja <TH>.

Ülesanne 8. Värvime tabeli raami.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. lisage tabeli teeki TABLE parameeter BORDERCOLOR="purple".
  3. Lisage iga rea teeki <TR> parameeter BORDERCOLOR="gray".
  4. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Taustamustri kasutamine tabelis.

Parameeter BACKGROUND määrab tabelile taustamustri samuti nagu ka kogu HTML dokumendile. See parameeter võib olla teekides: <TABLE>, <TD> ja <TH>.

Ülesanne 9. Kasutame taustamustrit tabelis.

  1. Avage või aktiveerige Notepad dokumendiga "tabelid-2.htm".
  2. Sisestage tabeli teeki <TABLE> parameeter BACKGROUND="Pilt-1.gif"
  3. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

    Nagu näha on tabeli taustaks lahtritevaheline ruum ja lahtrite raamide ja tabeli raami vaheline ruum.

  4. Suurendage seda ruumi sisestades teeki <TABLE> parameeter SELLSPACING=10.
  5. Salvestage muudatus Notepadis ja värskendage lehitseja kuva.

Alternatiivsed andmete esitamisviisid.

Tugi tabelite sisestamiseks sai laialdaselt interneti lehitsejate omaduseks nii, et praktiliselt ei olegi põhjusi millepärast tuleks hoiduda nende kasutamisest. Sellegipoolest vaatleme võimalikke alternatiivseid andmete esitusviiside variante, mida võib kasutada tabelite asemel või nendele lisaks.

Mõned moodused mis ei kasuta tabeli mõistet:

  1. Eelvormindatud teksti kasutamine - seda moodust kasutati traditsiooniliselt varasemate HTML keele versioonides kui tabelitele tuge veel ei olnud. Eelvormindatud teksti kasutamine ei ole ka tänapäeval kaotanud oma aktuaalsust kuna sellised tekstid kuvatakse korrektselt kõikides lehitsejates sealhulgas ka ainult tekstilehitsejad.
  2. Tabeleid sisaldavate kujutiste kasutamine - tabel võib olla loodud suvalise tekstitöötlusvahendiga või isegi olla kuvatud lehitseja poolt ja seejärel salvestatud kui pilt mingis graafilises formaadis. See ei ole tegelikult kõige parem variantidest kuna kaob tabeli esituse dünaamiline seadistamine. Peale selle tekib vajadus lisafaili (kujutise fail graafilises formaadis) salvestamises, mille suurus on reeglina suurem kui HTML dokumenti kirjeldava teksti suurus. Võimalik kasutusala - rangelt määratud mõõtmetega tabelid, milledele ei ole lubatud tema kuva sõltumine mingitest välistest faktoritest (lehitseja töörežiimidest, kasutatavatest šriftidest jne).
  3. Loendite kasutamine tabelite asemel - lihtsaimatel juhtudel võib tabelite kasutamise asemel piirduda ühega HTML keele poolt pakutavatest loendite tüüpidest.