HTMLi kursus #4.2 – Tabelid

HTMLi kursus #4.2 – Tabelid

Eelmine osa: HTMLi kursus #4.1 – Nimekirjad

Tänases õpetuses võtame ette tabelid. Need ei ole väga keerulised, aga siiski võib tulla ette kohti, mis on segadust tekitavad ja vahel isegi tüütud.

Ma olen jaganud selle postituse kolmeks osaks:

  • lihtsamad tabelid – räägin tabelite algtõdedest ja elementidest
  • keerulisemad tabelid – räägin natukene keerulisemate tabelite elementidest
  • tabelite disainimine (või kujundamine) – osa, mille oleksin hea meelega ära jätnud

Nagu ikka olen ma teinud valmis näidislehe (interaktiivne näide siin) ja konspekti (konspekti interaktiivne näide siin).

Näidisleht

Ma soovitaksin kindlasti näidislehte (mis edaspidi on näidis või minu/enda veebileht) inspekteerida (kaasas käia), kui parasjagu loete ja uusi elemente õpite. Nii saate rohkem aru.

Aga ega muud midagi, head lugemist ja õppimist.

 

HTMLi tabeli üldised reeglid

HTMLis luuakse tabeleid ridade, mitte tulpade kaupa. Ehk ühesõnaga, sa ei saa luua HTMLis tulpi, vaid ainult ridu.

Kui sa defineerid uue rea, siis see oma korda defineerib tulpi või õigemini lahtreid (sellest natukene aja pärast).

HTMLi kergemad tabelid

Alustame kergematest. Vaata (inspekteeri) näidislehel olevat tabelit “Minu kassi menüü”. See on lihtne tabel, sest see on korrapärane. Koosneb neljast reast ja kahest tulbast.

Iga tabeli elemendid (nii kergemate kui ka keerulisemate)

<table></table> – igat tabelit alustatakse sellega. See ütleb HTMLile, et nüüd järgneb tabel. Tabelil ja tema lapselementidel erilist stiili ei ole. On lihtsalt korrapäraselt jaotatud tekst, mis jätab  tabeli mulje (tabelil ise ääri pole, need tuleb stiiliga lisada). Tabelil on üsnagi palju kohustuslikke elemente (ilma nendeta tabelil suurt põhimõtet pole): <tr> ja <th> või <td>. Table on ingliskeelne sõna ja eestikeeles tähendab see tabelit.

Tabeli kujundamisest räägin veel allpool, aga see jutt on ka rohkem mõeldud entusiastlikele, sest kahjuks on tegemist praegustest õppetundidest liiga ees oleva teemaga.

Lihtsa tabelina olen enda veebilehel kasutanud näitamaks minu kassi menüüd. Allpool sellest on ka keerulisem tabel, millest ma praegu ei räägi.

NB! Kindlasti ärge kasutage <table> elementi terve veebilehe tegemiseks. Tabel on siiski mõeldud ainult mingi andmestikku või andmete näitamiseks ja organiseerimiseks.

 

Kõik järgnevad elemendid asetsevad <table> sees.

 

<caption></caption> – defineerib ja tähistab tabeli üldpealkirja. <caption> peab järgnema koheselt pärast <table> algusmärgendile. Kõik teised tabeli elemendid peavad järgnema <caption> elemendile.

<caption> elementi kujutatakse tavaliselt tabeli kohal keskel asetseva regulaarse tekstina. Caption on ingliskeelne sõna, mille eestikeelne vaste on pealkiri.

<caption> elementi kasutasin ka mõlemas tabelis. Seda on näha tabelite kohal.

NB! <caption> elementi saad kasutada ühe tabeli kohta ühe korra. Ühes tabelis ei tohi olla kahte <caption> elementi.

 

<tr></tr> – tähistab ainult tabeli rida. <tr> elemendil on omakorda kaks kohustuslikku lapselementi ja need on <td> või <th>(nendest mõne hetke pärast).  <tr> element peab olema kas tabeli sees või tabeli sektsioonielemendi sees (nendest natuekene hiljem). Lühend tr tuleb ingliskeelsest väljendist table-row, mis eesti keeles tähendab tabeli rida.

<tr>elementi kasutasin loomulikult selleks, et tähistada ja defineerida mõlema tabeli ridu.

 

