SLIKA KAO POZADINA TABELE /TABLE BACKGROUND IMAGE/ (<table background="ime_slike.ext>)
Slika kao pozadina table /TABLE BACKGROUND IMAGE/ je dizajnersko rješenje. Obično se koristi slike koje nemaju mnogo prelaza svjetlo tamno da bi mogli koristi suprotnu (inverznu) boju za font.
Prikaz slike se izvodi naredbom unutar TAG table (<table background="ime_slike.ext>) gdje su:
- <background> obavezno se koristi u TABLE TAG-u
- ime_slike.ext naziv slike sa ekstenzijom. Ako slika nije na isto folderu kao dokument treba dodati i putanju.
Primjer 1. Koristiti sliku baner11.gif kao sliku u pozadini dokumenta.
| Kod | Objašnjenje | Ispis na ekran | ||
|
<html> <head><title>Slika kao pozadina table</title></head> <body> <table border="1" width="100%" background="baner11.gif"> <tr> <td>111</td> <td>tekst se vidi iznad slike</td> </tr> </table> </body></html> |
Dodavanje slike kao pozadine tabele baner11.gif |
|
Primjer 2. Pozadina tabele je slika baner12.gif.
| Kod za prvu sliku | Ispis na ekranu | ||
|
<html> <head><title>Slika kao pozadina table2</title></head> <body> <table border="1" width="100%" background="baner12.gif"> <tr> <td>111</td> <td>Tekst se vidi iznad slike</td> </tr> </table> </body></html> |
|
Primjer 3. Pozadina table je slika http://www.znanje.org/epp/000/Asistent.jpg.
| Kod za prvu sliku | Ispis na ekranu | ||
|
<html> <head><title>Slika kao pozadina table2</title></head> <body> <table border="1" width="100%" background="http://www.znanje.org/epp/000/Asistent.jpg"> <tr> <td>11<br><br><br></td> <td>Tekst se vidi iznad slike</td> </tr> </table> </body></html> |
|
Daljnji rad 1: Kreirati tabelu sa dva reda i dvije kolone. Tekst ćelija u prvom redu 41 i 52, a drugom redu 2323 i 12345. Deblijna linija je 6. Pozadina table je slika baner13.gif.
Daljnji rad 2: Kreirati tabelu sa tri reda i tri kolone. Tekst ćelija u prvom redu 11, 41 i 52, drugi red je 22, 2323 i 12345, treći 33, 321 432. Deblijna linija je 3. Pozadina table je slika baner14.gif.
(Pri pisanju se mogu koristiti standardne opcije Edit/Copy, Edit/Paste) .
Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru
