TABELE

1. TABELE

2. Def • Tabela je i u HTML-u dvodimenzionalna matrica čiji se elementi nazivaju ćelije (engl. cell). • Ćelija može sadržati raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike,itd. Tabela se sastavlja tako što se opisuju redom njene vrste (redovi, engl. row) i sadržajsvake ćelije u redu.

3. <table> • Tabela se opisuje uz pomoć složenog taga <TABLE> koji može sadržavati više atributa: • BORDER koji opisuje širinu spoljašnjeg okvira tabele; • CELLSPACING koji opisuje širinu linije koja razdvaja dve ćelije; • CELLPADDING koji opisuje prostor oko sadržaja ćelije; • WIDTH koji opisuje ukupnu širinu tabele.

4. <caption> • Nadnaslov tabele se može zadati tagom CAPTION koja se ispisuje iznad tabele i može imatiatribut ALIGN: • za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM • za horizontalno poravnavanje: LEFT, CENTER, RIGHT

5. <tr> • Svaki red u tabeli se opisuje između tagova <TR> i </TR> (engl. table row). I tag TR možeimati atribute: • za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: LEFT, CENTER,RIGHT • za vertikalno poravnavanje, atribut VALIGN sa vrednostima: TOP, MIDDLE,BOTTOM

6. <td> • Pojedinačna ćelija se opisuje između tagova <TD> i </TD>. Tag TD, pored atributa ALIGN iVALIGN, može imati i atribute: • za horizontalno spajanje ćelija: ROWSPAN (spaja ćelije iste vrste) i • za vertikalno spajanje ćelija: COLSPAN (spaja ćelije iste kolone) .

7. Razlika izmedju <td> I <th> • Tag <TH> ima ista svojstva kao tag <TD> s tom razlikom što obezbeđuje da sadržaj ćelijebude automatski centriran i boldovan.

8. Neophodan uslov • Tabela ne mora da sadrži <TH> tag, ali mora da sadrži bar jedan <TD> tag, u koji se smeštasadržaj tabele.

9. Opšta struktura tabele <TABLE> <!-- pocetak definicije tabele --> <CAPTION> sadrzaj naslova tabele </CAPTION> <!-- definicija naslova--> <TR> <!-- start definicije headera --> <TH> sadržaj prve ćelija headera </TH> <TH> sadržaj poslednje ćelije headera </TH>

10. </TR> <!-- kraj definicije headera --> <TR> <!-- start prvog reda --> <TD> sadržaj prve ćelije prvog reda </TD> <TD> sadržaj poslednje ćelije prvog reda </TD> </TR> <!-- kraj prvog reda --> <TR> <!-- start poslednjeg reda --> <TD> sadržaj prve ćelije poslednjeg reda </TD> <TD> sadržaj poslednje ćelije poslednjeg reda </TD> </TR> <!-- kraj poslednjeg reda --> </TABLE> <!-- kraj definicije tabele-->

11. Ivice tabele • Ako se u kodu tabele ne navede određeni atribut tabele nemaju graničnu liniju, border. Da bise dodelila tabeli granična linija odgovarajuće debljine, u <table> tag se stavlja atribut border,a vrednost debljine linije se zadaje u pikselima.

12. Primer • <table border="2"> • <tr> • <th> Ime:</th> • <th>Prezime:</th> • <th>Zvanje:</th> • </tr> • <tr> • <td>Betsy</td> • <td>Bruce</td> • <td><Predavac</td> • </tr> • </table>

13. Odredjivanje dimenzijaćelija i tabele • Širina kolona je određena prvom ćelijom u svakoj koloni. • Da bi tabela imala odgovarajuće dimenzije koriste se atributi height i width. Vrednost ovihatributa se kao i kod <img> taga može zadati ili u pikselima ili u procentima veličine prozoraHTML browsera. • <table border="2" height="30%“width="80%">

14. Podešavanje dimenzija ćelija • Da bi kolone bile jednake širine trebalo bi da u odgovarajuće <th> ili <td> tagove ubaciti atribute width sa željenom širinom. • <table border="2" width="100%"> • <tr> • <th width="33%"> Ime </th> • <th width="33%"> Prezime </th> • <th width="33%"> Zvanje </th> • </tr>

15. cellpadding • Dva atributa koja imaju veliku primenu su cellpadding i cellspacing. • Pomoću cellpaddingatributa definiše se rastojanje između sadržaja ćelije i njene granične linije. Vrednost ovogatributa se zadaje u pikselima, ako se ne navede nijedna vrednost podrazumeva se da 1.

16. cellspacing • Pomoću cellspacing atributa se može odrediti rastojanje između pojedinih ćelija tabele, tj.debljina linije između ćelija. Vrednost ovog atributa se zadaje, takođe, u pikselima ako se nenavede nijedna vrednost podrazumeva se da 1.

17. Primer • <table border="2" cellpadding="30" cellspacing="10">

18. Colspan i rowspan • HTML dopušta mogučnost da se pojedine ćelije tabele protežu duž više redova ili kolonatabele. Ovakav efekat se može postići pomoću atributa colspan i rowspan, koji se ubacuju u<td> ili <th> tag one ćelije koja se želi posebno da formatira. Vrednost ovih atributa se zadajebrojem kolona ili redova tabele duž kojih treba da se prostire data ćelija.

19. Primer <table border="2" width="100%"> <tr> <th rowspan="2" colspan="2"><img src="space.gif"></th> <th colspan="5"> Dani u nedelji :</th> </tr> <tr> <th width="20%">ponedeljak</th> <th width="20%">utorak</th> <th width="20%">sreda</th> <th width="20%">cetvrtak</th> <th width="20%">petak</th> </tr>

20. <tr> <th rowspan="5">c<p>a<p>s<p>o<p>v<p>i</th> <th>1.</th> <td>srpski</td> <td>istorija</td> <td>fizicko</td> <td>hemija</td> <td>srpski</td> </tr> <tr> <th>2.</th> <td>matematika</td> <td>srpski</td> <td>fizicko</td> <td>hemija</td> <td>srpski</td> </tr>

21. <tr> <th>3.</th> <td>fizicko</td> <td>matematika</td> <td>istorija</td> <td>biologija</td> <td>engleski</td> </tr> <tr> <th>4.</th> <td>fizicko</td> <td>matematika</td> <td>fizika</td> <td>informatika</td> <td>engleski</td> </tr>

22. <tr> <th>5.</th> <td>fizika</td> <td>razredni</td> <td>geografija</td> <td>informatika</td> <td>matematika</td> </tr> </table>

23. Space.gif • U prvu ćeliju tabele je postavljena slika tipa gif pod nazivom space.gif. Ovo je neophodnostoga što svaka ćelija tabele mora imati neki sadržaj, inace je browser neće prikazati.

24. Boje u tabeli • HTML dozvoljava da cela tabela kao i svaka ćelija posebno može da ima različitu bojutagove: <table>, <td> ili <th>. Vrednost se zadaje heksadecimalnim kodom boje ili njenimimenom, isto kao i kod boje pozadine stranice u <body> tagu.

25. Prednost • atribut bgcolor koji je zadat u <th> ili <td> taguće se prikazati umesto one boje koja se nalazi u <table> tagu.

26. Boja okvira • Takođe boja okvira tabele se može promeniti pomoću bordercolor atributa u <table> tagu.

27. Zadatak