Html tabele

5/24/2018 Html tabele

1/21

JAVNA USTANOVA SREDNJOKOLSKI CENTAR

JOVAN CVIJI

MODRIA

MATURSKI RAD

IZ PROGRAMIRANJE I PROGRAMSKI JEZICI

TEMA: TABELE U HTML-u

Mentor: Uenik:

Prof. Rajko Miljevi Marijana Koji IV-5

Modria,kolske 2013/2014. Godine


2/21

2

SADRAJ

SADRAJ........................................................................Error! Bookmark not defined.UVOD ............................................................................................................................... 3KAKO RADE HTML TABELE? .................................................................................... 4ATRIBUTI ....................................................................................................................... 6TABELE ZA FORMATIRANJE DOKUMENTA .......................................................... 8irina tabele i polja........................................................................................................... 9TABELE ZA PRIKAZ PODATAKA .............................................................................. 9IRINA TABELE ............................................................................................................ 9PRIMJER TABELE ....................................................................................................... 10Izbornici .......................................................................................................................... 12

Primjer 6: .............................................................................................................. 13OKVIRI .......................................................................................................................... 14

Primjer 7: .............................................................................................................. 15Primjer 8: .............................................................................................................. 16

ZAKLJUAK................................................................................................................. 18LITERATURA ............................................................................................................... 19STRANA ZA UPIS PODATAKA ................................................................................. 20ODBRANA MATURSKOG RADA .............................................................................. 21


3/21

3

UVOD

U ovom tekstu prvo emo objasniti ta je HTML, zatim prelazimo na tabele i rad

sa tabelama u HTML-u

HTML (HyperText Markup Language) predstavlja, uz kaskadne stilove (CSS),

grafiku i skriptne jezike, osnovnu web tehnologiju za izradu web stranica. Hipertekst je

tekst koji se prikazuje na zaslonu raunara i koji je hipervezom povezan s nekim drugim

tekstom u istom ili nekom drugom dokumentu. Markup jezik nije programski jezik koji

moe izvravati naredbe, nego jezik kojim opisujemo strukturu dokumenta. HTML-om

emo primjerice opisati da naa web stranica sadri naslove teksta, tekstualne odlomke,

slike ili video.

HTML tabele pojavljuju se prvi puta 1996 kao nadogradnja HTML 2.0 standarda,