<td></td> – tähistab ühte tabeli tavalist lahtrit (<td> sisse käib tekst). Kujutatakse tavalise tekstina lahtri vasakus pooles. Lühend td tuleb inglise keelsest väljendist table-data, mis eesti keeles tähendab tabeli admeid (ainsuses fakti), kuigi targem on öelda tabeli lahtrit.

<td> enda veebilehes kasutasin seda loomulikult tavaliste lahtrite defineerimiseks ja tähistamiseks.

Kui ühte <tr> (tabeli ritta) panna kaks <td> elementi (tabeli lahtrit), siis tekib ühte ritta kaks lahtrit, seega tekib kaks tulpa. Kui panna kolm <td> elementi saame kolm rida. Loogiline ju! Me lihtsalt lisame lahtreid juurde.

Ja kui panna ühte tabelisse kaks <tr> elementi, milles mõlemas on kolm <td> elementi, saame juba kolm tulpa ja kaks rida. Ehk saame korrapärase tabeli (selles mõttes, et tulbad ja read jooksevad tabeli algusest kui lõpuni välja, nii-öelda takistusi pole).

Korrapärase tabeli näide

NB! <tr> elemendid ei käi üksteise sees, sest kas sa saaksid panna tabeli rida tabeli rea sisse?

 

<th></th>– tähistab ühte tabeli pealkirja lahtrit. Kui <td> element tähistab tavalist tabeli lahtrit, siis <th> tähistab pealkirja lahtrit. Tema sees käib tavaliselt tekst ja seda kujutatakse tihtipeale boldina ja tabeli lahtri keskel asetsevana. Mõelge seda nagu pealkirja teistele lahtritele. Lühend th tuleb ingliskeelsest väljendist table (cell) header, mis eesti keeles tähistab tabeli lahtri pealkirja, kuigi mõistlikum oleks sellest mõelda kui pealkirja lahtrit.

<th> käitub täpselt samamoodi kui <td> (tulpade ja ridade poolest), ainult sisemus kujutatakse teistmoodi.

<th> elemendile on 3 omast atribuuti:

  • abbr="termini lühendus" – annab <th> elemendis pikale pealkirjale lühema seletuse (nt. Cascading Style Sheet – CSS). Seda kasutatakse rohkem ekraanilugejates
  • headers="lahtri id" – defineerib ära, kuidas mõned <th> elemendid on omavahel seotud (näiteks ühel suurel pealkirjal on mitu alapealkirja)
  • scope="col|row|colgroup|rowgroup" – defineerib, millistele osadele on <th> element pealkirjaks
    • col<th> on pealkirjaks ainult tulbale
    • row<th> on pealkirjaks ainult reale
    • colgroup<th> on pealkirjaks gruppis tulbale
    • rowgroup<th> on pealkirjaks gruppis reale

Omas veebilehes kasutasin seda näitamaks uue sektsiooni algust mõlemas tabelis (nagu kassi söögikord ja toit). See on nagu tabeli alapealkiri.

 

HTMLi keerulisemad tabelid

Nüüd liigume edasi keerulisemate tabelite elementide ja ka omaduste juurde. Veebilehel on selleks tabeliks “Minu ametlik säästuplaan”.

Keerulisemate tabelite alustala

<td> ja  <th> elemendil on kaks omast atribuuti, mille ma meelega vahele jätsin. Need atribuudid on colspan="number"  ja  rowspan="number". Nemad kontrollivad lahtrite suurust. Õigemini nad kontrollivad seda, et mitu lahtrit on üheks kokku pandud.

colspan ja rowspan elementide tavaline väärtus on 1, see tähendab, et lahtrite kokku panemiseks peab kasutama suuremat väärtus kui 1.

See ongi tegelikult alustala keerulisemale tabelile. Me “sulatame” (ma kasutan seda sõna edaspidi, sest mulle meeldib see) lihtsalt kaks või rohkem lahtreid kokku, et selleks saaks üks suur lahter.

 

Alustame rowspanist. rowspan sulatab kokku ridu (see tähendab sulatamist allapoole). Ja et me saaksime korralikult (ilma vigadeta) sulatada peab rowspanil alumine lahter või lahtrid tühjad olema.

See tähendab seda, et rida võib olla defineeritud (ja isegi mitme tulbaga), aga lahter (ehk kas <td> või  <th> element), millel on rowspan atribuut eeldab, et tema alumine lahter või alumised lahtrid oleks tühjad (see tähendab, et lahter ei tohi olla HTMLis defineeritud), et sulatamine täielikult toimiks.

