1 / 27

TABELE

TABELE. Def. Tabela je i u HTML-u dvodimenzionalna matrica čiji se elementi nazivaju ćelije (engl. cell ).

Download Presentation

TABELE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related