Tabele imajo pomembno vlogo, ko gre za predstavitev podatkov v organizirani obliki. V tem tutorialu boste izvedeli, kako ustvariti osnovne HTML tabele in uporabiti ključne oznake za razporeditev in strukturo.
Navodila po korakih
Začnimo z ustvarjanjem vaše prve tabele! Najprej morate vedeti, da je osnovna oznaka za tabelo. Ta oznaka obsega celotno tabelo.
Zdaj dodamo vrstico. Vsaka vrstica je definirana z oznako, kar pomeni "vrstica tabele". V tej vrstici še ni podatkov, zato ostane zaenkrat prazna. Lahko si predstavljate, da vsaka vrstica nudi prostor za več stolpcev.
Zdaj je čas, da v tabelo dodamo nekaj podatkov. Za to uporabimo oznako in dodamo ustrezne vrednosti. Recimo, da je prvo ime "Jan", e-pošta "support@programmierenlern.info" in rojstni datum 23.06.1982. Vaša vrstica bi morala potem izgledati takole:
Prepričajte se, da tabela zdaj izgleda bolje. Lahko dodate poljubno število vrstic, tako da preprosto uporabite več oznak in oznak. Dodajmo še enega zaposlenega. Ime mu dajmo "Joe Average" in njegova e-pošta bi lahko bila "joe@average.com".
Ko zdaj ponovno naložimo tabelo, opazimo, da raste in da so vsi vneseni podatki vidni. Struktura je pri tem pomembna, saj vam omogoča jasen pregled nad informacijami.
Kaj pa, če želite na koncu tabele dodati nogo, na primer za avtorske pravice? Tukaj pride v igro colspan. S colspan lahko določite, koliko stolpcev naj pokriva celica. Da boste torej postavili avtorske pravice čez vse tri stolpce, napišete: Copyright 2015 coding-geeks.de.
Po dodajanju te noge bi morali preveriti prikaz. Ideja je, da se noga pozicionira pod stolpci in podatki so pregledno prikazani. V tem primeru noga nima svojega stolpca in bi morala zato ležati nad drugimi tremi stolpci.
Če zdaj zmanjšate colspan na vrednost dva, bi lahko dodali tudi drugo opombo. Recimo, da želite "Coding Geeks" prikazati v novem stolpcu. Uporabite ponovno oznako, pri čemer pravilno uporabite colspan.
Če ste sledili vsem tem korakom, ste se naučili, kako ustvariti osnovne HTML tabele. Vendar pa bi morala biti vizualna zasnova vedno izvedena s CSS, da bi izboljšali postavitev in uporabniško izkušnjo. To vključuje ločeno zasnovo vsebine in postavitve, da boste kasneje imeli večjo fleksibilnost pri oblikovanju vaših spletnih strani.
Zaključek - Osnove ustvarjanja HTML tabel
Spoznali ste strukturo in uporabo HTML tabel, od gradnje do postavitve podatkov in noge. Sedaj lahko enostavne tabelarične podatke prikažete na svoji spletni strani.
Pogosta vprašanja
Kaj so osnovne oznake za HTML tabele?Osnovne oznake so,, za glave in za podatkovne celice.
Ali lahko ustvarim neomejeno število vrstic in stolpcev v tabeli?Da, teoretično lahko dodate veliko vrstic in stolpcev, vendar je pomembno ohraniti berljivost.
Kako naj stilistično oblikujem tabele?Uporabite CSS za oblikovanje, namesto neposrednih HTML atributov, kot je border.
Za kaj se uporablja colspan?Atribut colspan omogoča celici, da se razteza čez več stolpcev.
Zakaj je CSS bolj primeren za postavitev kot HTML atributi?CSS loči vsebino od njenega oblikovanja in nudi večjo fleksibilnost ter možnosti za oblikovanje.
