glava
     

Cilji vaje:

  • izdelati in oblikovati tabele na spletni strani,
  • dodati in razvrščati podatke v tabeli na spletni strani.

Tabele

Tabele so močno orodje za prikaz in ureditev podatkov. V HTML-ju tabele uporabljamo podobno kot v urejevalniku besedil. Tabelo v HTML označuje značka <TABLE></TABLE>, sestavljajo pa jo vrstice <TR></TR> in celice <TD></TD>. Tabele imajo seveda tudi stolpce, ki pa jih v HTML-ju posebej ne označujemo.

Tabele, ki nimajo obrob, lahko uporabljamo tudi za razporejanje elementov na spletni strani.

Vstavljanje tabele na spletno stran

Za začetek dela s tabelami bomo spletni strani dodali tabelo z nekaj podatki. Take tabele imajo običajno obrobljene celice, ni pa nujno, da je tako.

Izdelajmo si novo prazno datoteko in jo shranimo v področje, kamor smo shranjevali ostale datoteke z imenom enote.html. Stran poimenujmo Osnovne fizikalne količine in enote. V mapi gradivo poiščimo datoteko enote.doc, jo odprimo in si v naš dokument prekopirajmo celotno besedilo datoteke.

s

Z vrivnikom se postavimo pred tekst Osnovne fizikalne količine ., in vstavimo tabelo. To storimo lahko na več načinov. V meniju Tabela izberemo ukaz Vstavi>Tabela. ali pa v vrstici za oblikovanje kliknemo gumb Tabela.

s

s

Vstaviti želimo tabelo z 8 vrsticami in 3 stolpci, kar vpišemo v polji Vrstice: in Stolpci: v področju oknu Vstavi tabelo v izbiri Natančno. Velikost tabele lahko podamo v pikah ali pa v odstotkih. Mi bomo vstavili tabelo velikosti 80 % širine strani, kar vpišemo v polje Širina:. To pomeni, da na strani tabela ne bo imela točno določene velikosti, ampak se bo prilagajala velikosti okna. Debelina obrobe tabele naj bo 1 piko, kar vpišemo v polje Okvir:.

s

s

V tabelo bomo vnesli podatke, ki so v našem dokumentu prikazani pod tabelo. To lahko storimo tako, da podatke v posamezno celico vpišemo, lahko pa besedilo posamezne celice tudi označimo in ga odvlečemo v tabelo v ustrezno celico. Če smo besedilo tipkali in se nam pojavlja še vedno pod tabelo, ga po vnosu vseh podatkov v tabelo izbrišemo.

s

Izbiranje elementov tabele

Če želimo tabeli spreminjati lastnosti jo moramo predhodno označiti. Označimo lahko tudi dele tabele, npr. vrstice, stolpce, celice. Označujemo lahko na več načinov. Lahko uporabimo meni ali označujemo z miško, zelo priročna pa je tudi uporaba izbiralnika značk v vrstici stanja.

Celotno tabelo izberemo z menijskim ukazom Tabela>Izberi>Tabela ali pa jo označimo z miško. Če se postavimo na tabelo in kliknemo v eno od celic, se nam v vrstici stanja programa Nvu pokažejo hierarhično urejene značke. Tabelo najlaže izberemo tako, da kliknemo na značko <table> v izbiralniku značk v vrstici stanja. Izbrana tabela ima ročice za spreminjanje velikosti.

s

Da bi izbrali celico, kliknemo vanjo. Če želimo označiti celico stisnemo tipko Ctrl in kliknemo celico. Celico lahko označimo tudi z menijskim ukazom Tabela>Izberi>Celica ali pa kliknemo na značko <td> v vrstici stanja. Celice lahko izberemo tudi tako, da najprej izberemo prvo celico, potem pritisnemo tipko Shift in po vrsti izbiramo še druge celice. Za izbiranje posameznih celic pa pritisnemo tipko Ctrl, z izbiranjem pa dodajamo celice k izbiri.

Vrstico tabele označimo tako, da se postavimo v vrstico in kliknemo na značko <tr> v izbiralniku značk v vrstici stanja,  ali pa jo označimo z miško, lahko pa izberemo tudi menijski ukaz Tabela>Izberi>Vrstica.

Izberimo tabelo in jo poravnajmo sredinsko. To storimo tako, da v vrstici za oblikovanje ob izbrani tabeli izberemo ukaz Poravnaj na sredino.

Dodajanje celic glave tabeli

Vsebina v celicah glave je oblikovana v krepki pisavi in poravnana na sredino. Če ima tabela na vrhu dodano vrstico glave, se značke celice tabele <TD> spremenijo v značke celice glave tabele <TH>. Celice glave lahko dodamo tudi na levem robu tabele kot glave vrstic. Označimo prvi stolpec in mu v oknu z Lastnostmi tabele dodelimo slog celic Glava.

Označimo prvo vrstico tabele in ji dodelimo slog celic Glava. To storimo tako, da v meniju Tabela izberemo ukaz Lastnosti tabele, kjer v izbiri Celice v rubriki Slog celic v meniju izberemo Glava. Vsebino celic v prvi vrstici poravnajmo tudi sredinsko.

s

s

V tabeli označimo celice pod stolpcema Osnovne merske enote in Oznaka in poravnajmo tekst v celicah sredinsko tako, da v oknu z lastnostmi kliknemo na gumb za sredinsko poravnavo.

s

Dodajanje in odstranjevanje vrstic in stolpcev

Ko želimo tabeli dodati vrstico, stolpec ali celico, to storimo tako, da v meniju Tabela izberemo ukaz Vstavi, zatem pa izberemo ustrezni ukaz.

s

Najpreprosteje pa elemente tabele vstavljamo oziroma brišemo z oznakami na robu izbrane celice. Trikotnik nam vstavi vrstico, stolpec ali celico v smeri kamor kaže, prečrtan krog pa izbrano vrstico, stolpec oziroma celico pobriše.

s

V našem primeru bomo pred prvo vrstico vrinili vrstico. To storimo tako, da kliknemo na trikotnik na levem delu celice, ki kaže navzgor.

s

Vstavljenim celicam dodelimo lastnost. Celice, ki smo jih vstavili bomo združili v eno samo celico. Izberemo zgornjo vrstico tabele, v meniju Tabela izberemo ukaz Združi izbrane celice. Ko združene celice želimo ponovno razdružiti, izberemo združeno celico in jo z menijem Tabela z ukazom Loči celico razdružimo.

s

V spojeno celico vpišemo tekst OSNOVNE FIZIKALNE KOLIČINE IN ENOTE in ga sredinsko poravnamo.

s

Spreminjanje širine stolpcev in višine vrstic

Višino vrstice in širino stolpca lahko spremenimo na več načinov in sicer tako, da vlečemo obrobe celic z miško ali pa v okno Lastnosti tabele v izbiri Celice v polji Višina in Širina vpišemo številčni vrednosti. Z miško širino oz. višino celice spreminjamo tako, da se postavimo na rob celice v ravnilu, da se kazalec spremeni v črto s puščicama, nato pa z vlečenjem prilagodimo širino oz. višino.

Nastavimo višino prve celice na 50 pik, tako da jo izberemo, nato pa v okno Lastnosti tabele v izbiri Celice v polju Višina vpišemo vrednost 50. Poleg tega nastavimo tudi širino drugega stolpca na 200 pik in širino tretjega stolpca na 100 pik.

s

Spreminjanje velikosti tabele, barve obrobe in barve ozadja tabele

Podobno kot smo spreminjali velikost celic, lahko spreminjamo tudi velikost celi tabeli. Označimo tabelo in z vlečenjem spreminjamo velikost celi tabeli. Če posameznim celicam nismo določili vrednosti za širino in višino, se bodo celice pri spreminjanju celotne tabele hkrati porazdelile v razmerju. Druga možnost pa je, da v polju za širino v oknu Lastnosti tabele v izbiri Tabela vpišemo vrednosti v slikovnih pikah ali pa v odstotkih.

V našem primeru bomo v tabeli spremenili barvo obrobe in ozadja:

  • nastavimo barvo obrobe tabele na modro barvo vrednosti #3399FF, to storimo tako, da v meniju Tabela izberemo ukaz Lastnosti tabele. Nvu nam ne omogoča elegantnega vnosa barve obrobe tabele. Zato bomo v izbiri Tabela izbrali možnost Napredno spreminjanje.

s

V oknu Napreden urejevalnik atributov v izbiri Atributi HTML vnesemo vrednosti v polje Atribut bordercolor, v polje Vrednost pa #3399FF.

s

  • barvo ozadja tabele spremenimo v svetlo rumeno #FFFFCC,
  • barvo ozadja prve vrstice na modro #3399FF,
  • tekstu celotne tabele spremenimo pisavo v Helvetica, Arial in nastavimo velikost prve vrstice na x-veliko, ostalega teksta pa na majhno,
  • barvo teksta naslovne vrstice v belo #FFFFFF.

s

Nastavitev polnila celice in razmika med celicami

  • Odmik - Polnilo celic - pomeni prazen prostor med predmetom v celici in obrobo celice
  • Razmik - Razmik med celicami - je količina prostora med celicami

V naši tabeli polnilo celic postavimo na 0 pik, celice pa razmaknimo za 5 pik. To storimo v meniju Tabela z ukazom Lastnosti tabele kjer v izbiri Tabela v polje Razmik vnesemo vrednost 5, v polje Odmik pa vrednost 0.

s

V prvem stolpcu odmaknimo tekst od levega roba, tako da bomo v vsaki vrstici pred tekst vstavili dva prazna prostora. Nvu nam v kodi HTML za prazen prostor vnese vrednost &nbsp;.

Oblikujmo še preostali dokument in sicer:

  • tekstu Osnovne fizikalne količine in enote spremenimo slog v Naslov 2, spremenimo mu slog pisave v Helvetica, Arial in ga obarvajmo modro #0000FF,
  • ostale tri odstavke teksta pa spremenimo v neurejen seznam,
  • dodamo barvo za ozadje spletne strani #EFEFEF.

s

Dokument shranimo in si ga oglejmo v brskalniku.

s

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

 

na vrh