Tehnička škola Požega

Nakon savladavanja html oznaka i osnova rada u nekom programu za izradu stranica trebalo bi se malo više pozabaviti tablicama. Zašto?
Zato što tablice u HTMLu ne služe samo za prikaz nekih tabličnih podataka, već se koriste i za zadavanje izgleda same stranice. Bez tablica ne bismo mogli napraviti složene stranice sa izbornicima u stupcima, galerije slika, poravnate i uredne obrasce...

Tagovi koji čine tablicu

Za tablicu su vam dovoljna tri taga:

<table> započinje i završava tablicu

<tr> započinje i završava red u tablici

<td> započinje i završava polje u nekom redu tablice

Svi ti tagovi su parni i morate ih završiti sa </table>, </tr> ili </td> .

Jednostavna tablica 2×2 bi dakle izgledala ovako:

Primjetite da se za pojedino polje ne specificira red i stupac u kojemu se nalazi. Trebate paziti da u svakom redu bude jednako polja jer su inače rezultati prilično nepredvidivi.

Dodatni argumenti

Tablica kao u prethodnom primjeru se rijetko kad zadaje, obično trebamo zadati i neke dodatne arhumente. Evo ih redom:

width

To je naravno širina. Može se zadati za tablicu (unutar taga <table>)ili za pojedino polje u tablici (unutar taga <td>). Ako zadate širinu nekog polja u tablici, cijeli stupac u kojemu se nalazi to polje imat će zadanu širinu.

Širina se zadaje argumentom width, evo i primjera:

U primjeru su vidljiva i dva osnovna načina zadavanja širine: ona se može zadati u postocima (od ukupne širine stranice - prozora), ili u pikselima.
Prvi se način koristi kad se tablicama želi napraviti stranica čiji sadržaj se prilagođava širini ekrana, dok drugi zadaje fiksnu širinu tablice ili stupca.

Height