rowspanil on väärtuseks number ja see ütleb mitu rida peab kokku sulatama. Nii palju peab ka tühjasid lahtreid allpool olema.

Rowspan näide

See osa, mis jääb <!–  –> vahele on HTMLi kommentaar. Kommentaare HTML (ja ka teised programmeerimiskeeled) ignoneerib. Neid kirjutatakse ainult inimestele selgituseks.

Praegu olen ma selgituseks toonud, et rohkem <td>  elemente ei tohi olla, sest muidu kokku sulatamine ei oleks edukas.

Olen ka teinud teise tabeli, kus rowspan atribuuti ei ole ja ka ei ole teist  <td> elementi ning on näha, et HTML viib tabeli lõpuni, olenemata, kas mul on kirjas <td> element või ei ole. Tekib nagu selline tühi lahter, kuigi tegelikult ei ole seal midagi. Kommenteerisin ka seda nähtust.

 

Järgmisena võtame ette colspani, colspan teeb täpselt sama asja, mida rowspan, aga ainult tulpadega. Ehk sulatab tulbad ühte vasakult paremale.

Reeglid on ka täpselt samad, järgnev või järgnevad lahtrid peavad olema tühjad, et sulatamine korralikult toimiks.

Colspan näide

Nagu näha on colspani käitumine sarnane rowspanile.

 

Ühte ma ütlen veel rowspani ja colspani kohta, et sulatamine oleks edukas (ei tekiks probleeme), rowspani või colspani väärtus ei tohiks olla suurem kui tabeli ridade või tulpade arv.

Kui see on suurem, siis üritab HTML kokku sulatada ridu või tulpi, mida pole tegelikult olemas.

Ja tegelikult midagi rohkem keerulisemat siin polegi. Nõnda ma selle suure ja keerulise tabeli tegin. Kasutades ainult rowspani ja colspani.

Värvidest ja stiilidest räägn ma allpool.

Keerulisemate tabelite elemendid

Uskuge mind või mitte, aga tegelikult on neid kolm (kui välja arvestada kujunduselemente) ja need pole nii keerulised.

<thead></thead> – tähistab tabeli päise osa. Seda ja järgmisi elemente kasutatakse lihtsalt tabeli jagamiseks. Tegemist on sektsioonielementidega, sest nad jaotavad sisu. Tabeli päises on tavaliselt tähtis info või lahtri pealkirjad (<th> elemendid). Lihtsalt jätke meelde, et <thead> on nii-öelda tabeli pea, kus on tihti tulpi seletavad lahtrid. Lühend thead tuleb ingliskeelsest väljendist table head ehk tabeli päis.

<thead> elementi olen kasutanud keerulisema tabeli loomisel. Olen sinna sisse pannud nii tulpade pealkirjad, aga ka nii-öelda protokolli lahtrid, mida on tähtsad nii rahasäästmisteenuseid pakkuvale firmale (kui selline firma olemas on 😀 ) kui ka kliendile.

 

<tbody></tbody> – tähistab tabeli põhisisu osa. Ülesanne on <tbody> elemendil samasugune nagu <thead>, aga siia sisse tavaliselt käib tabeli realsed andmed ehk põhisisu. Lühend tbody tuleb ingliskeelsest väljendist table body, mis otsetõlkes tähendab tabeli keha, aga targem oleks öelda tabeli põhisisu.

<tbody> elementi olen kasutanud jällegi keerulisema tabeli loomisel. Olen sinna sisse pannud “Kokku lepitud säästmisvõtted” ja selle alla olevad lahtrid. See tähistab tegelikult sessiooni ja tabeli põhisisu. <tbody> elemendis on välja toodud, millele ma jah ütlesin ja millele ei.

Kui tahate veel säästmisnippe siis vaadake siia.

 

<tfoot></tfoot> – tähistab tabeli alumist (kokkuvõtvat) osa. Jällegi funktsioon täpselt samasugune nagu ülemistel – jaotada tabel erinevateks osadeks, ainult seda kasutatakse tihti tabeli kokkuvõtva või mõne muu tähtsa osa loomiseks tabeli alumistesse lahtritesse. Lühend tfoot tuleb ingliskeelsest väljendist table footer ja tähendab otse eesti keeles tabeli alamosa, kuigi parem oleks sellest mõelda kui tabeli kokkuvõtvat osa.

Loomulikult olen ma <tfoot> elementi kasutanud keerulisemas tabelis (tihtipeale kasutatakse neid kolme keerulisemate tabelite puhul, aga võib ka kasutada lihtsamate juures).

