1 / 38

Vežba III

Vežba III. Debljina ivica tabele i ćelija. Ivica (eng.border) – vidljiva linija koja okružuje svaku ćeliju i samu tabelu Ivice tabele i ćelija su povezane Ako se postavi debljina ivica tabele na jedan ili više piksela, čitač Weba će dodati ivice i svim ćelijama tabele

kimo
Télécharger la présentation

Vežba III

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. Vežba III

  2. Debljina ivica tabele i ćelija • Ivica (eng.border) – vidljiva linija koja okružuje svaku ćeliju i samu tabelu • Ivice tabele i ćelija su povezane • Ako se postavi debljina ivica tabele na jedan ili više piksela, čitač Weba će dodati ivice i svim ćelijama tabele • Ako se postavi debljina ivica tabele na nula piksela, čitač Weba neće nacrtati ni ivice tabele ni pojedinačnih ćelija

  3. Debljina ivica tabele i ćelija

  4. Primer 37. Modifikujte Primer 33. postavljanjem ivice: border=“10” <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 Primer37.html na D disk (D:\Grupa I\HTML\Primer37.html)

  5. Boje ivica tabele i ćelija • <table bordercolor=“00008b”> • Internet Explorer označiće ivice istom bojom – tamno plavom

  6. Boje ivica tabele i ćelija • Ukoliko se izostavi atribut bordercolor iz oznake <table> čitač će koristiti podrazumevanu kombinaciju svetlo/tamnosiva boja ivica • Internet Explorer ignorisaće parametar bordercolor ako se upotrebe atributi bordercolordark i bordercolorlight • <table border="1" bordercolorlight="#ff3300" bordercolordark="#330099">

  7. Boje ivica tabele i ćelija <html> <head><title>Tamne i svetle ivice</title></head> <body> <table border="1" bordercolorlight="#ff3300" 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>

  8. Boje ivica tabele • Za postavljanje različitih boja svake ivice tabele može se koristiti atribut style • <table border="10" style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> • Da bi se sve četiri ivice obojile istom bojom: • <table border="10" style="border-color:#ff0099”>

  9. Boje ivica ćelija • Za postavljanje različitih boja svake ivice ćelije može se koristiti atribut style • <td border="10" style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> • Da bi se sve četiri ivice obojile istom bojom: • <td border="10" style="border-color:#ff0099”>

  10. Primer 38. Modifikujte Primer 33., zadavanjem boja ivica: <table border="10" style="border-top-color:#ff0099; border-left- color:#6600cc; border-right-color:#ccff77; border-bottom- color:#00ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1 </td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left- color:#FF3300; border-right-color:#33CC00; border-bottom- color:#330099"> 2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr> </table> Snimite dokument pod nazivom Primer38.html na D disk (D:\Grupa I\HTML\Primer38.html)

  11. Boje u pozadini tabele • Tabela i ćelije imaju pozadinu – mogu se zasebno podešavati • Podešavanjem atributa bgcoloru oznaci <table> može se zadati boja pozadine tabele: • <table border=“10” bgcolor=”#ffccff“> • Podešavanje atributa style na heksadecimalnu vrednost u oznaci <table> govori čitaču da oboji pozadinu tabele: • <table border=“10” style="background-color:#ffccff“>

  12. Primer 39. Modifikujte primer 33. postavljanjem pozadine: <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> <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 Primer39.html na D disk (D:\Grupa I\HTML\Primer39.html)

  13. Slike u pozadini tabele • Podešavanjem atributa backgroundu oznaci <table>, čitač Weba će koristiti datoteku slike • <table border=“10” background=“C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg"> • Podešavanje atributa style u oznaci <table> govori čitaču da prekrije pozadinu tabele slikom iz datoteke • <table border=“10” style="background-image:url(C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg)">

  14. Primer 40. <html> <head><title>Slika u pozadini</title></head> <body> <table border="10" background="file:///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 Primer40.html na D disk (D:\Grupa I\HTML\Primer40.html)

  15. Boje u pozadini ćelije • Svaka ćelija ima pozadinu, boja te pozadine zadaje se kao atribut u oznaci ćelije <td> • Boja pozadine ćelije je nezavisna od boje u pozadini tabele • <td bgcolor=“#ffccff“> • <td style="background-color:#ffccff“>

  16. Slike u pozadini ćelije • Slika u pozadini ćelije zadaje se kao atribut u oznaci ćelije <td> • Slika pozadine ćelije je nezavisna od slike u pozadini tabele • <tdbackground=“C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg)"> • <tdstyle="background-image:url(C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg)">

  17. Primer 40a. <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 Primer40a.html na D disk (D:\Grupa I\HTML\Primer40a.html)

  18. Razmak između ivice i sadržaja ćelije i razmak između dve ćelije • Razmak između ivice i sadržaja ćelije (eng.padding) je prazan prostor oko sadržaja ćelije i označava se pikselima • Razmak između ćelija (eng.spacing) je prazan prostor između dve ćelije i između ćelija i tabele

  19. 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

  20. Razmak između ivice i sadržaja ćelije i razmak između dve ćelije • Atributi cellpaddingicellspacing utiču na celokupan izgled tabele – smešteni su u oznaku <table> • Podrazumevana vrednost oba atributa veća je od nule, • ako su oba izostavljena iz oznake <table> podrazumevana vrednost je u Exploreru: • Cellspacing – dva piksela • Cellpadding – jedan piksel • <table border=“3” cellspacing=“10”> • <table border=“3” cellpadding=“10”>

  21. Primer 41. Modifikovati Primer 38.postavljanjem razmaka između ćelija. <html> <head><title> Cellspacing </title></head> <body> <table border=“3" cellspacing="10" style="border-top- color:#ff0099; border-left-color:#6600cc; border-right- color:#ccff77; border-bottom-color:#00ccff"> <tr><th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1</td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left- color:#FF3300; border-right-color:#33CC00; border- bottom-color:#330099">2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer41.html na D disk (D:\Grupa I\HTML\Primer41.html)

  22. Primer 42. Dopunite prethodni Primer sa podešavanjem razmaka između ivice i sadržaja ćelije <html> <head><title> Cellspacing i cellpadding </title></head> <body> <table border=“3" cellspacing="10" cellpadding="10" style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1 </td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left-color:#FF3300; border-right-color:#33CC00; border-bottom-color:#330099">2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer42.html na D disk (D:\Grupa I\HTML\Primer42.html)

  23. Podešavanje dimenzija tabele • Dimenzije tabele mogu se zadati: • Relativno (procentualno) ili • Apsolutno (brojem piksela) • <table width=“100%” height=“100%”> • <table width=“764” height=“558”>

  24. Primer 43. Dopuniti prethodni primer unošenjem dimenzija tabele. <html> <head><title> Relativne vrednosti dimenzija</title></head> <body> <table width=“100%” height=“100%” border=“3" cellspacing="10" style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1 </td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left-color:#FF3300; border-right-color:#33CC00; border-bottom-color:#330099">2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr> </table></body> </html> Snimite dokument pod nazivom Primer43.html na D disk (D:\Grupa I\HTML\Primer43.html)

  25. Primer 44. <html> <head><title> Apsolutne vrednosti dimenzija</title></head> <body> <table width=“100” height=“100” border=“3" cellspacing="10" style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1 </td> <td>1.vrsta,Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left-color:#FF3300; border-right-color:#33CC00; border-bottom-color:#330099">2.vrsta,Proizvod 1</td> <td>2.vrsta,Proizvod2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer44.html na D disk (D:\Grupa I\HTML\Primer44.html)

  26. Primer 44a. <html> <head><title>Apsolutne vrednosti dimenzija </title></head> <body> <tablewidth=“764” height=“558”border=“3"cellspacing="10"style="border-top-color:#ff0099; border-left-color:#6600cc; border-right-color:#ccff77; border-bottom-color:#00ccff"> <tr> <th>Naslov 1</th> <th>Naslov 2</th></tr> <tr><td style="border-color:#0000ff">1.vrsta,Proizvod 1 </td> <td>1.vrsta, Proizvod 2</td></tr> <tr><td style="border-top-color:#0000ff; border-left-color:#FF3300; border-right-color:#33CC00; border-bottom-color:#330099">2.vrsta, Proizvod 1</td> <td>2.vrsta, Proizvod 2</td></tr></table> </body></html> Snimite dokument pod nazivom Primer44a.html na D disk (D:\Grupa I\HTML\Primer44a.html)

  27. Podešavanje dimenzija ćelija • Osim zadavanja vrednosti atributa heighti widthu oznaci <table>, tabelu odgovarajuće visine i širine možete dobiti i zadavanjem dimenzija ćelija • Dimenzije tabele treba da se poklapaju sa zbirnim dimenzijama ćelija • Dimenzije ćelija mogu se zadati u pikselima ili procentualno u odnosu na tabelu

  28. Primer 45. <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 Primer45.html na D disk (D:\Grupa I\HTML\Primer45.html)

  29. Primer 45a. <html> <head><title>Dimenzije ćelija </title></head> <body> <tablewidth=“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 Primer33.html na D disk (D:\Grupa I\HTML 1\Primer33.html)

  30. Horizontalno poravnanje sadržaja ćelija • Podrazumevano horizontalno poravnanje sadržaja je uz levu ivicu ćelije • Da bi se promenilo podrazumevano horizontalno poravnanje sadržaja ćelije koristi se atribut align u oznaci ćelije <td> • Atribut align ima tri moguće vrednosti: • left • right • center

  31. Primer 46. <html> <head><title>Horizontalno poravnanje </title></head> <body> <tableborder=“1” width=“600”> <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 Primer46.html na D disk (D:\Grupa I\HTML\Primer46.html)

  32. Vertikalno poravnanje sadržaja ćelija • Kada je ćelija viša od svog sadržaja, čitač će sadržaj podrazumevano centrirati vertikalno između vrha i dna ćelije • Za promenu podrazumevanog poravnanja, koristi se atribut valign, koji ima tri mogućnosti: • top – sadržaj počinje od gornje ivice ćelije • middle – centrira sadržaj vertikalno između vrha i dna ćelije • bottom – prikazuje sadržaj tako da se završava uz donju ivicu ćelije

  33. Primer 47. <html> <head><title> Vertikalno poravnanje </title></head> <body> <table border=“1“ width=“600”> <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%” height=“100” valign=“top”> Gornje </td> <td width=“33%” height=“100” valign=“middle”>Srednje </td> <td width=“33%” height=“100”valign=“bottom”> Donje </td> </tr> </table> </body></html> Snimite dokument pod nazivom Primer47.html na D disk (D:\Grupa I\HTML\Primer47.html)

  34. Poravnanje tabele na stranici • Čitač Weba će podrazumevano tabelu poravnati uz levu ivicu Web stranice • Atributom align definiše se različito poravnanje tabele: • <table align=“left”> • <table align=“right”> • <table align=“center”>

  35. Primer 48. <html> <head><title> Vertikalno poravnanje </title></head> <body> <table border=“1“ align=“right” width=“600”> <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%” height=“100” valign=“top”> Gornje </td> <td width=“33%” height=“100” valign=“middle”>Srednje </td> <td width=“33%” height=“100”valign=“bottom”> Donje </td> </tr> </table> </body></html> Snimite dokument pod nazivom Primer48.html na D disk (D:\Grupa I\HTML\Primer48.html)

  36. Dodavanje slika i veza ćelijama tabele • 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 • 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

  37. Primer 49. <html> <head><title> Umanjene slike</title></head> <body> <div align="center"> <table> <tr> <td> <a href="file:///D|/HTML/Grupa 1/Primer 22.html"> <img width="114" src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg"> </a> </td> <td> <a href="file:///D|/HTML/Grupa 1/Primer 22.html"><img width="114" src="file:///C|/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Winter.jpg"> </a> </td></tr> </table></div> </body></html>

  38. Vežba III

More Related