Označava visinu retka ili cijele tablice (zavisno na koji tag ga primjenite. Za tablice kojima raspoređujemo elemente na stranici TREBA IZBJEGAVATI ZADAVANJE VISINE.
Zadaje se na isti način kao i width.

Boja pozadine

Boja pozadine može se zadati za cijelu tablicu ili za pojedina polja tablice. Zadaje se argumentom bgcolor u tagovima <table> ili <td>. Naravno, zadaje se kao heksadecimalni broj.

Kad zadate boju pozadine tablice, tad cijela tablica ima tu pozadinsku boju, sve što je unutar vanjskih rubova tablice.

Pojasnit ćemo na primjeru:

Takav kod daje ovu tablicu:

Ipak, treba napomenuti da ovakav način oblikovanja tablice treba izbjegavati. Sve ovo može se napraviti pomoću CSS-a i to bi bio bolji način oblikovanja tablice.

Cellpadding, cellspacing, border...

Ovi argumenti zadaju se samo za tablicu, ne mogu se zadati za redove ili polja.
Cellpadding znači odmak sadržaja od ruba polja u kojem se taj sadržaj nalazi.
Sellspacing je razmak između pojedinh polja tablice.
Border je debljina vanjske linije tablice.

Na slici lijevo cellpadding označen je zelenom linijom, a cellspacing crvenom linijom.
Ukoliko tablice koristimo da bismo rasporedili sadržaj na stranici, najčešće za sva tri ova argumenta zadajemo 0. Tablice je daleko lakše i prakričnije stilizirati CSSom nego HTMLom, pa ćemo tako i raditi.

Spajanje polja

Ponekad ćete poželjeti spojiti pojedina polja i od njih napraviti jedno. To može word i excel, no može li se to u HTMLu?

Odgovor je može, no nije svejedno spajate li polja u istom retku ili stupcu.

Ukoliko spajate dva polja u istom retku, novo polje (<td> tag) treba imati argument rowspan s vrijednošću 2. To znači da se to polje proteže preko dva mjesta za polje u istom retku. Spajate li polja u stupcu, treba vam argument colspan. Najbolje će se sve vidjeti na slijedećem primjeru:

Html kod gornje tablice je:

Iz primjera je jasno vidljivo kako koristiti colspan i rowspan. Primjetite da u jedno polje možete ujediniti i polja iz redova i iz stupaca odjednom (polje u kojem piše 33-44. Tad morate upotrebiti i rowspan i colspan u istom polju.

Tablica u tablici

Naravno, u pojedino polje neke vanjeske tablice možete ubaciti čitavu drugu tablicu. To vodi prema jako kompliciranom kodu koji je teško održavati i treba to izbjegavati, no ponekad može biti korisno.

Design pomoću tablica

Pokušajmo do sad naučeno primijeniti i iskoristiti tablice kako bismo napravili osnovnu strukturu stranice. Pokazat ćemo to na dva primjera. Sadržaja nema puno, tek toliko da uočimo glavne elemente.

Kliknite na demo link te zatim spremite demo stranicu na svoje računalo i otvorite u Dreamweaveru ili drugom programu kojeg koristite. Analizirajte što je i kako napravljeno. Pokušajte i mijenjati veličinu prozora u jednom i u drugom slučaju i pogledajte kako se pri tome ponaša tablica.

Tablica fiksne širine

Primjer je ovdje.

Za design poput ovog (ove stranice), može se iskoristiti tablica fiksne širine:

• U novi dokument ubacimo 3×3 tablicu fiksne širine 760 piksela.
• Kliknemo u gornje lijevo polje i zadamo širinu prvog stupca 200piksela, isto ponovimo za treći stupac.
• spojimo sva polja prvog reda, te spojimo sva polja poslijednjeg reda
• u tablicu upišemo sadržaj
• ukoliko želimo da tablica bude na sredini, tad kliknemo izvan tablice i u Properties panelu zadamoporavnanje na sredinu. To baš i nije najbolji način, ali dovoljno dobar dok ne naučimo CSS.

Tablica prilagodljive širine

Primjer je ovdje.

• U novi dokument ubacimo 3×3 tablicu i ovaj puta za širinu zadamo 100%.
• Kliknemo u gornje lijevo polje i zadamo širinu prvog stupca 200piksela, isto ponovimo za treći stupac.
• Za srednji stupac ne zadamo širinu. Kako je određena širina tablice i okolnih stupaca, on će se prilagoditi ostalim širinama.
• spojimo sva polja prvog reda, te spojimo sva polja poslijednjeg reda
• u tablicu upišemo sadržaj

Ukratko o stiliziranju tablica

Samo ukratko reći ćemo nešto i o oblikovanju tablica - određivanju boja, debljina linija, razmaka itd.

Sve to je daleko bolje napraviti CSSom nego HTMLom, iako smo gore vidjeli da se i to može. Zašto?

• Pri oblikovanju HTMLom imamo manje mogućnosti nego pri radu s CSSom.
  Probajte npr. HTMLom zadati debljinu linije nekog polja u tablici! Ne ide? CSSom se to lako rješava!
• Oblikovanjem CSSom dobijemo znatno manju količinu koda nego s HTMLom, što ujedno znači i jednostavnije održavanje i mijenjanje koda.

Dakle, pravi recept pri radu sa tablicama bi bio da HTMLom zadate samo tablicu (pri zadavanju cellpadding, cellspacing i border zadajte 0), širinu tablice i broj redova i stupaca, te eventualno spojite pojedina polja. Sve oblikovanje se napravi naknadno CSSom.

Da ponovimo:

• Tablice su u HTMLu jedan od alata kojima možemo dizajnirati dokument - rasporediti elemente na stranici.
• Tablica može imati fiksnu širinu (ako je zadamo u pikselima) ili prilagodljivu širinu (ako je zadamo u postocima - obično se zadaje 100%).
• Prilikom zadavanja tablice zadajmo maksimalni broj polja tablice te spojimo polja gdje je to potrebno.
• Prilikom zadavanja tablice najbolje je zadati cellpadding, cellspacing i border kao 0, a tablicu poslije oblikovati CSSom.