<tfoot> tähistab minu tabelis siis kokkuvõtvat osa sessioonist ja ka teatud mõttes tähtsat osa, et kui palju on minu oodatud tulemus (need numbrid on välja mõeldud).

Tabel koos sektsioonidega

Tegin kaks näidet – üks, mis rohkem seletab ja teine, mis on rohkem päris maailmale sarnane.

NB! <thead><tbody> ja  <tfoot> lihtsalt jaotavad tabeli erinevateks sektsioonides (need on tabeli sketsioonielemendid ja ei anna tabeli kujutamisele midagi juurde) . Seega peab ikkagi nende elementide sees olema element <tr> ja selle sees omakorda <td> või <th> (nõnda tekivad ju read ja ka tulbad).

Ning lisaks sellele peavad tabeli sektsioonielemendid nagu kõik teised elemendid tulema pärast <caption> ja/või <colgroup> elementi.

Tabelite disainimine – värvimine ja tabeli piirjooned

Võib-olla mõned küsivad, et miks ma oleks selle osa ära jätnud ja miks see osa on ainult entusiastlikele.

Tõin selle põhjuse tegelikult ka välja, aga ma arvan lihtsalt seda, et praegu on see liiga keeruline ja liiga praegusest teemast ees (see on ka üks põhjus, miks ei ole minu konspektid eriti ilusad ja on rohkem brutalistlikud). Kindlasti tulevikus teen kujundamise peale ka kursuse (CSSi kursus, mis võib olla isegi tuleb video formaadis).

Aga kui sa tunned, et praegu oled väsinud ja eriti ei hooli tabeli värvimisest ja tabeli piirjoonte lisamisest, siis võid selle osa vabalt vahele jätta.

Tabeli värvimine ja kujundamine läbi <colgroup> ja <col>

Tabelite värvimiseks ja ka disainimiseks kasutatakse kahte elementi – <colgroup> ja <col>.

Minu arust on see kujundamisviis üsnagi vanamoodne ja seda ei peaks enam kasutama. Aga kuna W3C (ametlik HTMLi edasi arendaja) on selle viisi siiski HTML5 lisanud, siis pean mina ka seda õpetama.

<colgroup> – defineerib ära, et järgmisena tulevad kujundamiselemendid. Sellel on ka kohustuslik lapselement ja see on <col> element. Termin colgroup  ehk column group tuleb ingliskeelest ja tähendab eesti keels tulba gruppi.

NB! <colgroup> peab tulema pärast <caption> elementi ja enne tabeli sektsiooni elemente ( <thead><tbody> ja  <tfoot>) või enne tabeli ridu <tr>.

Enda veebilehes kasutasingi <colgroup> elementi selleks, et öelda tabelile, et järgneb kujundamiselemendid.

 

<col /> – kjundab mitut tulpa korraga. <col> on isesulguv element ehk element suletakse /> nagu break-line (<br />) element suletakse. Lühend col tuleb ingliskeelest sõnast column ja tähendab eesti keeles tulpa.

Disainimiseks kasutatakse CSSi, millest räägin natukene allpool. Tema kohustulikuks emaelemendiks on <colgroup>.

Oma veebilehes kasutasin <col> kujundamiseks ehk värvisin ühe osa tabelist roheliseks.

Mõlemal elemendil <colgroup> ja <col> on üks nendele omane atribuut ja see on span="number" ning see valib nii mitu tulpa kui on antud number ja kujundab neid (töötab põhimõtteliselt colspani sarnaselt).

 

Stiile lisatakse atribuudiga style="stiil ehk CSSi omadus" (mis on globaalne atribuut ehk kõikidel elementidel on style atribuut olemas). Tavaliselt kujundab see elementi ennast, aga siin (ma mõtlen selle all <col> elementi), kujundab see see hoopis tabeli tulpi.

Ise kasutasin kujundamiseks väärtust background-color: #81c784;, mis muudab tagatausta roheliseks (värv on esitatud HEX värvikoodis). Selle #81c784 võib ka asendada ingliskeelse sõnaga, mis esindab värvi. Proovi interaktiivses näites korra panna selle väärtuseks näiteks green, red vms. Vaata, et sa klikid ka “Run” ülemises vasakus nurgas

Isiklikult ma ei soovitaks nõnda tabeleid kujundada, sest see on üsnagi vana ja halb viis. Kujundamiseks tuleks siiski kasutada täielikult CSSi.

