Tabelid mängivad olulist rolli, kui on vaja andmeid korraldatud vormis esitada. Selles õpetuses õpid, kuidas luua põhitasemel HTML tabeleid ja kasutada olulisi silte nende paigutuseks ja struktuuriks.
Samm-sammult juhend
Alustame sinu esimese tabeli loomisega! Esiteks pead teadma, et tabeli põhielement on. See element katab kogu tabeli.
Nüüd lisame ühe rea. Iga rida määratletakse sildiga, mis tähendab "tabeli rida". Selles reas pole hetkel andmeid, seega jääb see esialgu tühjaks. Sa võid ette kujutada, et iga rida võib mahutada mitu veergu.
Nüüd on aeg lisada tabelisse mõned andmed. Selleks kasutame silt ja lisame vastavad väärtused. Oletame, et esimene nimi on "Jan", e-post "support@programmierenlern.info" ja sünnipäev on 23.06.1982. Sinu rida peaks siis välja nägema järgmiselt:
Veendu, et tabel näeb nüüd paremini välja. Sa saad lisada nii palju ridu kui soovid, kasutades lihtsalt rohkem ja -silte. Lisame veel ühe töötaja. Nimeks võiks olla "Joe Average" ning tema e-post võiks olla "joe@average.com".
Kui me nüüd tabelit uuesti laadime, näeme, et see kasvab ja kõik sisestatud andmed on nähtavad. Struktuur on oluline, kuna see annab selge ülevaate teabest.
Mis juhtub, kui soovid tabeli lõppu lisada jaluse, näiteks autoriõiguse jaoks? Siin tuleb mängu colspan. Colspan'i abil saad määrata, kui palju veerge rakk peaks katma. Kui soovid seega autoriõigust kõigi kolme vea üle seada, kirjuta: Autoriõigus 2015 coding-geeks.de.
Pärast selle jaluse lisamist peaksid kontrollima, kuidas see välja näeb. Idee on see, et jalus on paigutatud veergude alla ja andmed on selgelt esitatud. Selles juhul ei ole jalusel oma veergu ja see peaks seega olema kõigi teiste kolme veeru kohal.
Kui vähendad nüüd colspan'i väärtust kahele, võiksid ka teise vihje lisada. Oletame, et soovid "Coding Geeks" esitada uues veerus. Selleks kasuta uuesti silti, rakendades colspan'i õigesti.
Kui oled neid samme järginud, siis oled õppinud, kuidas luua põhitasemel HTML-tabeleid. Visuaalne kujundamine peaks aga alati toimuma CSS-i abil, et parandada paigutust ja kasutajasõbralikkust. See hõlmab sisu ja paigutuse eraldi kujundamist, nii et sul on hiljem rohkem paindlikkust oma veebilehtede disainimisel.
Kokkuvõte - HTML-tabelite loomise alused
Oled teadlik HTML-tabelite struktuurist ja kasutamisest, alates ehitusest andmete paigutamiseni ja jaluseni. Nüüd saad lihtsate tabeliliste andmete esitada oma veebilehel.
Tihti Küsitud Küsimused
Millised on HTML-tabelite põhielemendid?Põhielemendid on,, pealkirjade jaoks ja andmerakkude jaoks.
Kas ma saan tabelisse piiramatult ridu ja veerge lisada?Jah, teoreetiliselt saad lisada palju ridu ja veerge, kuid on oluline silmas pidada loetavust.
Kuidas peaksin tabeleid stiilselt kujundama?Kasutage kujundamiseks CSS-i, mitte otseseid HTML-atribuutide nagu border.
Mis on colspan?Colspan atribuut võimaldab rakul ulatuda mitme veeru peale.
Miks on CSS paigutuseks parem kui HTML-atribuutide kasutamine?CSS eraldab sisu selle kujundamisest ja pakub seega rohkem paindlikkust ja võimalusi disainimiseks.
