HTML Veba III Debljina ivica tabele i elija
HTML Vežba III
Debljina ivica tabele i ćelija q Ivica (eng. border) – vidljiva linija koja okružuje svaku ćeliju i samu tabelu q Ivice tabele i ćelija su povezane q Ako se postavi debljina ivica tabele na jedan ili više piksela, čitač Weba će dodati ivice i svim ostalim ćelijama tabele q Ako se postavi debljina ivica tabele na nula piksela, čitač Weba neće nacrtati ni ivice tabele ni pojedinačnih ćelija 2
Debljina ivica tabele i ćelija 3
Primer 22. <html> <head> <title> Zaglavlje u redu </title> </head> <body> <table border=“ 10”> <caption> Zaglavlje u redu </caption> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td>1. vrsta, Proizvod 1</td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td>2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table> </body> </html> Snimite dokument pod nazivom Primer 22. html na D disk (D: Grupa IIHTML 1Primer 22. html) 4
Boje ivica tabele i ćelija q <table bordercolor=“ 00008 b”> q Internet Explorer označiće ivice istom bojom – tamno plavom 5
Boje ivica tabele i ćelija q Ukoliko se izostavi atribut bordercolor iz oznake <table> čitač će koristiti podrazumevanu kombinaciju svetlo/tamnosiva boja ivica q Internet Explorer ignorisaće parametar bordercolor ako se upotrebe atributi bordercolordark i bordercolorlight q <table border="1" bordercolorlight="#FF 3300" bordercolordark="#330099"> 6
Boje ivica tabele i ćelija <html> <head><title> Tamne i svetle ivice </title></head> <body> <table border="1" bordercolorlight="#FF 3300" bordercolordark="#330099"> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td>1. vrsta, Proizvod 1</td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td>2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table> </body> </html> 7
Boje ivica tabele q Za postavljanje različitih boja svake ivice tabele može se koristiti atribut style q <table border="10" style="border-topcolor: #ff 0099; border-left-color: #6600 cc; border -right-color: #ccff 77; border-bottomcolor: #00 ccff"> q Da bi se sve četiri ivice obojile istom bojom: q <table border="10" style="border-color: #ff 0099”> 8
Boje ivica ćelija q Za postavljanje različitih boja svake ivice ćelije može se koristiti atribut style q <td border="10" style="border-topcolor: #ff 0099; border-left-color: #6600 cc; border-right-color: #ccff 77; border-bottomcolor: #00 ccff"> q Da bi se sve četiri ivice obojile istom bojom: q <td border="10" style="border-color: #ff 0099”> 9
Primer 23. <html> <head><title> Boje ivica tabele i ćelija </title></head> <body> <table border="10" style="border-top-color: #ff 0099; border-leftcolor: #6600 cc; border-right-color: #ccff 77; border-bottomcolor: #00 ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; border-bottomcolor: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer 23. html na D disk (D: Grupa IIHTML 1Primer 23. html) 10
Boje u pozadini tabele q Tabela i ćelije imaju pozadinu – mogu se zasebno podešavati q Podešavanjem atributa bgcolor u oznaci <table> može se zadati boja pozadine tabele: q <table border=“ 10” bgcolor=”#FFCCFF“> q Podešavanje atributa style na heksadecimalnu vrednost u oznaci <table> govori čitaču da oboji pozadinu tabele: q <table border=“ 10” style="backgroundcolor: #FFCCFF“> 11
Primer 24. <html> <head><title> Boja pozadine </title></head> <body> <table border="10" style="background-color: #FFCCFF“> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <td>1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <td>2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer 24. html na D disk (D: Grupa IIHTML 1Primer 24. html) 12
Slike u pozadini tabele q Podešavanjem atributa background u oznaci <table>, čitač Weba će koristiti datoteku slike q <table border=“ 10” background=“C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg"> q Podešavanje atributa style u oznaci <table> govori čitaču da prekrije pozadinu tabele slikom iz datoteke q <table border=“ 10” style="backgroundimage: url (C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg)"> 13
Primer 25. <html> <head><title> Slika u pozadini </title></head> <body> <table border="10" style="backgroundimage: url(C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg)"> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td>1. vrsta, Proizvod 1</td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td>2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 25. html na D disk (D: Grupa IIHTML 1Primer 25. html) 14
Boje u pozadini ćelije q Svaka ćelija ima pozadinu, boja te pozadine zadaje se kao atribut u oznaci ćelije <td> q Boja pozadine ćelije je nezavisna od boje u pozadini tabele q <td bgcolor=“#FFCCFF“> q <td style="background-color: #FFCCFF“> 15
Slike u pozadini ćelije q Slika u pozadini ćelije zadaje se kao atribut u oznaci ćelije <td> q Slika pozadine ćelije je nezavisna od slike u pozadini tabele q <td background=“C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg)"> q <td style="background-image: url (C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg)"> 16
Primer 26. <html> <head><title> Boje i slike u pozadini ćelije </title></head> <body> <table border="10" background="C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies. jpg"> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="background-color: #CCFFFF">1. vrsta, Proizvod 1</td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td>2. vrsta, Proizvod 1</td> <td style="background-image: url(C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset. jpg)"> 2. vrsta, Proizvod 2</td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 26. html na D disk (D: Grupa IIHTML 1Primer 26. html) 17
Razmak između ivice i sadržaja ćelije i razmak između dve ćelije q Razmak između ivice i sadržaja ćelije (eng. padding) je prazan prostor oko sadržaja ćelije i označava se pikselima q Razmak između ćelija (eng. spacing) je prazan prostor između dve ćelije i između ćelija i tabele 18
Razmak između ivice i sadržaja ćelije i razmak između dve ćelije Svetla ivica tabele Razmak između ćelija Tamna ivica ćelije Sadržaj ćelije Svetla ivica ćelije Tamna ivica tabele Okvir sadržaja Razmak između sadržaja i ivice ćelije Ivica ćelije 19
Razmak između ivice i sadržaja ćelije i razmak između dve ćelije q Atributi cellpadding i cellspacing utiču na celokupan izgled tabele – smešteni su u oznaku <table> q Podrazumevana vrednost oba atributa veća je od nule, q ako su oba izostavljena iz oznake <table> podrazumevana vrednost je u Exploreru Cellspacing – dva piksela v Cellpadding – jedan piksel v q <table border=“ 3” cellspacing=“ 10”> q <table border=“ 3” cellpadding=“ 10”> 20
Primer 27. <html> <head><title> Cellspacing </title></head> <body> <table border=“ 3" cellspacing="10" style="border-topcolor: #ff 0099; border-left-color: #6600 cc; border-rightcolor: #ccff 77; border-bottom-color: #00 ccff"> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1</td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; borderbottom-color: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer 27. html na D disk (D: Grupa IIHTML 1Primer 27. html) 21
Primer 28. <html> <head><title> Cellspacing i cellpadding </title></head> <body> <table border=“ 3" cellspacing="10" cellpadding="10" style="border-top-color: #ff 0099; border-left-color: #6600 cc; border-right-color: #ccff 77; border-bottom-color: #00 ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; borderbottom-color: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer 28. html na D disk (D: Grupa IIHTML 1Primer 28. html) 22
Podešavanje dimenzija tabele q Dimenzije tabele mogu se zadati: Relativno (procentualno) ili v Apsolutno (brojem piksela) v q <table width=“ 100%” height=“ 100%”> q <table width=“ 764” height=“ 558”> 23
Primer 29. <html> <head><title> Relativne vrednosti dimenzija </title></head> <body> <table width=“ 100%” height=“ 100%” border=“ 3" cellspacing="10" style="border-top-color: #ff 0099; border-left-color: #6600 cc; border-right-color: #ccff 77; border-bottom-color: #00 ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; border-bottomcolor: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer 29. html na D disk (D: Grupa IIHTML 1Primer 29. html) 24
Primer 30. <html> <head><title> Apsolutne vrednosti dimenzija </title></head> <body> <table width=“ 100” height=“ 100” border=“ 3" cellspacing="10" style="border-top-color: #ff 0099; border-left-color: #6600 cc; border-right-color: #ccff 77; border-bottom-color: #00 ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; border-bottomcolor: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer 30. html na D disk (D: Grupa IIHTML 1Primer 30. html) 25
Primer 31. <html> <head><title> Apsolutne vrednosti dimenzija </title></head> <body> <table width=“ 764” height=“ 558” border=“ 3" cellspacing="10" style="border-top-color: #ff 0099; border-left-color: #6600 cc; border-right-color: #ccff 77; border-bottom-color: #00 ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color: #0000 ff">1. vrsta, Proizvod 1 </td> <td>1. vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color: #0000 ff; border-leftcolor: #FF 3300; border-right-color: #33 CC 00; border-bottomcolor: #330099">2. vrsta, Proizvod 1</td> <td>2. vrsta, Proizvod 2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer 31. html na D disk (D: Grupa IIHTML 1Primer 31. html) 26
Podešavanje dimenzija ćelija q Osim zadavanja vrednosti atributa height i width u oznaci <table>, tabelu odgovarajuće visine i širine možete dobiti i zadavanjem dimenzija ćelija q Dimenzije tabele treba da se poklapaju sa zbirnim dimenzijama ćelija q Dimenzije ćelija mogu se zadati u pikselima ili procentualno u odnosu na tabelu 27
Primer 32. <html> <head><title> Dimenzije ćelija </title></head> <body> <table width=“ 100%” border=“ 1“> <tr><th width=“ 33%”> Naslov 1 </th> <th width=“ 33%”> Naslov 2 </th> <th width=“ 33%”> Naslov 3 </th></tr> <tr><td width=“ 33%”> Kolona 1 </td> <td width=“ 33%”> Kolona 2 </td> <td width=“ 33%”> Kolona 3 </td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 32. html na D disk (D: Grupa IIHTML 1Primer 32. html) 28
Primer 33. <html> <head><title> Dimenzije ćelija </title></head> <body> <table width=“ 600” border=“ 1“> <tr><th width=“ 200”> Naslov 1 </th> <th width=“ 200”> Naslov 2 </th> <th width=“ 200”> Naslov 3 </th></tr> <tr><td width=“ 200”> Kolona 1 </td> <td width=“ 200”> Kolona 2 </td> <td width=“ 200”> Kolona 3 </td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 33. html na D disk (D: Grupa IIHTML 1Primer 33. html) 29
Horizontalno poravnanje sadržaja ćelija q Podrazumevano horizontalno poravnanje sadržaja je uz levu ivicu ćelije q Da bi se promenilo podrazumevano horizontalno poravnanje sadržaja ćelije koristi se atribut align u oznaci ćelije <td> q Atribut align ima tri moguće vrednosti: left v right v center v 30
Primer 34. <html> <head><title> Horizontalno poravnanje </title></head> <body> <table border=“ 1“ width=“ 100%” height=“ 100%”> <tr><th width=“ 33%”> Centralno poravnanje </th> <th width=“ 33%”> Levo poravnanje </th> <th width=“ 33%”> Desno poravnanje </th></tr> <tr><td width=“ 33%” align=“center”> Centralno </td> <td width=“ 33%” align=“left”> Levo </td> <td width=“ 33%” align=“right”> Desno </td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 34. html na D disk (D: Grupa IIHTML 1Primer 34. html) 31
Vertikalno poravnanje sadržaja ćelija q Kada je ćelija viša od svog sadržaja, čitač će sadržaj podrazumevano centrirati vertikalno između vrha i dna ćelije q Za promenu podrazumevanog poravnanja, koristi se atribut valign, koji ima tri mogućnosti: v top – sadržaj počinje od gornje ivice ćelije v middle – centrira sadržaj vertikalno između vrha i dna ćelije v bottom – prikazuje sadržaj tako da se završava uz donju ivicu ćelije 32
Primer 35. <html> <head><title> Vertikalno poravnanje </title></head> <body> <table border=“ 1“ width=“ 100%” height=“ 100%”> <tr><th width=“ 33%”> Gornje vertikalno poravnanje </th> <th width=“ 33%”> Srednje vertikalno poravnanje </th> <th width=“ 33%”> Donje vertikalno poravnanje </th></tr> <tr><td width=“ 33%” valign=“top”> Gornje </td> <td width=“ 33%” valign=“middle”> Srednje </td> <td width=“ 33%” valign=“bottom”> Donje </td></tr> </table> </body></html> Snimite dokument pod nazivom Primer 35. html na D disk (D: Grupa IIHTML 1Primer 35. html) 33
Poravnanje tabele na stranici q Čitač Weba će podrazumevano tabelu poravnati uz levu ivicu Web stranice q Različito poravnanje tabele može se definisati upotrebom atributa align u oznaci <table> <table align=“left”> v <table align=“right”> v <table align=“center”> v q Definicija tabele može se staviti između početne u završne oznake <div></div> u kojoj se atributom align definiše različito poravnanje tabele <div align=“left”> v <div align=“right”> v <div align=“center”> v 34
Primer 36. <html> <head><title> Vertikalno poravnanje </title></head> <body> <div align=“right”> <table border=“ 1“ width=“ 50%” height=“ 50%”> <tr><th width=“ 33%”> Gornje vertikalno poravnanje </th> <th width=“ 33%”> Srednje vertikalno poravnanje </th> <th width=“ 33%”> Donje vertikalno poravnanje </th></tr> <tr><td width=“ 33%” valign=“top”> Gornje </td> <td width=“ 33%” valign=“middle”> Srednje </td> <td width=“ 33%” valign=“bottom”> Donje </td></tr> </table> </div> </body></html> Snimite dokument pod nazivom Primer 36. html na D disk (D: Grupa IIHTML 1Primer 36. html) 35
Dodavanje slika i veza ćelijama tabele q Svakom ćelijom u tabeli može se zasebno upravljati i u nju se može smeštati tekst, slike ili kombinovati i jedno i drugo q Moguće je koristiti tabelu za prikaz umanjenih slika, koje su raspoređene u tabeli – tako da se klikom na sliku učita stranica koja sadrži sliku u punoj veličini 36
Primer 37. <html> <head><title> Umanjene slike </title></head> <body> <div align=“center”> <table> <tr> <td> <a href="D: Grupa. IIHTML 1Primer 7. html"> <img width="164" height="110“ src="C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset. jpg"> </a> </td> <a href="D: Grupa IIHTML 1Primer 7. html"> <img width="114" height="110"src="C: /Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Winter. jpg"> </a> </td></tr> </table></div> </body></html> 37
HTML Vežba III
- Slides: 38