opuisane u dokumentu RFC 1942 ( ftp://ds.internic.net/rfc/rfc1942.txt ), a 1997 su

ukljuene kao sluebeni dio HTML 3,2 specifikacije ( http://www.w3.org/TR/REC-

html32 ). Zamiljene su kao nain prikazivanja podataka organizovanih u retke i stupce

u HTML dokumentima. Tabele mogu sadravati tekst,brojeve,slike,linkove,forme,pa i

druge tabele. U ovom radu prikazati emo razne mogunosti u upotrebi HTML tabela,

te mogunosti alternative za neka od podruija primjene.


4/21

4

KAKO RADE HTML TABELE?

Tabela = dvodimenziona matrica iji se elementi nazivaju elije (engl.cell).

elija moe sadrati razliite informacije:

Brojeve

Tekst

Boje

Liste

Hiperveze

Slike,itd.

Tabela se sastavlja tako to se opisuju redom njeni redovi (engl.row) i sadraj svake

elije u redu. Tabela se opisuje uz pomo sloenog taga table koja moe sadrati vie

atributa:

border(okvir, ram) - koji opisuje irinu okvira tabele;

cellspacing- koji opisuje irinu linije koja razdvaja dve elije;

cellpadding- koji opisuje prostor oko sadraja elije (margine);

width- koji opisuje ukupnu irinu tabele.

U daljem tekstu objasnicemo detaljno sve atribute prema HTML 3.2 specifikaciji

HTML tabelestruktura. Tabele se vie ne koriste za izradu strukture web stranice jer

je tu zadau preuzeo css.HTML tabelaje upisana izmeu poetne i zavrne oznake

elementa. Tablica moe imati eljeni broj redaka a svaki redak upisujemo

izmeu poetne i zavrne oznake elementa.Svaki redak ima jednaki broj elija koje

omeujemo oznakom elementa .... HTML tabele - osnovni elementi.

Oznaavanje poetka i krajatabele: ...

Poetak i kraj dijela gdje se nalazi zaglavlje stupaca: ...

Poetak i kraj zaglavlja stupaca: ...

HTML tablica definira se izmeu para HTML tagova i .


5/21

5

Tablica moe sadrati proizvoljan broj redaka omeenih* i tagovima. U

svakom retku nalazi se jednak broj elija omeenih sa i (podatkovne

elije) ili i (elije zaglavlja). Svaka elija moe sadravati bilo koji

HTML kod koji se moe nalaziti u BODY dijelu HTML dokumenta, ukljuujui I Drugu

tabelu, elije zaglavlja nisu ni po emu razliite od ostalih, na pregledniku je da odlui

da li e ih posebno istaknuti ili ne. Veina grafikihpreglednika sadraj elija zaglavlja

prikazuje masnim slovima (bold). Tabela moe sadravati i

par tagova, koji omeuje* potpis ili naslov tabele.

Primjer jedostavne tabele:

Pr imjer 1.

JMBAGOcjena p i smenogOcjena usmenog

0030390954

0012345655

U ovom jedonstavnom primjeru vidimo i upotrebu dva atributa. Atributi su dodatne

kljune rijei koje se navode unutar nekog od HTML tagova, i slue za mijenjanje

osnovnog znaenja taga ili navoenje potrebnih parametara. Kod taga

upotrebljen je BORDER atribut. Ovaj atribut odreuje debljinu ruba oko tabele i izmeu

njenih elija. Ako nije specificiran, tabela se iscrtava bez vidljivih rubova (ekvivalentno

ORDER="0"). Drugi upotrebljen atribut je u tagu. ALIGN kae da

elimo da se potpis prikazuje ispod tablice. Ako nije naveden, preglednih potpis

ispisuje iznad tabele. Poetak i kraj tijela stranice unutar kojeg se nalazi podatci:

...


6/21

6

ATRIBUTI

Prema HTML 3.2 specifikaciji, tagovi koji ine tabelu mogu sadravati slijedee

atribute:

ALIGN horizontalna pozicija tabele u odnosu na prozor preglednika. Moe

poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".

WIDTHpredloena irina tabele. Ovaj parametar je samo naputak pregledniku

kako bi trebalo iscrtati tabelu. Preglednik ga u odreenim sluajevima moe ignorisati ili ne

potovati. irina moe biti zadanaapsolutnom vrijednosu u pikselima (npr. WIDTH=212)

ili relativnom vrijednosu u postotcima irine prozora preglednika, okvira ili elije koja

sadri tabelu (npr. WIDTH="100%"). Ako nije naveden, potrebna irina tabele se

automatski odreuje prema njenom sadraju.

BORDER debljina ruba oko tabele i elija u pikselima. Podrazumijevana

vrijednost je "0".

CELLSPACINGrazmak izmeu susjednih rubova elija u pikselima.

Podrazumijevana vrijednost je "2".

CELLPADDINGrazmak izmeu ruba elije i njenog sadraja u pikselima.

Podrazumijevana vrijednost je "1".

:

ALIGNpoloaj potpisa u odnosu na tabelu. Moe poprimiti vrijednosti"top" ili

"bottom". Podrazumijevana vrijednost je "top".

:

ALIGN vodoravno poravnavanje sadraja elija unutar cijelog reda. Moe

poprimiti vrijednosti "left", "center" ili "right". Podrazumijevana vrijednost je "left".


7/21

7

VALIGNokomito poravnavanje sadraja elija unutar cijelog reda. Moe

poprimiti vrijednosti "top", "middle" ili "bottom". Podrazumijevana vrijednost je "top".

:

NOWRAPatribut bez parametara. Upuuje preglednik da ne prelama tekst

unutar elije, osim u sluaju da se to eksplicitno trai (npr.
ili

tagovima).

ROWSPANbroj redova kroz koji se protee ova elija. Omoguuje

kreiranje nepravilnih tabela. Slijede_i red (ili redovi) treba sadravati jednueliju manje.

COLSPANbroj stupaca kroz koji se protee ova elija. Omoguuje kreiranje

nepravilnih tabela. Slijedei stupac (ili stupci) treba sadravati jednu eliju manje.

VALIGN okomito poravnavanje sadraja unutar elije. Moe poprimiti

vrijednosti "top", "middle" ili "bottom". Ako nije naveden, koristi se vrijednost VALIGN

atributa za cijeli red.

WIDTHpredloena irina elije. Kao i irina cijele tabele, ovo slui samo kao

naputak pregledniku. U pravilu, preglednik potuje zadanu brojku, osim usluajevima kada

to stvara konflikt sa potrebnim irinama ostalih elija u danom stupcu. irina moe biti

zadana apsolutnom vrijednosu u pikselima (npr. WIDTH=50) ili relativnom vrijednosu u

postotcima irine cijele tabele (npr. WIDTH="30%"). Ako nije naveden, potrebna irina

elije se automatski odreuje prema njenom sadraju.

HEIGHTpredloena visina elije. U pravilu, preglednik potuje zadanubrojku,

osim u sluajevima kada to stvara konflikt sa potrebnim irinama ostalih elija u danom

retku. Takoe moe biti zadana u postotcima ili apsolutnom vrijednou u pikselima.

Preglednici poput Microsoft Internet Explorera koristili su i neke dodatne atribute. Neki od

njih su kasnije ukljueni u HTML 4.0 specifikaciju. HTML 4.0 takoedodaje neke nove

tagove i atribute, uglavnom namjenjene lakem prikazivanju na nevizualnimpreglednicima.

Mogue je grupisanje redaka i stupaca tabele koritenjem , ,

i tagova. Takoe je dodan tag koji moe

sadrati opis sadraja tabele, za preglednike koji nisu u mogunosti iscrtati tabelu. HTML

4.0 uvoenjem stilova (cascading style sheets) insistira na odvajanju informacija o sadrajudokumenta od onih o formi. U skladu sa tim su mnogi atributi za formatiranje tabela poput


8/21

8

ALIGN, VALIGN, BGCOLOR i slinih proglaenizastarjelima, i preporuujese koritenje

stilova (CSS) za formatiranje tabela. Ovo su samo neke od najbitnijih promjena, kompletan

opis razlika izmeu HTML 3.2 i HTML 4.0 specifikacija je izvan opsega ovog rada. Sa

izuzetkom CSS-a, noviji preglednici jo uvijek ne implementiraju veinu mogunosti koje

dodaje HTML 4.0

TABELE ZA FORMATIRANJE DOKUMENTA

HTML originalno nije zamiljen kao jezik kojim bi bilo mogue precizno

formatiranje dokumenata. Potreba za takvim mogunostima bila je velika, pa su

kreativni web-dizajneri objeruke doekali pojavu tablica u HTML 3.2 specifikaciji, I

poeli ih koristiti za prelom teksta. Mogunosti upotrebe su brojne, ukljuujui prelom

teksta na dva, tri ili vie stupaca,kreiranje izbornika za navigaciju, crtanje raznovrsnih

rubova i okvira ili rezanje sloenih grafikih elemenata u manje komade kako bi se

smanjila koliina prenesenih podataka.

Pojavom CSS-a, ovakva upotreba tabela je zastarjela, no mnogi dizajneri je jo

uvijek na veliko korite. Razlog tome jeo navika, a i razlike u iscrtavanju izmeurazliitih preglednika. Veina preglednika tablice prikazuju gotovo identino,a razlike

koje postoje su poznate, kao i naini da ih se izbjegne. CSS je jo uvijek relativno nova

tehnologija, te je potrebno puno vie panje kako bise dobili dokumenti koji izgledaju

jednako u razliitim preglednicima. Bez obzira na to, poeljno je za potrebe

formatiranja dokumenta koristiti CSS. Vei uloeni trud isplatit e se veim

mogunostima, mnogo lakom kasnijom promjenom formatiranja i boljom

pristupanou za korisnike ne-vizualnih preglednika. Za one koji se ipak odluekoristiti tablice za formatiranje slijedi nekoliko korisnih savijeta.


9/21

9

irina tabele i polja

Ovdje je opet poeljno zadati irinu tabele i polja u postotcima, kako bi korisnici

mogli bez potekoa gledati stranicu u prozorima razliitih irina. Ponekad nekigrafiki

element dizajna zahtjeva fiksne dimenzije tablice. Tada je potrebno odrediti dimenzije

tako da stranica stane i na monitore sa najmanjom razluivou. Danas je relativno

sigurno za pretpostaviti da je to 800x600, pa bi shodno tome stranice fiksne irine

trebale biti iroke ne vie od oko600-700 piksela.

TABELE ZA PRIKAZ PODATAKA

Pri koritenju tabelavalja voditi rauna o tome da HTML nije zamiljen kao jezik

za formatiranje teksta. Iako postoje brojni atributi kojima moemo uticati na izgled

tabela, njihovo ponaanje nije strogo definisano, i mogu imati vrlo razliite efekte u

razliitim preglednicima.

IRINA TABELE

Trebalo bi izbjegavati zadavanje vrijednosti za irinu tablice u pikselima. Osim

to postoji mogunost da razliiti preglednici razliito interpretiraju zadanu vrijednost,

moramo voditi rauna i o tome da korisnici gledaju na dokument naekranima razliitih

razluivosti, i u prozorima razliitih veliina. Zbog toga moe doi do neeljenih pojava,

kao tabela koja po irini ne stane u prozor preglednika pa prisiljava koris nika na

skrolanje. Ukoliko je neophodno zadati irinu tabele, poeljno je napraviti to u

postotcima.


10/21

10

PRIMJER TABELE

Poetak i kraj retka tabele: ...

Poetak i kraj elije s podatcima: ...

Primjer tabele u HTML-u:

Naziv 1

Naziv 2

elija 1 u 1. retku

elija 2 u 1. retku

elija 3 u 2. retku

elija 4 u 2. retku


11/21

11

Izgled gornjeg primjera na web stranici:

Naziv 1 Naziv 2

elija 1 u 1. retkuelija 2 u 1. retku

elija 3 u 2. retkuelija 4 u 2. retku

Primjer 1Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).

Kod Objanjenje Ispis na ekran

Dodavanje tabele

Tabela sa jednim redom idvije elije bez teksta.

Primjer 2.Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu). Tekst u prvojeliji je jedan a u drugoj broj 2.


Dodavanjetabele2

jedan 2

Tabela sa jednim redom idvije elije bez teksta. jedan 2

Primjer 3. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).


Dodavanjetabele3

12

Svaki red poinje sa TAG-

om (), a svaka

kolona sa TAG-

om().

1 2 3

Druga tabela

1


12/21

12

3

druga tabela

1

2

3

2

3

Primjer 4. Kreirati tabelu sa jednim redom i dvije kolone (tj. dvije elije u jednom redu).Tekst u prvojeliji je jedan a u drugoj broj 2


Dodavanjetabele4

red 1, elija 1red 1, elija 2

red 2, elija 1red 2, elija 2

Tabela sa jednim redom i

dvije elije bez teksta.Nije navedena irinatabele zato je irokakoliko je potrebno za ispisteksta u tabli.

red 1,

elija 1red 1,

elija 2

red 2,

elija 1red 2,

elija 2

Izbornici

Pomou tabela mogue je jednostavno oblikovati navigacijske izbornike. Svako polje

tabele predstavlja jedan "dugme". Velika prednost nad koritenjem slika za "dugmad" je

mogunost promjene teksta bez koritenja nekog od programa za crtanje, te daleko

kraa vremena uitavanja. Koritenjem ONMOUSEOVER atributa moemo

jednostavno promijeniti boju polja preko kojeg korisnik prelazi miem, i tako

signalizirati da se radi o linku. Koritenjem ONCLICK atributa moemo promijenitiizgled "dugmeta" prilikom klika, i tako stvoriti zgled stisnutog "dugmeta".


13/21

13

Primjer 6:

opcija 1

opcija 2

opcija 3

opcija 4

opcija 5


14/21

14

Ova tehnika koritena je i za izradu glavnog izbornika ovog dokumenta.

OKVIRI

Preglednici tipi_no iscrtavaju okvir tablice sa "3d" efektom; tablica izgleda kao da

je izdignuta od povrine dokumenta, a sama polja tablice su udubljenja u tojpovrini.

Koritenjem ugraenih tabelai CELLSPACING atributa mogue je kreirati raznobojne

okvire, a dodavanjem redaka i stupaca na rubove tablica mogue je ubaciti grafike

elemente kao okvire.


15/21

15

Primjer 7:

Iscrtkani okvir postignut koritenjem ugnije_enih tablica.

Ime

Prezime

JMBG

Marijana

Koji

0907995125000

Goran

Koji_


16/21

16

Primjer 8:

--> Moe se postaviti slika

Tablica sa grafikim okvirom. Iako je okvir nacrtan,

tablica nije fiksne veliine nego mijenja veliinu zajedno

sa prozorom preglednika.


17/21

17


18/21

18

ZAKLJUAK

Tehnike opisane u prolom dijelu dokumenta vrlo su efektne, no za postizanje

istih efekata puno je bolje koristiti stilove. Ne-vizualni preglednici mogu imati puno

problema sa brojnim dodatnim poljima i ugraenim tabelakoje ne sadre korisni sadraj

nego samo slue za formatiranje. Uz dobro definiranu logiku strukturu dokumenta,

koritenjem stilova mogue je vrlo jednostavno promijeniti njegov izgled, i to bez

mijenjanja samog dokumenta. S druge strane, tabele su i dalje neizostavne za prikaz

podataka. Kod primjena te vrste treba voditi rauna o raznim vrstama preglednika, i

koristiti atribute i tagove za dodatni opis sadraja (npr. koristiti umjesto

za zaglavlje, koristiti i tagove, te ABBR, TITLE i

HEADERS atribute u poljima) kako bi ne-vizualni preglednici to lake prikazali

sadraj tabele.


19/21

19

LITERATURA

1. HTML I Web dizajn, Mikro knjiga ,Osborne.Beograd, (2010).

2. DREAMWEAVER MX, Mikro knjiga,Beograd , (2004).

3. RAD SA TABELAMA , Biljana Jovanovi,Matematikifakultet,Univerzitet u Beogradu http://poincare.matf.bg.ac.rs/ (2013).

4. OSNOVE HTML-a ,prof. Duko Popovi,http://www.osnoveprogramiranja.com/

5. HTML PRIRUNIK I ZADACI , http://www.znanje.org/


20/21

20

STRANA ZA UPIS PODATAKA


21/21

21

ODBRANA MATURSKOG RADA

Ocjena maturskog rada: ( ),____________________________________________.

Pitanja: 1.____________________________________________________________.

2.____________________________________________________________.

3.____________________________________________________________.

Ocjena na odbrani rada: ( ),___________________________________________.

Komisija: ____________________________________________________________.

Predsjednik

____________________________________________________________.Ispitiva

____________________________________________________________.lan

Documents

Html tabele