Nakon što smo naučili izrađivati jednostavne web stranice i umetati grafičke elemente, trebalo bi se malo više pozabaviti tablicama. Zašto? Surfajući internetom, uočili ste da lijepo oblikovane web stranice sadrže mnoge slike različitih veličina i tekstove raznih pisama i veličina slova.
Ako umetnemo više slika i tekst u isti red, primjećujemo da veličinu retka određuje najviša slika. Sigurno se pitate, možemo li slike i tekst rasporediti po stranici kako bismo htjeli. Da naravno, a u Microsoft Frontpage vizualnom HTML uređivaču uradit ćemo to pomoću tablica.
Tablice ne služe samo za prikaz tabličnih podataka, već se koriste i za oblikovanje izgleda same stranice. Bez tablica ne bismo mogli napraviti složene web stranice s izbornicima u stupcima, galerije slika, uredne obrasce i dr. Zato ćemo najprije na web stranicu umetnuti tablicu, a zatim u zasebne ćelije umetnuti elemente stranice koje želimo oblikovati neovisno o položaju, veličini i obliku drugih elemenata.
Sadržaj objave
Kako umetnuti tablicu u Microsoft Frontpageu?
Tablicu možete umetnuti rabeći gumb za umetanje tablice (Insert Table) iz alatne trake Standard ili iz izbornika Table > Insert > Table. Nakon dodavanja tablice rabeći naredbu iz izbornika otvara se dijaloški okvir Insert table.
Primjer 1. Umetanje zadane tablice
Objašnjenje dijaloškog okvira Insert Table
1. Size
Size – nam omogućuje postavljanje broja redova i stupaca. Rows su redovi, a Columns su stupci. Iznad u primjeru 1, napravili smo zadanu tablicu od 2 reda i 2 stupca.
Vježba 1. Unesi tablicu veličine 2 stupca i 4 reda.
Rješenje 1.
2. Layout
Layout – omogućuje raspored tablice.
Alignment – poravnanje tablice [Left – lijevo, Center – Sredina, Right – Desno].
Float – plutanje ili lebdenje, tablica se lovi za lijevu ili desnu stranu ekrana ili elementa. [Left – lijevo, Right – desno].
Specify width – određivanje širine tablice u pikselima ili postocima.
Ako je označeno In percent – 100%, znači da će tablica biti široka 100% veličine prozora. S promjenom veličine prozora, tablica se uvijek prilagođava njegovoj širini u iznosu postotka. Ako je označeno In pixels, onda možemo definirati širinu stranice u pikselima. Tablica će uvijek biti navedene veličine u pikselima, bez obzira na promjenu veličine prozora.
Vježba 2. Unesi tablicu sa ovim postavkama. Float: Left, In pixels: 200.
Rješenje 2.
Vježba 3. Unesi tablicu sa ovim postavkama. Rows:4, Columns:1, Float: Right, In pixels: 50.
Rješenje 3. Tablica lebdi s desne strane.
Cell padding i cell spacing – argumenti zadaju se samo za tablicu, ne mogu se zadati za redove ili polja.
Cell padding – znači odmak sadržaja od ruba polja u kojem se taj sadržaj nalazi.
Cell spacing – je razmak između pojedinih polja tablice. Sjetite se tipke Space (Razmaknica).
Na slici gore cell padding označen je zelenom linijom, a cell spacing crvenom linijom.
Ukoliko tablice koristimo da bismo rasporedili sadržaj na stranici, najčešće za sva tri ova argumenta zadajemo 0.
Vježba 4. Unesi tablicu s ovakvim postavkama. Rows:4, Columns:1, In pixels:100, Cell padding:15, Cell spacing:1
U svaku ćeliju dodaj jedno ime. MARKO, IVANA, DALIBOR, MANUEL.
Rješenje 4.
Vježba 5. Unesi tablicu s ovakvim postavkama. Rows:2, Columns:4, In pixels:300, Cell padding:2, Cell spacing:10.
Rješenje 5. Razmak između ćelija (Cell spacing) iznosi 10 točaka.
3. Borders
Borders – određuje postavke rubova tablice: debljinu (Size) i boju (Color).
Size – postavljanje debljine ruba stranice.
Color – postavljanje boje ruba tablice.
Vježba 6. Unesi tablicu s ovim postavkama:
Rješenje 6.
4. Background
Color – omogućuje promjenu boje pozadine tablice.
Vježba 7. Umetni tablicu s zelenom pozadinskom bojom.
Rješenje 7.