Tabeli piirjooned

Kui sa võib olla katsetasid juba erinevate tabelitega loomisega (see on väga hea, et sa seda tegid), siis sa kindlasti märkasid, et sinu tabelil pole piirjooni. Ma mainisin seda korra ka <table> elemendi seletamisel.

Piirjoonteta tabel

Nagu näed ei ole tegemist just kõige paremate tabelitega.

Et piirjooni saada peab lisama natukene CSSi. CSS (Cascading Style Sheet – kaskaadilaadistik) on front-end veebiarenduses kasutatav veebikeel, millega saab veebilehti ja nende sisu disainida.

Ma ei lähe praegu siin detailidesse, vaid üritan selle üsnagi lihtsalt ära rääkida ja anda sulle põhitõe CSSist.

Piirjoontega tabel (täpsed samad tabelid, mis olid piirjoonteta näites)

Kohe parem ju.

 

Mine CSS vahelehele selles näites.

Nüüd sa peaksid nägema CSSi koodi, mis muudab tabelit.

table, th, td kui ka eraldi seisev table – need on selektorid. Need valivad (selector – valija) HTMList kirja pandud elemendid ja üritavad neile stiile lisada (kui elementi ei leita, siis stiili ka ei lisata).

Komaga olen lihtsalt eraldunud selektorid. Kui komasid vahel ei oleks, siis arvaks CSS, et peab kujundama <td> elementi, mille vanaemaks on <table> ja emaks <th>. Koma lihtsalt ütleb, et lisa disaini ükshaaval (ära jälgi, mis on elemendi emaelemendid).

Ja kui sõnade loogikat lisada, siis näeme, et see pole loogiline.

Kas <table> (tabel) võib olla vanaemaelemendiks <td> (tabeli lahtrile)? Jah, ja suure tõenäosusega ongi. Aga kas <td> (tabeli lahtri) emaelemendiks võib <th> (tabeli (pealkirja) lahter)? Mina arvaks, et ei.

CSS ongi sellest oma nime saanud. Cascading ehk Cascade on eesti keeles tulvana langema, joana alla tulema. Nii tulevadki elemendid nagu emaelemendist allapoole (kui komasid vahel pole).

CSSi omadused

{} – siia vahele jäävad stiilid, mida ma tahan, et valitud elemendid saaksid. CSSis kannavad need stiilid nime property, mis eesti keeles tähendab omadust.

Ma ütlen lihtsalt ära mida siin omadused teevad, erilisi detaili ei lisa.

border: 1px solid black; – lisab ääre, mis on 1 piksel paks, pideva joonega ja must

padding: 10px; – lisab vahe elemendi sisu ja elemendi ääre vahel 10px

width: 100%; – muudab tabeli täielikult ekraani laisueks (olenemata ekraani suurusest). Kui natukene täpsem olla, siis muudab (<table>) laiuse emaelemendi (<body>) laiusega võrdseks.

border-collapse: collapse; – sunnib ääri kokku minema

Ilma border-collapse omaduseta tabel

Pole ka just kõige hullem

 

Rohkem CSSist täna rääkida ei tahaks, aga kui soovid et sinu tabelitel oleks ka ääred nagu minu omadel ning tabel oleks 100% laiusega, siis võid vabalt kopeerida selle HTMLi koodi siin ja lisada (kleepida) see enda veebilehte (veebilehe lähtekoodi). Kleebi see enne <body> elementi.

<style>
  table, tr, th, td{
    border: 1px solid black;
    padding: 10px;
  }

  table{
    border-collapse: collapse;
    width: 100%;
  }
</style>

See siin on HTMLi kood, selle võid lihtsalt lisada oma veebilehe lähtekoodi ehk HTMLi sisestada enne <body> elementi.

 

Tänane koduülesanne (sa vist tead juba seda): lisa nii vähemalt üks lihtne kui ka keeruline tabel oma veebilehte.

Proovi seda teha peast, aga palun ära tuubi elemente pähe. Läbi harjutamise need jäävad ise meelde. Mida rohkem harjutad, seda kergemini need ka meelde jäävad.

 

 

Ja ongi tabelitega kõik. Üsna pikk sai, aga tööd on ka siin kahe päeva jagu sees.

Kui küsimusi tekkis, siis anna nendest kommentaarides julgelt teada 🙂 !

Järgmine osa: HTMLi kursus #5 – Sektsioonielemendid

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *