dwcc_20-4585214

Copyright © Link group

20. Tabele

Tabele u HTML dokumentima nikako ne bi trebalo koristiti za strukturiranje saržaja, već samo za ono za šta su i namenjene, a to je tabelarno strukturiranje podataka. Ranijih godina dizajneri su kreirali nevidljive tabele u koje su raspoređivali elemente strana i tako kreirali raspore. Danas je ta tehnika napuštena zbog širokih mogućnosti CSS-a, a tabele su došle na svoje. Kada želimo da dodamo tabelu, postavićemo kursor na željeno mesto i izabrati Insert > Table iz padajućeg menija, ili Table opciju iz panela Insert (Common grupa). U oba slučaja, dobićemo Table dijalog koji vidimo na sledećoj slici.

slika 20.1 - Unos nove, prazne tabele u Dw Postoje sledeće opcije:

● Rows, Columns - definišemo koliko će tabela imati redova (rows) i kolona (columns)


● Table width – određujemo kolika će biti širina tabele. U polju unosimo brojčanu vrednost, a desno, u padajućem meniju biramo jedinicu mere. Ukoliko postavimo piksele (pixels), širina tabele će biti fiksna. Ukoliko izaberemo procente (percent), širina tabele će zavisiti od roditeljskog elementa u kome se tabela nalazi (npr okružujući div, druga tabela, cela stranica i sl) ● Border tickness - određujemo vrednost za debljinu ivica tabele. Ako u izostavimo ovaj atribut, ivica se neće prikazati. Možemo postaviti i vrednost 1. ● Cell padding – određujemo vrednost za prostor, razmak između ivica ćelije i sadržaja unutar ćelije. Ako ostavimo prazno polje, razmak će se prikazati kao 1 piksel, a ako unesemo vrednost 0, razmaka neće biti. ● Cell spacing - ovde unosimo vrednost za razmak između samih ćelija tabele. Ako ne unesemo ništa u polje, razmak će se prikazati kao da smo uneli 2 piksela, a ako unesemo vrednost 0, razmaka neće biti. ● Header - sadržaj u zaglavljima redova i kolona se formatira drugačije nego sadržaj ostalih ćelija i definiše se drugačije. ● Caption - ovde se unosi naslov tabele koji će se pojaviti van tabele na vrhu prvog reda. ● Summary - ovde se unosi opis tabele, sakriven je od čitača, ali se ta informacija prosleđuje Screen Reader aplikacijama za osobe slabijeg vida, radi identifikovanja sadržaja.

Pogledajmo sledeću sliku kako bi razjasnili ove prethodne detalje:

slika 20.2 - prikaz delova tabele Na slici vidimo označene neke od delova tabele: A - Tabela B - Cellmargin C - Ćelija D - Cellpadding E - Sadržaj unutar ćelije


Ukoliko u dijalogu iz prve slike potvrdimo klikom na ok, kreiraćemo novu tabelu kao na slici ispod.

slika 20.3 - Nova, prazna tabela u design prikazu Dw dok će u kodu, tabela izgledati ovako: <table width="80%" border="0" cellspacing="0" cellp adding="2"> <tr> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Pre nego što krenemo dalje, hajde da se podsetimo kako se postavlja tabela i koji se tagovi koriste u HTML-u.


Dodatni info: Primetićete da kod tabele, odnosno tagove koji se tiču tabele, Dreamweaver u code prikazu boji u zelenu boju. Na taj način, lako i brzo možete distancirati kod tabele od ostatka koda. Dreamweaver na taj način pomaže u radu. U nastavku ćemo videti, kod formi se boji u narandžasto itd.

Struktura tabele Tabelu okružuje <table> tag, i unutar njega postavljamo određene atribute koje smo pomenuli već u dijalogu za kreiranje tabele (Width, Border, Cellspacing, Cellpadding, Summary). Ukoliko ne koristimo taj dijalog, atribute možemo unositi ručno. Obratite pažnju na to da se ova podešavanja tabele unose kao html atributi, CSS ćemo koristiti kasnije za stilizaciju. Dakle, u kodu, ako ne koristimo dijalog, počinjemo sa <table> tagom: <table> </table> Koji sadrži atribute: <table width="80%" border="0" cellspacing="0" cellp adding="2"> </table> Svaki red u tabeli se označava <tr> tagom (Table Row Tag) <table width="80%" border="0" cellspacing="0" cellp adding="2"> <tr> </tr> </table> Dok se svaka ćelija označava <td> (Table Data Tag), eventualno sa <th> (Table Header Tag), ukoliko je header ćelija. <table width="80%" border="0" cellspacing="0" cellp adding="2"> <tr> <td>Ovo je sadržaj ćelije</td> </tr> Ovako smo kreirali tabelu sa jednom jedinom ćelijom. Jedan red i jedna ćelija. Možda već naslućujete da kod HTML tabela ne postoje kolone, barem što se koda tiče. Ukoliko bismo imali tabelu sa dva reda i tri kolone, njen kod bi izgledao ovako: <table> <tr> <td>A1</td>


<td>B1</td> <td>C1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> </tr> </table> Dok bi se realno prikazala ovako:

slika 20.4 - Prikaz tabele u browseru. Vidimo dva tr taga koji predstavljaju dva reda, a u svakom od njih po tri ćelije tabele - td. Upoređujući kod i sliku tabele primećujemo ono što smo već pomenuli, da tabele sadrže samo redove, dok se kolone kreiraju od n-te ćelije svakog reda. U našem primeru, polja sa vrednošću A1 i A2 nisu jedno pored drugog u kodu, ali se u prikazu nalaze u istoj “koloni”. Mogli bi reći da u kodu, tabele se zapisuju sa leve na desnu stranu, redom po redovima. Kao što smo već primetili, tr tagovi su redovi, dok su td ćelije tabela. Pored njih, tu su i th ćelije, koje koristimo za naslove. Ukoliko želimo da spojimo određene ćelije, potrebno je da u prvoj (u kodu) upišemo rowspan, odnosno colspan atribut. Pomoću tih atributa određujemo koliko ćelija treba da bude spojeno. Rowspan spaja ćelije vertikalno, dok colspan to čini horizontalno. Na primer, pogledajmo ovu tabelu:

slika 20.5 - spojenje ćelije tabele U osnovi, ta tabela sadrži dva reda i tri kolone, ukupno 6 ćelija. Da bi spojili u prvom redu sve tri ćelije, nije dovoljno samo da obrišemo te dve nepotrebne, već moramo postaviti colspan. Ceo kod tabele može izgledati ovako npr: <table width="300" border="2"> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td>


<td> </td> <td> </td> </tr> </table> Primećujemo da u kodu prvi red (tr tag) poseduje samo jednu ćeliju (td), ali ona poseduje colspan atribut sa vrednošću 3. Na neki način, to znači da ta jedna ćelija ima vrednost tri ćelije i zato stoji sama u jednom redu. Zapamtite da uvek ukupan zbir ćelija mora biti isti u svakom redu. Za više informacija o spajanju ćelija i uopšte o tabelama u HTML jeziku, preporučujem da pogledate jedinicu tabele u kursu Uvod u HTML i CSS. Podešavanja tabele kroz properties inspector panel Kod rada sa tabelama se posebno može videti značaj Dreamweaver-ovih funkcija u odnosu na obične text editore. Iako tabele imaju nešto komplikovaniji kod i ne poseduju kolone na koje smo možda navikli u excel-u i sl, Dw nam ipak približava te funkcije. Na primer, pošto postavimo tabelu, možemo promeniti broj kolona u properties inspector panelu, a Dw će sam preračunati šta treba da se izmeni u kodu, dodati/obrisati ćelije iz svih redova i tako dalje. Ukoliko selektujemo celu tabelu (ne ćeliju, niti red) properties inspector panel će biti prikazan kao na sledećoj slici. Ukoliko ste selektovali ćeliju ili red, možete se prebaciti na celu tabelu klikom na table tag u tag selektoru (kliknite na <table> u njemu) ili kroz code prikaz (samo postavite kursor kod <table> taga).

slika 20.6 - properties inspector - selektovana cela tabela Na slici u okviru properties ins. panela vidimo da je skroz levo nacrtana ikonica tabele i pored stoji sam natpis “table”. To znači da se podešavanja tiču cele tabele, a ne nekog njenog pojedinog dela. Sada ćemo razmotriti podešavanja cele tabele, a u nastavku ćemo se vratiti i videti šta se dešava sa podešavanjem pojedinih delova tabele. Na slici iznad označeni su sledeći delovi:

A. Polje u kome možemo postaviti ID vrednost tabele. B. Poljima rows i cols određujemo broj redova, odnosno kolona tabele. Ukoliko upišemo manji broj od trenutnog, briše se poslednji red, odnosno kolona. Budite oprezni jer će se u tom slučaju, pored reda/kolone izgubiti i podaci u njihovim ćelijama. Ukoliko upišemo veći broj, novi redovi, odnosno kolone se pojavljuju ispod, odnosno desno od postojećih. C. U ovom polju unosimo širinu tabele. U meniju pored, biramo da li će biti % ili px. Isto kao kod dijaloga za kreiranje tabele


D. Cellpading (ne upisujemo jedinicu, samo broj) E. Cellspacing (ne upisujemo jedinicu, samo broj) F. Align opcije tabele (default/left/center/right). Postavlja horizontalni align tabele, kao kod teksta. Obratite pažnju da ovo polje ne utiče na tekst u ćelijama, već samo na celu tabelu. G. Border (ivica) tabele H. Polje u kome možemo postaviti CLASS vrednost tabele. I. Clear Column Widths - Briše sve atribute širina kolona (tačnije ćelija) J. Clear Row Heights - Briše sve atribute visina redova. K. Convert Table Widths to Pixels - Pretvara sve širine tabele u piksele (iz procenata) L. Convert Table Widths to Percent - - Pretvara sve širine tabele u procente (iz piksela)

Imajte na umu da se sva ova podešavanja unose unutar HTML atributa. Ne postavlja se CSS. Formatiranje delova tabele kroz properties inspector panel Kao što je već pomenuto, kroz properties inspector možemo ne samo podešavati celu tabelu, kao što smo videli iznad, već možemo uticati i na pojedinačne delove tabele. Pogledajte sledeću sliku.

slika 20.7 - Podešavanje kolone/reda/ćelije tabele Kao što vidite na slici iznad, properties inspector panel se prilagođava podešavanjima kolona, redova ili tabela ako je potrebno, a sve u zavisnosti od toga šta je selektovano, odnosno gde je postavljen kursor. Ukoliko u kodu ili kroz design prikaz označimo red, properties inspector će prikazati podešavanja za red, ukoliko označimo kolonu, biće prikazana podešavanja za kolonu, ukoliko označimo ćeliju ili postavimo kursor unutar nje, dobićemo podešavanja za nju. Već smo pomenuli da realno ne postoje kolone u tabelama u HTML jeziku, ali nam Dw omogućava ipak da ih selektujemo, a on će realno selektovati po jednu ćeliju iz svakog reda. Da bi u dizajn prikazu selektovali samo jednu kolonu, dovešćemo kursor miša do gornje ivice te kolone. Kada se kursor promeni u crnu strelicu koja pokazuje na dole, a pritom kolona dobije crvene ivice, pritisnućemo levi taster miša. Time je označena kolona i možemo je podešavati.


slika 20.8 - selektovanje kolone tabele kroz design prikaz Ukoliko želimo da selektujemo red, uradićemo slično kao kod selekcije kolone, sa tom razlikom da ćemo kursor miša postaviti levo od tabele, pre samog reda. Pojaviće se strelica koja pokazuje na desno.

slika 20.9 - selektovanje reda tabele kroz design prikaz Ukoliko ćelimo da selektujemo celu tabelu, slično ćemo uraditi kao kod selekcije kolona, ali kursor miša moramo postaviti par piksela iznad. Tada će se pojaviti kursor sa dodatkom ikonice tabele, a spoljne ivice će dobiti crvenu boju.

slika 20.10 - selektovanje cele tabele kroz design prikaz Selekcija određene ćelije je najjednostavnija, jer je dovoljno da samo kliknemo unutar ćelije. Ukoliko postoje dodatni tagovi unutar nje, možemo se poslužiti tag selektorom. Takođe, možemo selektovati više ćelija ili redova i kolona, tako što krenemo sa selekcijom kao iznad, ali držimo levi taster miša i povlačimo u željenu stranu. Više detalja o ovim načinima selekcije ćete naći u video materijalu koju prati ovu jedinicu.


Sada ćemo se vratiti na sam properties inspector, pošto smo selektovali neki deo tabele. U svakom slučaju, dobićemo properties inspector panel kao na sledećoj slici.

slika 20.11 - opcije ćelije u properties ins. panelu Razlikovaće se samo levi donji deo u kome je označeno na šta se odnose podešavanja (red, kolona, ćelija), jer u principu, šta god da smo selektovali, Dw se sprema da izmeni pojedinačne ćelije, bilo u pitanju sve ćelije određenog reda, ili kolone, ili pak samo neka od njih. U properties inspectoru možemo uočiti da je gornji deo isti kao kod podešavanja teksta, o čemu je već bilo reči u 8. jedinici kada smo govorili o tekstu. Ono što nas trenutno zanima je donji deo, u kome se nalaze sledeće opcije označene na slici iznad:

A. Opcija kojom spajamo ćelije ukoliko je selektovano više njih ili pak ceo red/kolona. Dw će dodati colspan/rowspan atribute gde je potrebno. B. Opcija kojom razdvajamo jednu ćeliju na više novih. Posle klika, pojavljuje se novi dijalog u kome biramo hor/ver razdvajanje i broj novih ćelija C. Horizontalno poravanjanje sadržaja ćelije. Ukoliko je selektovano više ćelija ili ceo red/kolona, odnosiće se na sve ćelije. Možemo postaviti left/center/right vrednosti. D. Vertikalno poravnanje ćelija, slično kao prethodna stavka. Opcije su top/middle/bottom/baseline. E. Širina (w) i visina (h) ćelije. Možemo uneti vrednost u pikselima (upisujemo samo broj) ili u procentima (unosimo broj i znak %). Obratite pažnju da ukoliko unesete širinu ćelije, to će postati širina cele kolone. Ako se već unosi, poželjno je na prvoj ćeliji kolone. F. No wrap opcija, kojom možemo podesiti da se ne prelama sadržaj ćelije G. Opcija kojom možemo postaviti da ćelija bude header (th) H. Boja pozadine ćelije. Možemo pozvati color picker dijalog klikom na kvadrat sa strelicom.

Sve ove opcije menjaju HTML i dodaju atribute HTML tagovima. Ukoliko želimo da CSS-om postavimo boju ili poravnanje teksta, moramo dodati CSS opis i pogoditi željenu ćeliju ili drugi element. Importovanje tabelarnih podataka Ako već posedujemo MS Word ili Excel dokumenta sa tabelarnim podacima, najlakši način kreiranja tabele sa tim podacima u Dreamweaveru je pomoću opcije Import Tabular Data


do koje možemo doći putem padajućih menija: File > Import > Tabular Data. Otvoriće se Import Tabular Data dijalog koji vidimo na sledećoj slici.

slika 20.12 - Import tabular data dijalog Pomoću ovog dijaloga možemo izabrati fajl na hard disku u kome se nalaze tabelarni podaci. Preporuka je da pripremite CSV fajl koji ćete pozvati. Možemo odrediti delimiter znak koji zavisi od dokumenta sa podacima, ali isto tako možemo podesiti koja će biti širina tabele i da li želimo da u startu postavimo cellpadding/cellspacing, kao i poziciju th ćelija i border. Ova funkcija polako gubi smisao i zato je uklonjena i iz insert panela, gde se je nalazila u prethodnim verzijama. Stilizacija tebele CSS-om Pored unosa podešavanja kroz HTML, možemo stilizovati tabelu i kroz CSS, što je mnogo praktičnije. Za početak, dovoljno je da postavimo kursor unutar tabele, i u CSS Designer panelu možemo kliknuti na add selector (označeno sa 1. na slici ispod).


slika 20.13 - Unos novog CSS opisa za ćeliju tabele Kao što znamo iz prethodnih jedinica, Dreamweaver će automatski predložiti novi selektor na osnovu trenutne selekcije (2. na slici). U primeru na slici, kursor je bio postavljen unutar ćelije tabele, i zato se selektor završava sa td, što označava ćeliju. Ukoliko želimo da stilizujemo sve ćelije tabele, postavljamo za selektor:

td { } ili tr td { } ili table tr td { }

Sva tri selektora daju istu stvar, jer je logično da će td biti unutar tr, a on unutar table taga. Obratite pažnju da će ovakav selektor stilizovati sve ćelije svih tabela na stranicama gde je primenjen CSS. To nikako nije najbolje rešenje i preporuka je da specifčnije odredite tabelu. Možete to uraditi na više načina:

● Postavite CLASS (ili ID) na table tagu kako bi odredili tabelu. Tada selektor može biti npr:

table.mojaTabela tr td { } ili table#nekaTabela tr td { }


Na taj način, stilizovaćemo samo ćelije tabele (ili tabela) koja poseduje tu CLASS, odnosno ID vrednost.

● Postavite CLASS (ili ID) van tabele na tagu (npr div) koji okružuje tabelu. Ili ukoliko imate već postojeći tag, iskoristite njega. Na primer:

.divTabele table tr td { } Ili .blogPost table tr td { } Ili #centralni table tr td { } Na taj način, stilizujemo sve ćelije u tabelama unutar određenog elementa. ● Možemo postaviti i na samoj ćeliji ili redu neku CLASS i tako stilizovati. Npr:

table tr td.celijaX { } ili table tr.nekiStilizovanRed td { } i td. Ovako gađamo samo određene ćelije koje imaju klasu, odnosno sve ćelije u redovima sa nekom klasom.

Analogno gorenavedenom za ćelije, možemo stilizovati i ćelije naslova (th), redove (tr) i cele tabele (table tag). Sve je u selektoru koji postavimo. U opisima, kada odredimo selektor, postavljamo svojstva kao da je u pitanju neki drugi element. Najčešće se postavlja širina/visina, padding, borderi (uz border-collapse), boja pozadine i sl. Na taj način možemo skoro kompletno izbeći HTML atribute, osim broja redova/kolona, što ne možemo stilizovati kroz CSS. Obavezno pogledajte i video materijal uz ovu jedinicu, u kome je detaljnije pojašnjeno postavljanje selektora za tebele i gde je prikazano nekoliko primera stilizacije tabele. Ukoliko u CSS opisu, selektor glasi “table tr td” uticaćemo na

● sve ćelije tabela ● header ćelije tabele ● sve ćelije prvog reda tabele


Sažetak Umesto ručnog unosa tabele koji može biti naporan, Dw omogućava da tabele unosimo na vizuelno jednostavniji način, upotrebom ugrađenih alata. Elemente tabele možemo lako menjati i korigovati prikaz kroz Design način rada. Tabele možemo stilizovati CSS opisima.

dwcc_20-4585214

Documents