Tablice

Znate čemu tablice inače služe? Super. Pa ovo je tutorial kako ih sastaviti.
Inače, ne preporuča se da se tablice koriste u izradi layouta, ali ako ste početnik neće vam nitko zamjeriti :)

Svaka tablica ima redove i stupce. Naša HTML tablica ima sukladno tome, nekoliko elemenata, zato je malo kompleksnija za kodiranje ako koristite više redova i stupaca, posebno ako se neki od njih rastežu preko nekoliko redova/stupaca i slično.
Osnovni elementi tablice su < table > , < tr > , < th > i < td >.
Evo kako počinjemo kreirati tablicu tagom table:

Ovaj tag označava početak i završetak tablice. Sve što napišemo unutra bit će shvaćeno kao tablični podaci, i zato moramo paziti kako ih pišemo.
Tablica je u HTML-u podijeljena na redove. Ovako to izgleda ako nadopunimo gornji primjer tagovima tr (table row):

Mislim da ovaj kod nije potrebno previše objašnjavati, očito je da sadrži tri retka.
A sada ćemo dodati ćelije na najjednostavniji mogući način tako da svaki redak ima jednak broj stupaca. Učinit ćemo to pomoću tag-a td (table data)

Da bi lakše razumjeli, postavila sam tablične vrijednosti da odgovaraju stupcu i retku u kojem se nalaze - stupce sam označila brojevima, a retke slovima.
E sada, to se može još bolje srediti tako da dodamo zaglavlja stupcima, pomoću tag-a th (table header). Dodati ćemo još jedan redak iznad postojećih i u njega smjestiti zaglavlja.

To je ono što će većini vas biti dovoljno. No, moguće je i svakom retku dodati zaglavlje tako da dodamo u sve retke po još jednu ćeliju th:

Eto, naša tablica je gotova. Ima ukupno 4 retka i 4 stupca, od kojih 3 retka i 3 stupca sadrže podatke.
Sad je samo treba urediti pomoću CSS-a :) Ja sam se odlučila za ovakvo oblikovanje. Vi se naravno možete igrati sa pojedinim vrijednostima i dobiti drugačiji rezultat :)

Primjer koji sam napravila u ovom tutorialu izgleda ovako: