1 / 16

Tabele

Tabele. Z izjemo ukaza </TABLE> preostali ukazi za tabele ne potrebujejo zaključka. Nič pa ne škodi, če ga kljub temu zapišemo. V spodnjem primeru je programska koda izpisana v sivi barvi, rezultat pa je spodaj: <HTML> <HEAD> <TITLE>Dobrodošli</TITLE> </HEAD> <BODY> <TABLE>

lirit
Download Presentation

Tabele

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tabele Z izjemo ukaza </TABLE> preostali ukazi za tabele ne potrebujejo zaključka. Nič pa ne škodi, če ga kljub temu zapišemo • V spodnjem primeru je programska koda izpisana v sivi barvi, rezultat pa je spodaj: • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE> • <TR><TD>Črna<TD>Bela • <TD><TD>Rdeča<TD>Modra • </TABLE> • </BODY> • </HTML> Črna Bela Rdeča Modra

  2. <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE> • <TR><TH>Vrsta sadja<TH>Količina • <TR><TD>Jabolka<TD>l.500 • <TR><TD>Hruške<TD>2.300 • <TR><TD>Slive<TD>3.200 • </TABLE> • </BODY> • </HTML>

  3. Črte med celicami • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER> • <TR><TH>Vrsta sadja<TH>Količina • <TR><TD>Jabolka<TD>l.500 • <TR><TD>Hruške<TD>2.300 • <TR><TD>Slive<TD>3.200 • </TABLE> • </BODY> • </HTML> Lastnost BORDER lahko definiramo tudi bolj natančno, tako da podamo debelino črte, izraženo v točkah. Ukaz <table border= " 5 " >, dobimo kar precej debele črte.

  4. Določanje lege tabel • Običajno so tabele poravnane na levi rob brskalnika. Vendar jih lahko premestimo tudi drugam, če nam to bolj ustreza. <HTML> <HEAD> <TITLE>Dobrodošli</TITLE> </HEAD> <BODY> <TABLE BORDER ALIGN="right"> <TR > <TH>Vrsta sadja<TH>Količina <TR > <TD>Jabolka<TD>l .500 <TR > <TD>Hruške<TD>2 .300 <TR > <TD>Slive<TD>3 .200 • </TABLE> • <P>Prosimo preberite si poročilo o količini obranega sadja za letošnjo sezono. • </BODY> • </HTML> Tabelo je moč poravnati tudi na sredino ali na desno. To naredimo z lastnostjo align ukaza table. Če torej zapišemo ALIGN="center" ali ALIGN="right" dobimo sredinsko oz. desno poravnano tabelo

  5. Širina in višina tabele • Širina tabele se navadno samodejno prilagaja vsebini celic. Vendar nas vseeno zanima, kako bi jo natančneje določili. Odgovor se skriva v lastnosti width ukaza <table>, kar pomeni, da velja širina za celotno tabelo. Če npr. zapišemo ukaz <table width= " 50%" >, celotna tabela zavzame polovico brskalnikovega okna. Tu gre torej za relativno velikost. Absolutna velikost, izraženo v točkah, zapišemo ukaz v naslednji obliki: <table width= "200" >. Rezultat je zdaj tabela širine 200 točk. • Lastnost width, s katero smo določili širino tabele, bi seveda lahko uporabili tudi pri ukazih za posamezne celice. Zadostuje, da določimo širino prve vrstice v tabeli. Lastnost height je torej moč uporabiti tudi v ukazih <th> in <td>. • V naslednjem primeru bomo v dve celici tabele vstavili sliko. Določili bomo širino in višino obeh celic. Vrednosti so absolutne, izražene v točkah. Uporabljena slika spider.gif je široka 250 točk in visoka 220 točk. • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER WIDTH="700"> • <TR><TD WIDTH="400" HEIGHT="2 00 " >Pa jki ! • <TD WIDTH="300“><IMG SRC="spider.gif"> • <TR><TD><IMG SRC= "spider.gif "> • <TD>Kako zabavno! • </TABLE> • </BODY> • </HTML>

  6. Določanje lege celic • Vrnimo se k tabeli s pajki in poskusimo odstraniti črte med celicami. Kako to naredimo? Tako, da odstranimo lastnost border! • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER WIDTH="700 " > • <TR VALIGN="top“><TD WIDTH="400" HEIGHT="200" >Pajki ! • <TD WIDTH="300" ALIGN="right"><IMG SRC="spider.gif"> • <TR><TD><IMG SRC="spider.gif" > • <TD ALIGN="right" VALIGN="bottom">Kako zabavno! • </TABLE> • </BODY> • </HTML>

  7. Vendar to še ne zadostuje. Zgornja tabela ima še nekaj pomanjkljivosti. Kot privzeto velja, da so slike in besedilo poravnani na levi rob celic, v navpični smeri pa so v sredini celice. Vendar to zlahka spremenimo, le prave lastnosti moramo uporabiti. Ugotovili smo že, da lastnost align določa vodoravno poravnavo. Na voljo imamo tri načine: levo (ALlGN="left"), sredinsko (align= "center") in desno (align= " right") Poleg tega pa se lahko odločimo tudi za navpično poravnavo posamezne celice (<th><td>) ali celotne vrstice tabele (<tr>). To naredimo z lastnostjo valign. Tudi tu so voljo tri možnosti: zgoraj (vALlGN="top" ), v sredini (VALIGN= "middle") in spodaj (VALIGN= "bottom" ).

  8. Robovi med celicami • Doslej z robovi med celicami nismo imeli težav. Z ukazom < table > smo uporabili lastnost border in s tern rešili vse. Teoretično tu ni nič narobe, vendar HTML 4 ponuja mnogo več možnosti. • Robove med celicali lahko določamo kar s petimi lastnostmi: border, frame, rules, cellpadding in cellspacing. Samo lastnost frame lahko zavzame 10 vrednosti, ki jih lahko uporabite. Kratek pregled lastnosti:

  9. V drugem zgledu izdelamo okvir s pomočjo novih lastnosti frame in rules: • <HTML> • <HEAD> • <TITLE>DobrodoŠli</TITLE> • </HEAD> • <BODY> • <TABLE FRAME="box" RULES="all"> • <TR><TH>Vrsta sadja<TH>Količina • <TR><TD>Jabolka<TD>l .500 • <TR><TD>Hruške<TD>2 .3 00 • <TR><TD>Slive<TD>3 .200 • </TABLE> • </BODY> • </HTML>

  10. Notranji in zunanju robovi • Na srečo sodobni, pa tudi starejši brskalniki pravilno prepoznajo lastnosti, kot sta CELLPADDING and CELLSPACING. Bi radi poskusili? Tu je primer: • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE FRAME="box" RULES="all" CELLPADDING="5"> • <TRxTH>Vrsta sadja<TH>Količina • <TRxTD>Jabolka<TD>l. 500 • <TRxTD>HruŠke<TD>2 .300 • <TRxTD>Slive<TD>3 .200 • </TABLE> • </BODY> • </HTML>

  11. Še lastnost CELLSPACING. Tu je razmik med posameznimi celicami določen v točkah. • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE FRAME="box" RULES="all" CELLSPACING="5"> • <TR><TH>Vrsta sadja<TH>Količina • <TR><TD>Jabolka<TD>l.500 • <TRxTD>Hruške<TD>2 .300 • <TRxTD>Slive<TD>3 .200 • </TABLE> • </BODY> • </HTML>

  12. Združevanje celic • Včasih potrebujemo celico, ki naj se razteza prek več stolpcev ali vrstic. To dosežemo tako, da ukazom <th> oz. <td> priredimo lastnosti colspan in rowspan. Kot vrednosti podamo število vrstic oz. stolpcev, preko katerih naj se celica razteza. Z ukazom <th colspan=2> npr. raztegnemo celico preko dveh stolpcev. Poskusite še sami. Rezultat najbolje opazite tedaj, ko so vidni robovi med celicami, kar dosežete z lastnostjo border. • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER> • <TR><TH COLSPAN="2">Pregled obiranja • <TRxTD>Jabolka<TD>l .500 • <TRxTD>Hruške<TD>2 .300 • <TRxTD>Slive<TD>3 .200 • </TABLE> • </BODY> • </HTML>

  13. <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER> • <TR><TH COLSPAN="2">Pregled obiranja • <TR><TD>Jabolka<TD>l. 500 • <TR><TD>Hruške<TD>2 .300 • <TR><TD>Slive<TD>3 .200 • <TR><TD>Češnje<TD ROWSPAN= "2 " >1 .200 • <TR><TD>Jagode • </TABLE> • </B0DY> • </HTML>

  14. Barve v tabeli • Barve v tabeli definiramo podobno kot barvo ozadja spletne strani, kjer smo v ukazu <body> uporabili lastnost BGCOLOR. Zapišemo torej ime barve (npr. yellow) ali pa njeno šestnajstiško kodo, npr. #008080. Ce npr. zapišemo ukaz <table bgcolor= "silver" >, dobimo tabelo, ki je v celoti obarvana v sivo. • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE BORDER BGCOLOR="silver"> • <TR><TH COLSPAN="2">Pregled obiranja • <TR><TD>Jabolka<TD>l .500 • <TR><TD>Hruške<TD>2 .300 • <TR><TD>Slive<TD>3 .200 • <TR><TD>ČeŠnje<TD ROWSPAN="2 ">1. 200 • <TR><TD>Jagode • </TABLE> • </BODY> • </HTML>

  15. Zdaj pa k posameznim celicam, ki jih prav tako ni težko obarvati. V ukaz za vrstico oz. celico zgolj zapišemo lastnost bgcolor in izberemo ustrezno barvo. Učinek je še posebej opazen, kadar izklopimo prikaz robov med celicami tabele. • <HTML> • <HEAD> • <TITLE>Dobrodošli</TITLE> • </HEAD> • <BODY> • <TABLE> • <TR BGCOLOR="yellow"> • <TH COLSPAN="2">Pregled obiranja • <TR><TD BGCOLOR= "white">Jabolka<TD BGCOLOR="aqua" >1.500 • <TR><TD BGCOLOR= "white">Hruške<TD BGCOLOR= "aqua" >2.300 • <TR><TD BGCOLOR= "white ">Slive<TD BGCOLOR= "aqua" >3.200 • <TR><TD BGCOLOR="white">Češnje<TD BGCOLOR="aqua"ROWSPAN="2">1.200 • <TR><TD BGCOLOR= "white">Jagode • </TABLE> • </BODY> • </HTML>

More Related