Tablice u HTML-u toliko su funkcionalne da ih možete koristiti za raspored cijelih web stranica (čitaj). Sada ćemo govoriti o umetanju jednostavnih HTML tablica u web stranicu, analizirajući samo oznake, ali ne dirajući dizajn, jer je bolje dekorirati tablice koristeći CSS stilove.

Oznake i atributi tablice

Evo osnovnih elemenata koji su vam potrebni za izradu tablica:

• - posuda unutar koje se nalazi stol (isto što
  za označene ili
  za numerirane liste).
  1. granica- atribut koji određuje debljinu okvira. Bolje je umjesto toga koristiti CSS svojstvo border.
  .

  Drugo, ovaj kôd u određenim slučajevima možda neće raditi kako se očekuje. Prilikom klika na gumb podnijeti obrazac se ne može predati.

  Upravo sam se s takvom situacijom susreo tijekom svog rada. Obrazac je postavljen unutar crte

  . Sve je radilo - odlično. Vrijedi, ne vrijedi, nisam razumio. Ali poanta je u tome da u ovaj stol rezultati pretraživanja prikazani su korištenjem ajax tehnologije, tj. bez ponovnog učitavanja cijele stranice. Podaci se unose u traku za pretraživanje, a pronađeni rezultati se prikazuju u tablici, a ažurira se samo sadržaj tablice. Dakle, kada je tablica učitana nakon ajax zahtjeva, tada podnijeti obrasce, ugrađen u tablicu na tako neispravan način, prestao je raditi.

  Za postavljanje obrasca u tablicu predlažem korištenje sljedeće metode.

  Deklarirajte obrazac prije tablice i svakako mu dodijelite neku vrstu ID-a (u mom primjeru, id=”myform”). Postavite unos unutar tablice gdje ste planirali, ali U svakom unosu morate dodati atribut form=”myform”, čija će vrijednost pokazati kojem obliku ovaj element pripada.

  Za naš primjer, kod će se promijeniti ovako:

  specificira signaturu tablice. Ne morate koristiti spremnik, ali ako se ipak odlučite nasloviti tablicu, postavite ga odmah nakon oznake , izvan ćelija i redaka.

  - uparena oznaka, koji sadrži redak tablice (ćelije koje se nalaze na istoj razini vodoravno).

  , u njemu će biti toliko ćelija: jedna oznaka - jedna ćelija.

  omogućuje grupiranje stupaca, brzo i bez začepljenja koda, dodijelite ih Opće karakteristike. Pomoću spremnika možete odvojiti logičke dijelove tablice jedan od drugog. Postavljeno nakon oznake

  , ako ga nema, onda poslije .

  koristi za istu svrhu kao . može sadržavati , ali ne obrnuto.

  raspon- atribut koji određuje broj stupaca na koje se primjenjuju svojstva spremnika

  .

  , I - spremnici koji vam omogućuju da tablicu podijelite na gornji (naslovi), glavni (tijelo) i donji (završni) dio, redom. U HTML tablici redoslijed ovih oznaka isti je kao i redoslijed spremnika , I

  Alati za izradu web stranice

  Svrha	Alat
Obilježava	HTML	XHTML
Dekor	CSS
Razvoj	PHP	Piton

  U pregledniku će dokument izgledati ovako:

  Idemo otkriti koje su linije koda odgovorne za što.

  • - otvori stol, dajući mu debljinu okvira.
    - naslovili su ga.
    - otvorila je liniju.
    - stvorio ćeliju s dizajnom zaglavlja.
    - stvorio drugu ćeliju zaglavlja u retku. Parametar colspan naznačio je da bi ova ćelija trebala obuhvaćati dvije vodoravne ćelije.
    - zatvorio liniju. Preostale linije su stvorene na isti način.
    - dodan je drugi redak tablice s običnim ćelijama umjesto zaglavlja. Sljedeći redovi i ćelije umetnuti su na sličan način.

    Alati za izradu web stranice

    Svrha	Alat
  Obilježava	HTML	XHTML

    - zatvori stol.

  Dobar dan

  Ponekad se dogodi situacija kada trebate smjestiti html obrazac unutar html tablice.

  Na primjer, postoji tablica s nekim podacima, au prvom redu te tablice želimo smjestiti ulaze za unos i dodavanje novih informacija.

  Najvjerojatnije će prvi kod koji o tome napišete biti:

  - oznaka koja stvara ćeliju zaglavlja tablice. Izvana se njegov sadržaj razlikuje od sadržaja u drugim ćelijama - obično tekst unutar	Preglednik ga označava podebljanim i postavlja u središte.	- spremnik s kojim se stvara jednostavna ćelija. Koliko će takvih oznaka sadržavati linija (tag

  < tr > < form method = "post" action = "" > < td > < input type = "text" name = "first_name" / > < / td > < td > < input type = "text" name = "second_name" / > < / td > < td > < input type = "submit" name = "add" / > < / td > < / form > < / tr >

  Ovo je pogrešna opcija!

  Prvo, ovaj kod nije valjan. Oblik ne može biti izravno dijete stol, tijelo I tr . Istina, može se nalaziti unutar zasebne ćelije tablice, odnosno između oznaka

  < form method = "post" id = "myform" > < / form > < table > < tr > < td > < input type = "text" name = "first_name" form = "myform" > < / td > < td > / > < / td > < / tr > < / table >

  Ova opcija za postavljanje elemenata obrasca unutar tablice valjana je i, što je najvažnije, trebala bi raditi u svakoj situaciji.

  U mom slučaju, nakon ajax zahtjeva, slanje obrasca je uspjelo! Isto želim i tebi!

  Usput, nikad se prije nisam susreo s tim atribut oblika. Iako se web programiranjem bavim dosta dugo. Očigledno, takvi zadaci nisu naišli. No, obratite pozornost na to koliko je predviđeno i uzeto u obzir u razvojnim jezicima. Vjerojatno možete riješiti bilo koji problem i pronaći izlaz iz svake situacije.

  Želim vam da se greške brzo prepoznaju i isprave!

  Oznake HTML tablice izvorno su bile namijenjene predstavljanju redaka i stupaca tabelarnih podataka. Međutim, dizajneri su ih naučili koristiti za manipuliranje izgledom web-stranica: stvaranje stupaca teksta, postavljanje razmaka između elemenata i mijenjanje izgleda teksta na načine na koje druge HTML oznake za oblikovanje ne mogu.

  Tablice u HTML-u uvijek su pravokutne i sastoje se od redaka, koji se pak sastoje od ćelija. Sve jezične konstrukcije koje opisuju komponente tablice koja se stvara nalaze se između oznaka

  I.

  Tablica se popunjava red po red; par oznaka se koristi za označavanje niza .... Redak se sastoji od ćelija koje su specificirane korištenjem bilo koje oznake ..., ako te ćelije sadrže zaglavlja stupaca ili oznake .... Naslovi su prikazani podebljanim fontom i nalaze se u sredini ćelije. Podaci su u normalnom fontu i poravnati na lijevu stranu ćelije. Oznake se koriste za postavljanje naslova cijele tablice I.

  Primjer

  Naslov tablice

  Naslov 1Naslov 2

  Ćelija 1Ćelija 2

  Ćelija 3Ćelija 4

  

  Prisutnost podataka u ćelijama nije potrebna. Dva su načina za stvaranje prazne ćelije: nemojte ničime puniti njen spremnik ( ), ili u nju postavite znak neprekinutog razmaka, određen posebnim nizom znakova -- (tj. stvorite ćeliju kao ).

  Nema potrebe posebno stvarati prazne ćelije ako planirate da sve preostale ćelije u retku neće biti popunjene. Od oznake signalizira početak novog retka, preglednik će automatski dodati prazne ćelije.

  Osnovni atributi oznake

  Dodjeljivanje osnovnih atributa oznake

  a vrijednosti koje mogu poprimiti navedene su u tablici.

  Atribut	Svrha
  	Definira širinu ruba tablice (u pikselima), na primjer, BORDER=1; vrijednost nula znači da nema okvira
  	Definira širinu cijele tablice u pikselima ili kao postotak širine prozora preglednika
  	Definira visinu cijele tablice u pikselima ili kao postotak visine prozora preglednika
  	Postavlja horizontalno poravnanje tablice u prozoru preglednika; ima vrijednosti lijevo, središte i desno (zadano je lijevo)
  	Dodaje slobodan prostor između podataka unutar ćelije i njezinih granica; zadana vrijednost je 2
  	Dodaje slobodan prostor između ćelija unutar cijele tablice; zadana vrijednost je 2
  	Određuje područja slobodnog prostora određene širine (u pikselima) lijevo i desno od tablice
  	Određuje područja slobodnog prostora zadane visine (u pikselima) iznad i ispod tablice
  BGCOLOR=boja	Postavlja boju pozadine cijele tablice
  	Označava pozadinska slika za tablicu, gdje je URL izvorna adresa (naziv slikovne datoteke)

  Primjer Promijenimo sadržaj dokumenta kreiranog u prethodnom primjeru dodavanjem atributa BORDER i ALIGN u oznaku

  :

  Sada će ćelije tablice biti uokvirene, a tablica će biti poravnata u sredini prozora preglednika.

  

  09.11.2015

  
  

  Bok svima!
  Nastavimo učiti osnove HTML-a. U ovoj lekciji ću vam reći i pokazati primjere kako napraviti tablicu u HTML-u. Također ćemo pogledati kako možete postaviti boju ćelija tablice, kako centrirati tablicu, naučiti kako napraviti obrub tablice itd.
  HTML tablice često se koriste u HTML-u za popis nekih informacija. Prethodno su se tablice koristile za izradu okvira web stranica:

  

  ...ali to je već prošlost, danas ih ima više učinkovite načine stvaranje okvira za web stranicu s . Često koristim tablicu na svom blogu ili web stranici, na primjer, kao u .

  Mislim da razumijete zašto morate naučiti kako napraviti tablicu.

  Od kojih se glavnih oznaka sastoji tablica?

  ○ oznaka STOL
  To je glavni spremnik za stvaranje tablice, koja sadrži druge elemente tablice kao što su stupci i reci.
  Završna oznaka je obavezna.

  ○ oznaka TR

  Unutar kontejnera

  …… postavljaju se redovi:

  Stupci se stvaraju pomoću oznake .
  Završna oznaka je obavezna.

  Pažnja: Nemoguće je kreirati tablicu bez korištenja svih ovih oznaka.

  Pokušajmo sada upotrijebiti teoriju i izraditi tablicu u praksi.

  Vježba: stvoriti tablicu od jednog retka s tri stupca.

  red -1 / stupac 1

  stupac 2

  stupac 3

  Vježba: stvoriti tablicu od tri retka i tri stupca.

  red -1 / stupac 1	stupac 2	stupac 3
  red -2 ​​/ stupac 1	stupac 2	stupac 3
  red -3 / stupac 1	stupac 2	stupac 3

  Je li ti do sada sve jasno? Kome nije jasno neka digne ruku! Da, svi razumijemo, pa idemo dalje.

  Sada pogledajmo atribute za tablicu.

  *Svojstva

  ○ Granice tablice u HTML-u

  Da bi tablica bila vidljiva, idite na oznaku

  primjenjuje se atribut "granica» .
  

  Ako vrijednost atributa « granica» “0”, granica neće biti vidljiva osim ako se ne doda u oznaku

  atribut "granica", granica u tablici također neće biti vidljiva.

  red -1 / stupac 1

  stupac 2

  stupac 3

  
  
  

  Proizlaziti:

  Pokušajte promijeniti vrijednost u atributu "granica" na "10" .

  ○Kako spojiti ćelije u tablici

  Za kombiniranje ćelija u tablici koristite atribute "colspan" i "rowspan" u oznaku < td> .

  • colspan - vodoravno spajanje ćelija;
  • rowspan - okomito spajanje ćelija.

  U vrijednostima označite koliko ćelija želite spojiti.

  redak 1 stupac 1
  redak 2 stupac 1	redak 2 stupac 2

  Proizlaziti:

  redak 1 stupac 1	redak 1 stupac 2
  	redak 2 stupac 1

  Proizlaziti:

  Složeniji primjer:

  red -1 / stupac 1	stupac 2			stupac 3
  red -2 ​​/ stupac 1	stupac 2	stupac 3	stupac 4

  
  
  

  Proizlaziti:

  ○ Kako povećati razmak između ćelija tablice

  Da biste povećali udaljenost između teksta i ruba ćelije, dodajte atribut "ispuna ćelija" označiti

  U vrijednostima atributa "cellpadding" navedite udaljenost uvlake

  redak 1 stupac 1

  stupac 2

  Proizlaziti:

  Za povećanje udaljenosti između ćelija u tablici upotrijebite atribut "razmak među ćelijama" označiti

  U vrijednostima atributa "razmak među ćelijama" odrediti udaljenost između ćelija

  redak 1 stupac 1

  stupac 2

  Proizlaziti:

  ○ Kako napraviti pozadinu HTML tablice

  Za izradu pozadine HTML tablice koristite oznaku to

  I

  sljedeće atribute: BGCOLOR – boja pozadine za cijelu tablicu ili za svaku ćeliju pojedinačno. Boja se određuje kodom ili riječju. POZADINA – pozadina u tablici je ispunjena slikom. red -1 / stupac 1 stupac 2 stupac 3 red -2 ​​/ stupac 1 stupac 2 stupac 3 stupac 4 Proizlaziti: ○ Kako umetnuti sliku u HTML tablicu Za umetanje slike u HTML tablicu, između oznake

  umetni oznaku .

  redak 1 ćelija 1

  ćelija 2

  Proizlaziti:

  Vrijednosti su navedene u pikselima (px) ili postocima (%)

  ○ Usklađivanje sadržaja u HTML tablici

  Za poravnavanje sadržaja u HTML tablici upotrijebite oznaku to atribut "uskladiti" I "valign" :

  USKLADITI– vodoravno poravnanje sadržaja u tablici.
  Vrijednosti:

  • lijevo - gurnite sadržaj na lijevu stranu (zadano);
  • centar – instalirajte u središte;
  • pravo - gurnite sadržaj na desnu stranu

  VALIGN– okomito poravnanje sadržaja u tablici.
  Vrijednosti:

  • vrh – pritisnite sadržaj na vrh;
  • dno – pritisnite sadržaj na dno;
  • sredini – postavite sadržaj u sredinu
  tekst

  zadana ćelija	Poravnajte sadržaj vodoravno uz desni rub, okomito - pritisnite ga na dno
  Poravnajte sadržaj vodoravno uz lijevi rub, okomito - pritisnite ga na vrh	Poravnajte sadržaj vodoravno u sredini, okomito - pritisnite ih u sredini

  Proizlaziti:

  ○ Kako centrirati HTML tablicu

  Da biste centrirali stol, trebate ga omotati oznakom

  :
  Šifra tablice

  red -1 / stupac 1

  stupac 2

  stupac 3

  Dodatne i glavne oznake za tablicu

  Stol za web stranicu

  Naslov 1	Naslov 2
  1	2

  Proizlaziti:

  Sada smo gotovi sa stolovima. Sada možete sami izraditi tablicu bilo koje složenosti. Prikvači ovu lekciju. Pokušajte sami izraditi bilo koju tablicu.
  Veselim se što ću vas vidjeti na sljedećoj lekciji. Pretplatite se na ažuriranja mog bloga.

  Prethodni post
  Sljedeći unos
  

  Poglavlje 4

  Tablice u HTML-u

  Jedna od najmoćnijih i najčešće korištenih značajki u HTML-u su tablice. Koncept tabličnog prikaza podataka ne treba dodatno objašnjavati. U HTML tablice koriste se ne samo tradicionalno kao metoda predstavljanja podataka, već i kao sredstvo za oblikovanje web stranica. Navedimo primjere dokumenata iz stvarnog života u kojima je tablični prikaz prikladan način za konstruiranje dokumenta. Na sl. Slika 4.1 prikazuje tipičan primjer korištenja tablica za prikaz numeričkih podataka podijeljenih u retke i stupce. Na sl. 4.2 upotreba tablice služi samo u svrhu oblikovanja dokumenta i određivanja relativnog položaja elemenata stranice. Kada pregledavate takav dokument, nije odmah vidljivo da se za njegovu konstrukciju koristi tablica, budući da okviri oko njegovih ćelija nisu nacrtani.

  Prva verzija HTML jezik nije pružao posebne alate za prikaz tablica, jer je uglavnom bio namijenjen pisanju jednostavnog teksta. S razvojem područja primjene HTML dokumenata, zadatak prezentiranja podataka, koji se obično predstavljaju nizom redaka i stupaca, postao je hitan. Izrada dokumenata koji su sadržavali podatke usklađene u stupce u početku se odvijala pomoću unaprijed formatiranog teksta, unutar kojeg je potrebno poravnanje osigurano uvođenjem potrebnog broja razmaka. Podsjetimo se da je tekst unutar para oznaka

  I

  pojavljuje se monospace fontom, a svi razmaci i tabulatori su značajni. Posao usklađivanja takvog teksta obavljao se ručno, što je značajno usporavalo izradu dokumenata. Podrška za tabelarnu prezentaciju podataka postala je de facto standard budući da je inicijalno implementirana u svim vodećim preglednicima, a tek nakon dužeg vremena ugrađena je u HTML 3.2 specifikaciju.

  Posebni alati za izradu tablica, međutim, ne isključuju mogućnost korištenja prethodno oblikovanog teksta. Upotreba tablica nije ograničena na podatke koji se sastoje od redaka i stupaca. Jedna primjena je organiziranje rasporeda različitih podataka na stranici, koji se mogu sastojati od jednostavnog teksta, slika, drugih tablica itd. Ovo poglavlje posvećeno je pravilima za izradu tablica i primjerima njihove upotrebe.

  

  Riža . 4.1. Primjer tipične HTML tablice

  
  

  Riža . 4.2. Primjer tablice bez obruba

  Izrada jednostavnih HTML tablica

  Prvo razmotrimo minimalni skup oznaka i njihovih parametara, potrebnih i dovoljnih za izradu jednostavnih tablica, a zatim prijeđimo na njihov detaljan opis.

  Opisi tablica trebaju se nalaziti unutar dijela dokumenta . Dokument može sadržavati proizvoljan broj tablica, a dopušteno je ugniježđivanje tablica jedne u drugu. Svaka tablica mora započeti oznakom

  i završava s oznakom. Unutar ovog para oznaka nalazi se opis sadržaja tablice. Svaka se tablica sastoji od jednog ili više redaka, od kojih svaki sadrži podatke za pojedinačne ćelije.

  Svaki red počinje oznakom (redak tablice) i završava oznakom. Jedna ćelija u nizu uokvirena je parom oznaka I(Podaci tablice) ili I(Zaglavlje tablice). Označiti obično se koristi za ćelije zaglavlja tablice i - za podatkovne ćelije. Razlika u korištenju je samo vrsta fonta koja se prema zadanim postavkama koristi za prikaz sadržaja ćelija, kao i položaj podataka unutar ćelije. Sadržaj ćelija vrste prikazan je podebljanim fontom i nalazi se u sredini (ALIGN=CENTER, VALIGN=MIDDLE). Ćelije definirane oznakom prema zadanim postavkama prikazuje podatke poravnate lijevo (ALIGN=LEFT) i sredinu (VALIG=MIDDLE) u okomitom smjeru.

  Oznake I ne može se pojaviti izvan opisa reda tablice . Kodovi završetka, I može se izostaviti. U ovom slučaju, kraj opisa retka ili ćelije je početak sljedećeg retka ili ćelije, odnosno kraj tablice. Oznaka krajnje tablice ne može se izostaviti.

  Broj redaka u tablici određen je brojem početnih oznaka , a broj stupaca je najveći broj ili među svim redovima. Neke ćelije možda neće sadržavati nikakve podatke; takve ćelije su opisane parom oznaka koje slijede u nizu - , . Ako jedna ili više ćelija koje se nalaze na kraju reda ne sadrže podatke, tada se njihov opis može izostaviti, a preglednik će automatski dodati potreban broj praznih ćelija. Iz toga proizlazi da nije dopuštena izrada tablica u kojima se u različitim recima nalazi različit broj stupaca iste veličine.

  Tablica može imati zaglavlje koje se sastoji od nekoliko oznaka I. Opis zaglavlja tablice trebao bi se nalaziti unutar oznaka

  I bilo gdje, ali izvan područja opisa bilo koje oznake , ili . Prema specifikaciji HTML jezika, lokacija opisa zaglavlja je strože regulirana: mora se nalaziti odmah nakon oznake i do prvog . Preporučujemo da se pridržavate ovog pravila.

  Prema zadanim postavkama, tekst naslova tablice postavljen je iznad nje (ALIGN=TOP) i centriran vodoravno.

  Navedene oznake mogu imati parametre čiji se broj i vrijednosti razlikuju. Međutim, u najjednostavnijem slučaju, oznake se koriste bez parametara, koji imaju zadane vrijednosti.

  Ovi podaci su sasvim dovoljni za izradu elementarnih tablica. Navedimo primjer jednostavne tablice koja se sastoji od dva reda i dva stupca, čiji je prikaz prikazan na sl. 4.3.

  Ćelija 1 redak 1	Ćelija 2 redak 1
  Ćelija 1 redak 2	Ćelija 2, red 2

  
  

  Riža. 4.Z. Primjer jednostavne tablice

  Prikaz tablica na stranici

  Pogledajmo svrhu raznih parametara koji se mogu koristiti u oznakama koje opisuju tablice.

  Naslov tablice

  Oznaka zaglavlja tablice ima jedan važeći parametar ALIGN, koji uzima vrijednosti TOP (zaglavlje iznad tablice) ili BOTTOM (zaglavlje ispod tablice). Parametar ALIGN se može izostaviti, što odgovara vrijednosti ALIGN=TOP. U vodoravnom smjeru, zaglavlje tablice uvijek se nalazi u središtu tablice. Tablica možda nema zaglavlje. U većini slučajeva kao naslov tablice koristi se običan tekst, što je regulirano HTML specifikacijom, ali u stvarnosti između oznaka I prihvatljivo je napisati bilo koji HTML element koji se koristi u odjeljku . Evo primjera unosa zaglavlja tablice:

  Naslov koji se nalazi na dnu tablice

  Ako se ovaj opis zaglavlja doda gornjem primjeru, tablica će se prikazati kao što je prikazano na sl. 4.4.

  
  

  Riža. 4.4. Tablica sa zaglavljem

  Microsoftov preglednik Internet Explorer pruža dodatne mogućnosti za odabir položaja zaglavlja. Parametar ALIGN prihvaća vrijednosti LIJEVO, SREDIŠNJE i DESNO za horizontalno poravnanje, zajedno s gore opisanim vrijednostima. Imajte na umu da je ovo jedan od rijetkih slučajeva gdje se naširoko korišten parametar ALIGN može koristiti i za vodoravno i za okomito poravnanje. Na primjer, pisanje ALIGN=RIGHT osigurat će da je zaglavlje postavljeno u ravnini s desnom stranom i postavljeno iznad tablice. Ako napišete ALIGN=BOTTOM, tada će se, baš kao u gornjem primjeru, zaglavlje nalaziti ispod tablice. Međutim, korištenje parametra ALIGN dva puta u istom zaglavlju nije dopušteno. Stoga je dodatno uveden poseban parametar za okomito poravnanje - VALIGN, koji ima vrijednosti TOP ili BOTTOM. Na primjer, za naslov koji se nalazi na dnu lijevo poravnate tablice, opis izgleda ovako:

  Naslov postavljen na dno, poravnat ulijevo

  Tablica s ovim opisom zaglavlja u Microsoft Internet Exploreru bit će prikazana na sljedeći način (Slika 4.5). Ako se ovaj primjer gleda u Netscapeu, zaglavlje će biti postavljeno prema zadanim postavkama, tj. iznad tablice i u sredini u vodoravnom smjeru.

  
  

  Riža. 4.5. Horizontalno poravnanje zaglavlja tablice u Microsoft Internet Exploreru

  Mogućnosti vodoravnog poravnanja zaglavlja tablice proširenje su HTML specifikacije i preglednik Netscape Navigator ih ne podržava i stoga ih treba koristiti samo kada je to apsolutno neophodno.

  Opcije oznake

  Glavna oznaka koja se koristi pri izradi tablica je oznaka

  . Može se koristiti s nizom parametara od kojih se svaki može izostaviti. Kit prihvatljivi parametri ovisi o pregledniku. Prema HTML specifikaciji u oznaci Mogu se koristiti sljedeći parametri: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Preglednici NetScape i Microsoft Internet Explorer omogućuju korištenje, uz pet gore navedenih parametara, Parametri VISINE i BGCOLOR. Neki vam preglednici također omogućuju postavljanje drugih opcija. Razmotrimo svrhu često korištenih parametara oznake .

  BORDER parametar

  Parametar BORDER kontrolira izgled obruba oko svake ćelije, što je u biti linija mreže tablice, i oko cijele tablice. Prema zadanim postavkama, okviri nisu nacrtani, a korisnik će vidjeti samo ravnomjerno raspoređeni tekst ćelija tablice na ekranu. Postoje mnoge situacije kada je uporaba tablica bez okvira sasvim opravdana, na primjer, za popise s više stupaca implementirane pomoću tablica ili za određivanje točnog relativnog položaja slika i teksta. Međutim, u većini slučajeva, za tradicionalnu upotrebu tablice, korisno je odvojiti njezine ćelije jednu od druge crtama mreže, što čini informacije sadržane u tablici lakšim za percipiranje i razumijevanje.

  Da biste dodali okvire u tablicu, morate uključiti u kod

  Parametar BORDER, koji može imati numeričku vrijednost.

  Na primjer,

  ili .

  Numerička vrijednost parametra određuje debljinu obruba u pikselima koji se iscrtava oko cijele tablice, ali ta vrijednost ne utječe na debljinu obruba oko svake ćelije. Ako nema numeričke vrijednosti, obično se pretpostavlja da je minimalna vrijednost (1), iako se stil prikaza obruba može razlikovati među preglednicima. Ne postoji mogućnost samostalnog upravljanja prikazom obruba oko cijele tablice i obruba oko ćelija.

  Primjer tablice s okvirom debljine 10 piksela prikazan je na sl. 4.6.

  
  

  Riža. 4.6. Tablica s rubom od 10 piksela

  Specifikacija HTML 3.0 nije uključivala vrijednost za parametar BORDER. Ovo se radi samo u HTML 3.2. Dakle, posebno rano Microsoftove verzije Internet Explorer nije dopuštao postavljanje numeričke vrijednosti.

  Imajte na umu da ako nema parametra BORDER okviri nisu iscrtane, ali je za njih ostavljen prostor (ovo se odnosi samo na Netscape). Ukupna veličina tablice ne mijenja se u odsutnosti ili prisutnosti BORDER parametra (iznimka je kada je BORDER=0 naveden). Tako, minimalna udaljenost između dvije susjedne ćelije u tim će slučajevima biti jednak dvostrukoj debljini okvira, tj. dva piksela. Moguće je postaviti ćelije što bliže jednu drugoj postavljanjem BORDER=0, što znači bez okvira. Neki preglednici možda neće podržavati postavljanje parametra BORDER na numeričku vrijednost, u kojem će slučaju vrijednost nula biti zanemarena, a tablica će biti iscrtana s granicama.

  Evo nekoliko primjera:

  Sva tri gore navedena primjera će Netscape preglednik prikazati drugačije. Imajte na umu da je ovo prilično jedinstven slučaj kada ne možemo govoriti o zadanoj vrijednosti. Treći primjer, u kojem je parametar BORDER izostavljen, razlikuje se od svih primjera u kojima je ovaj parametar prisutan. Za Microsoft Internet Explorer, drugi i treći primjer su identični, tako da je za taj preglednik zadana vrijednost za parametar BORDER nula.

  Parametar CELLSPACING

  Forma za pisanje parametra: CELLSPACING=num, gdje je num brojčana vrijednost parametra u pikselima, koja se ne može izostaviti. Vrijednost num određuje udaljenost između susjednih ćelija (točnije, između okvira ćelija) horizontalno i vertikalno. Zadana vrijednost postavljena je na dva. Imajte na umu da tradicionalno u izdavačkim sustavima, susjedne ćelije tablice imaju zajedničku granicu. U HTML tablicama se standardno ostavlja razmak između njih, kao što se jasno vidi na gornjoj slici (Slika 4.6). Kada postavite CELLSPACING=0, okviri susjednih ćelija će se spojiti i stvoriti dojam jedne mreže tablice (slika 4.7).

  
  

  Riža. 4.7. Tablica s vrijednošću CELLSPACING=0

  Parametar CELLPADDING

  Oblik snimanja parametra sličan je CELLSPACING-u. Vrijednost num određuje količinu slobodnog prostora (margine) između okvira ćelije i podataka unutar ćelije. Prema zadanim postavkama, vrijednost je postavljena na jedan. Postavljanje CELLPADDING na nulu može uzrokovati da dio teksta ćelije dodiruje obrub ćelije, što nije baš estetski ugodno.

  Na sl. Slika 4.8 prikazuje primjer tablice s vrijednošću CELLPADDING=10.

  
  

  Riža. 4.8. Tablica s vrijednošću CELLPADDING=10

  Učinak parametara CELLPADDING i CELLSPACING vrlo je sličan jedan drugome. Za tablicu bez granica, promjena jednog ili drugog parametra dovodi do istog rezultata. Oba parametra utječu na odgovarajuće uvlake istovremeno vodoravno i okomito. Nažalost, odvojena kontrola vodoravne i okomite uvlake na način kako se radi npr. za uvlake sa slika (parametri HSPACE i VSPACE oznake ), nije osigurano.

  Sva tri parametra - BORDER, CELLPADDING i CELLSPACING djeluju neovisno jedan o drugom; ako je bilo koji od njih izostavljen, uzima se njegova zadana vrijednost. Konkretno, ako su svi navedeni parametri izostavljeni, tada će minimalni razmak između podataka iz susjednih ćelija biti 6 piksela (za Netscape). Ova vrijednost je zbroj dva piksela za CELLSPACING, jednog piksela za CELLPADDING i jednog piksela za obrub svake ćelije. Najkompaktnija tablica dobit će se navođenjem sljedećeg opisa:

  Samo u ovoj verziji ćelije će biti smještene blizu jedna drugoj. Primjer upotrebe bila bi tablica čije ćelije sadrže slike iste veličine koje je potrebno postaviti jednu pored druge.

  Parametri WIDTH i HEIGHT

  Prilikom prikaza tablica, njihovu širinu i visinu automatski izračunava preglednik i ovise o mnogim čimbenicima: vrijednostima parametara navedenih u opisu cijelog dokumenta, ove tablice, njenih pojedinačnih redaka i ćelija, sadržaja ćelija , kao i parametri navedeni prilikom pregledavanja dokumenta u određenom pregledniku, na primjer, vrsta i veličina fonta, veličina prozora za gledanje, itd. Kada se prikažu, veličine tablice izračunavaju se automatski uzimajući u obzir te čimbenike i pokušava se predstaviti stol u najprikladnijem obliku - urediti stol tako da stane u prozor za gledanje. Opća shema pregledavanje velikih dokumenata u pravilu se svodi na linearno okomito listanje sadržaja dokumenta i čitanje teksta prošaranog raznim tablicama, slikama i sl. To se odnosi kako na HTML dokumente tako i na obične dokumente izrađene u bilo kojem uređivaču teksta. Većina su oba uređivača teksta (na primjer, Microsoft Word), a HTML preglednici automatski formatiraju tekst tako (ako je moguće) da duljina redaka ne prelazi širinu prozora za gledanje. Time se izbjegava potreba za vodoravnim pomicanjem u dokumentu. Preglednici poduzimaju slične radnje s tablicama - ako je moguće, formatirajte ih na takav način da širina tablice ne prelazi širinu prozora za gledanje. Možemo zaključiti da je širina tablica važniji, primarni parametar, čiji se izračun prvo provodi u usporedbi s visinom.

  U većini slučajeva dinamičko dimenzioniranje tablice rezultira estetski proporcionalnom slikom koja učinkovito iskorištava stvarno područje prozora. Međutim, možda će biti potrebno prisilno navesti širinu ili visinu tablice. U tu svrhu koriste se parametri oznake WIDTH (širina tablice) i HEIGHT (visina tablice).

  . Oblik zapisa: WIDTH=num ili WIDTH=num%, gdje je num brojčana vrijednost širine cijele tablice u pikselima ili kao postotak ukupne veličine prozora. Imajte na umu da je prihvatljivo postaviti vrijednosti veće od 100%, iako je teško zamisliti slučaj u kojem bi to bilo potrebno. Primjer:
  .

  Slični parametri mogu se postaviti za pojedinačne ćelije. Imajte na umu da postavljanje određene vrijednosti parametra, na primjer WIDTH=200, ne znači da će tablica u svakom slučaju imati navedenu širinu, već samo određuje preporučenu širinu, koja će se održavati kad god je to moguće. Objasnimo to primjerima. Neka postoji tablica koja bi pod tim uvjetima prema zadanim postavkama imala širinu manju od navedene. U tom će slučaju preglednik povećati širinu tablice na potrebnu proporcionalno širenjem svih stupaca tablice. Ako suzite okvir za prikaz, širina tablice se neće promijeniti i možda ćete se morati pomicati vodoravno da biste je vidjeli. Ako zadana tablica ima širinu veću od navedene, tada će preglednik pokušati smanjiti njezinu širinu tako što će, prvo, smanjiti širinu pojedinačnih stupaca za koje je navedena širina veća od potrebne, i drugo, dijeljenjem teksta u pojedinačne ćelije u nekoliko redaka s povećanjem visine tablice. Ove radnje možda neće pružiti potrebnu veličinu tablice, u kojem će slučaju imati minimalnu moguću širinu. Iste radnje se poduzimaju za tablice koje nemaju navedene veličine prilikom sužavanja okvira za prikaz.

  Specifični algoritmi za postavljanje tablica za različite preglednike mogu se malo razlikovati.

  ALIGN parametar

  Ovaj parametar oznake

  definira vodoravni položaj stola u području gledanja. Važeće vrijednosti su LIJEVO (lijevo poravnanje) i DESNO (desno poravnanje). Prema zadanim postavkama, tablice su poravnate lijevo. Imajte na umu da među važećim vrijednostima ne postoji tipična vrijednost za parametar poravnanja - CENTAR. Neka HTML literatura navodi SREDIŠTE kao prihvatljivo u ovom slučaju. Ovo je u skladu s HTML specifikacijom, ali u praksi i Netscape Navigator i Microsoft Internet Explorer implementiraju samo dvije vrijednosti. Činjenica je da prisutnost parametra ALIGN u oznaci ne samo da određuje mjesto tablice, već vam također omogućuje prelamanje teksta oko tablice sa suprotne strane, slično prelamanju oko slika. Ne postoji odredba za tekst koji bi mogao omotati stol s obje strane. Za precizniju kontrolu omatanja koristite oznaku
  s CLEAR parametrom na isti način kao i za . Ako se izostavi ALIGN, prostor desno i/ili lijevo od tablice će uvijek biti prazan, bez obzira na njegovu širinu. Ako tablica ne zahtijeva omotavanje teksta oko nje, možete osigurati da bude postavljena u središte okvira za prikaz. Da biste to učinili, na primjer, možete smjestiti cijeli opis tablice unutar para oznaka I.

  Navedimo primjer tablice s tekstom za prelamanje, čiji je prikaz prikazan na sl. 4.9.

  odrasla osoba

  stanovništvo Sankt Peterburga

  Abram Aleksandar Aleksej Alberte Anatolij Andrej Arkadij Borise Vadim Voljeni Valery Bosiljak Pobjednik Vitalij Vladimire Vladislav Vjačeslav Genadij Georgij Hermann Grgur Dmitrij

  Eugene Efim Ivana Igore Ilja Josipa Konstantin Lav Leonid Michael Nikolaj Oleg Pavao Petar Roman Semjone Sergej Stanislav Edvard Jurij Jakov

  
  
  
  
  
  
  

  
  Navedena 43 najčešća imena pokrivaju 92% uzorka.
  

  

  Riža. 4.9. Tablica bez obruba s tekstom za omatanje

  Ovaj se dokument sastoji od tablice bez obruba s postavkom poravnanja ALIGN=LEFT, koja omogućuje da se tekst iza tablice pojavi s desne strane. Tablica se sastoji od samo jednog retka koji sadrži dvije ćelije. Svaka ćelija sadrži dio nesređenog popisa

  . Korištenje tablice za prikaz popisa jedan je od načina prisiljavanja popisa na više stupaca, kao što ovaj primjer također ilustrira. Tekst koji se nalazi desno od tablice možda neće sav stati tamo, ali će se nastaviti nakon tablice. Pokušajte upotrijebiti ovaj primjer da smanjite širinu prozora preglednika i u nekom će se trenutku sav tekst pojaviti na dnu tablice. Podsjetimo vas da za nasilni prekid tijeka teksta duž tablice (na primjer, ako sljedeći tekst nije logički povezan s tablicom i trebao bi se nalaziti ispod nje), trebate koristiti kod
  sa skupom parametara CLEAR. Za ovaj primjer morate pisati
  ili
  . Neki preglednici dopuštaju da se parametar CLEAR zapiše bez vrijednosti, ali to se ne preporučuje. Da biste izvršili isti zadatak, navedite višestruki pomak redaka
  bez parametra CLEAR (kao što je učinjeno u primjeru prije teksta da bi se pomaknuo nekoliko redaka niže) ili nekoliko kodova za početak novog odlomka

  Pogrešna odluka.

  Navedimo malo drugačiji primjer za izradu takve stranice, čiji je prikaz prikazan na sl. 4.10.

  Najčešća muška imena

  odraslog stanovništva Sankt Peterburga

  Abram Aleksandar Aleksej Alberte Anatolij Andrej Arkadij Borise Vadim Voljeni Valery Bosiljak Pobjednik Vitalij Vladimire Vladislav Vjačeslav Genadij Georgij Hermann Grgur Dmitrij

  Eugene Efim Ivana Igore Ilja Josipa Konstantin Lav Leonid Michael Nikolaj Oleg Pavao Petar Roman Semjone Sergej Stanislav Edvard Jurij Jakov

  Izneseni podaci dobiveni su na temelju analize reprezentativnog uzorka koji sadrži podatke o 5000 muškaraca starijih od 18 godina koji žive u St. Ova 43 imena koja se najčešće susreću pokrivaju 92% uzorka. Učestalost pojavljivanja svakog drugog imena ne prelazi 0,3%

  

  Riža. 4.10. Tablica bez obruba koja sadrži tri stupca

  Za razliku od prethodnog primjera, nema prelamanja teksta oko tablice. Cijeli dokument sastoji se od jedne tablice sa zaglavljem koje sadrži tri ćelije u jednom retku. Prve dvije ćelije u potpunosti ponavljaju prethodni primjer. Treća ćelija sadrži tekst koji komentira sadržaj prve dvije ćelije. Ovdje nema potrebe forsirati završetak teksta, kao što je opisano u prethodnom slučaju. Sav tekst koji se odnosi na tablicu trebao bi se nalaziti unutar treće ćelije, a sljedeći tekst trebao bi biti smješten nakon kraja opisa cijele tablice.. Oba primjera izgledaju identično kada se gledaju na cijelom ekranu, s izuzetkom zaglavlja koje se u prvom slučaju nalazi u sredini liste od dva stupca, au drugom se nalazi u sredini sva tri stupca stol. Međutim, kada je okvir za prikaz smanjen u zadnjem primjeru, niti jedan dio teksta ne može ići ispod tablice, čime se krši njena struktura.

  Oblikovanje podataka unutar tablice

  Svaka pojedina ćelija unutar tablice može se tretirati kao područje za neovisno oblikovanje. Sva pravila koja su na snazi ​​za kontrolu prikaza teksta mogu se koristiti za oblikovanje teksta unutar ćelije. Unutar ćelije prihvatljivo je koristiti gotovo sve HTML elemente koji se mogu pojaviti unutar tijela dokumenta , uključujući oznake koje kontroliraju položaj teksta -

  ,
  ,

  ---

  , kodovi zaglavlja - od

  prije

  , oznake za oblikovanje znakova -<В>, , , , , , , oznake umetanje grafičkih slika , hipertekstualne veze<А>itd. Odmah naglašavamo da je opseg oznaka navedenih unutar zasebne ćelije ograničen na granice ove ćelije, bez obzira na prisutnost oznake na kraju. Na primjer, ako je boja teksta definirana unutar ćelije - , čak i u nedostatku koda prekida ili postavljanjem preko više ćelija ili redaka tablice, tekst sljedeće ćelije će se odraziti u zadanoj boji.

  Dostupne su sljedeće opcije za formatiranje podataka unutar ćelija tablice.

  Opcije poravnanja sadržaja ćelije su ALIGN i VALIGN. Može se koristiti u kodovima , I . Parametar horizontalnog poravnanja ALIGN može poprimiti vrijednosti LIJEVO, DESNO i SREDIŠNJE (zadano je LIJEVO za i CENTAR za ). Parametar okomitog poravnanja VALIGN može imati sljedeće vrijednosti: TOP (gornji rub), BOTTOM (donji rub), MIDDLE (u sredini), BASELINE (osnovna linija). Zadana je SREDNJA. Poravnanje osnovne linije osigurava da je tekst u jednom retku u svim ćelijama usidren u jedan redak. Postavljanje opcija poravnanja na razini koda određuje poravnanje za sve ćelije određenog retka, dok svaka pojedinačna ćelija retka može imati definirane vlastite parametre koji nadjačavaju učinak parametara navedenih u .

  Evo primjera tablice u kojoj su podaci u ćelijama prvog stupca poravnati udesno, drugog stupca u sredini, a trećeg ulijevo (zadano):

  Ćelija 1	Ćelija 2	Ćelija 3
  Ćelija 4	Ćelija 5	Ćelija 6

  Prikaz preglednika ovog primjera prikazan je na sl. 4.11.

  
  

  Riža. 4.11. Poravnavanje podataka u ćelijama tablice

  Opcija NOWRAP onemogućuje mogućnost automatskog dijeljenja teksta ćelije u retke. Može se koristiti u kodovima , I . Treba izbjegavati nepotrebnu upotrebu ovog parametra jer može značajno smanjiti mogućnost dinamičke promjene veličine tablica i narušiti njihovu čitljivost. U većini slučajeva dovoljno je koristiti NOWRAP za pojedinačne ćelije koje stvarno zahtijevaju zabranu prelamanja riječi. Prelamanje riječi provodi se samo razdjelnicima između riječi (razmacima), au nekim slučajevima, da biste zabranili lomljenje teksta na određenim mjestima, umjesto znaka razmaka, trebali biste postaviti kod za neprekinuti razmak (NonBreaking Space). Primjeri uključuju slučajeve u kojima se ne preporučuje razmak - između numeričke vrijednosti i mjernih jedinica dane vrijednosti; između prezimena i inicijala. Dakle, tekst je 650 km ili Jeljcin B.N. Preporuča se upisati u obrazac 650 km i Jeljcina B.N.

  U kodovima se mogu koristiti parametri WIDTH i HEIGHT I . Njihova je sintaksa slična sintaksi ovih parametara za oznaku

  . Njihova vrijednost određuje širinu ili visinu ćelije za koju se ti parametri bilježe. Vrijednosti se mogu odrediti u pikselima ili kao postotak veličine cijele tablice. Microsoft Internet Explorer dopušta samo navođenje WIDTH u pikselima. Budući da je tablica koherentna struktura koja se sastoji od redaka i stupaca, postavljanje širine bilo koje ćelije utječe na širinu cijelog stupca u kojem se ćelija nalazi, a postavljanje visine utječe na cijeli red. Ako je vrijednost širine stupca navedena samo u jednoj ćeliji, ta vrijednost postaje širina cijelog stupca. Ako postoji nekoliko takvih indikacija, odabire se najveća vrijednost. Ista svojstva vrijede i za nizove.

  Složene tablice karakterizira potreba kombiniranja nekoliko susjednih ćelija vodoravno ili okomito u jednu. Ova značajka implementirana je pomoću parametara COLSPAN (COLiimn SPANning) i ROWSPAN (ROW SPANning) navedenih u kodovima

  navedene su postavke za pojedine stupce ove grupe. Istovremeno, u tag Ako je potrebno, mogu se navesti parametri poravnanja čije se vrijednosti odnose na sve stupce dane skupine. Vrijednosti parametara navedene u oznaci , nadjačati vrijednosti iz oznake . Imajte na umu da u oznaci u ovom primjeru, za razliku od prethodnog, ne postoji SPAN parametar. Ovdje je njegova upotreba besmislena, jer će broj elemenata u grupi odrediti oni koji slijede oznaku oznake . Prema tome, svaka dana vrijednost parametra oznake SPAN bit će poništen.

  Na sl. Slika 4.17 prikazuje rezultat implementacije gornjeg koda, kao i opciju za prikaz takve tablice s unosom RULES=GROUPS u oznaci

  ili

  . Oblik notacije: COLSPAN=num, gdje je num numerička vrijednost koja određuje koliko stupaca trenutna ćelija treba biti horizontalno proširena. Korištenje parametra ROWSPAN je slično, samo što ovdje određujete broj redaka koje trenutna ćelija treba obuhvatiti vertikalno. Prema zadanim postavkama ovi su parametri postavljeni na jedan. Dopušteno je istovremeno postaviti vrijednosti oba parametra za jednu ćeliju. Ispravno postavljanje vrijednosti ovih parametara možda neće biti vrlo jednostavan zadatak, pogotovo zato što većina HTML uređivača omogućuje vizualnu konstrukciju samo jednostavnih tablica s naknadnim generiranjem HTML kodova. Na sl. Na slici 4.12 prikazan je primjer prikaza tablice dobiven iz sljedećeg HTML koda: Ćelija se proteže u dva reda Ćelija koja obuhvaća dva stupca Ćelija 3 Ćelija 4 Ćelija 5 Ćelija 6 Ćelija 7 Riža. 4.12. Tablica s ćelijama koje obuhvaćaju više redaka ili stupaca Nepažljivo postavljanje vrijednosti kliznih parametara ćelije može dovesti do njihovog međusobnog preklapanja i sukoba, u kojima je rezultat nepredvidiv. Tipična upotreba proširenih ćelija je zajednički naslov za nekoliko susjednih stupaca ili redaka. Evo primjera HTML koda (čiji je prikaz prikazan na sl. 4.13), u kojem su proširene ćelije neispravno oblikovane. Ćelija 1 Ćelija 2 Ćelija 3 (uobičajen Ha tri linije) Ćelija 4 Ćelija 5 Ćelija 6 Ćelija 7 (rasprostranjena u dva stupca) Riža. 4.13. Rezultat netočne definicije proširenih ćelija (preklapanje teksta) Parametar BGCOLOR određuje boju pozadine cijele tablice, pojedinačnih redaka ili ćelija. Može se pojaviti u oznakama , , ne sadrži informacije ili jedan ili više razmaka koji se ne tretiraju kao podaci. Ćelije koje sadrže nevidljive podatke, na primjer, mogu sadržavati kod ili kod za novi redak , ili bilo koji tekst čija boja odgovara boji pozadine ćelije. Dok ćelije koje sadrže podatke (čak i ako su nevidljive) svi preglednici prikazuju isto, prazne će ćelije biti drugačije prikazane. Netscape preglednik ne prikazuje praznu ćeliju, tj. mjesto gdje se ta ćelija nalazi bit će ispunjeno bojom pozadine stranice, a ne bojom pozadine ćelije, za razliku od ćelija koje sadrže podatke. Oko praznih ćelija ne crta se granica. Primjer tablice s praznom ćelijom prikazan je na sl. 4.15. Riža. 4.15. Prazna ćelija tablice različito se prikazuje u različitim preglednicima Microsoft Internet Explorer prikazuje obje ćelije pomoću boje pozadine ćelija. Preglednik kao što je NSCA Mosaic pruža korisniku mogućnost da odredi prirodu prikaza praznih ćelija tablice odabirom odgovarajućih opcija. Poznavanje takvih značajki omogućit će vam da razvijete tablice koje će biti prikazane na odgovarajući način, bez obzira na preglednik koji korisnik odabere. U nekim slučajevima dovoljno je stvoriti ćelije koje sadrže jedan kod umjesto nekoliko praznih ćelija. Usklađivanje podataka u stupcima tablice Čest problem pri izradi tablica je postavljanje parametara poravnanja za pojedinačne retke ili stupce. Da biste poravnali sadržaj svih ćelija trenutnog retka, samo postavite potrebne parametre u kodu . Međutim, češće je potrebno osigurati isto poravnanje za sve elemente istog stupca, jer u većini slučajeva stupac sadrži homogene podatke. U prvim verzijama HTML-a predloženo je korištenje parametra COLSPEC (COLumn SPECification) za to, koji je bio naveden u oznaci I . Ovu značajku ne nudi HTML specifikacija, ali je podržavaju i Netscape i Microsoft Internet Explorer. Obrazac za unos je isti kao i za oznaku , naime: BGCOLOR=vrijednost, gdje je vrijednost sadržaj boje u RGB formatu ili njen naziv. Primjer: ili . Ugniježđene tablice Pojedinačne ćelije tablice mogu sadržavati gotovo sve jezične oznake i podatke dopuštene u odjeljku dokument. Konkretno, druga tablica može biti postavljena u potpunosti unutar ćelije tablice. Takve se tablice nazivaju ugniježđene. Pravila za njihovu konstrukciju ne razlikuju se od konstrukcije stolova i ne zahtijevaju poseban opis. Napominjemo samo da ne prikazuju svi preglednici koji podržavaju tablice ispravno složene tablice s višestrukim razinama ugniježđivanja, pa njihova upotreba zahtijeva oprez. Dajmo primjer tablice koja koristi jednu razinu ugniježđenja. Gradovi Lenjingradske regije H - broj stanovnika grada (tisuću stanovnika, 1992.) P - udaljenost od Sankt Peterburga (km) Gradovi podređeni Petrogradu Grad H P Zelenogorsk 13.6 50 Kolpino 144.6 26 Kronštat 45.2 48 Lomonosov 42.0 40 Pavlovsk 25.4 30 Petrodvorec 83.8 29 Puškina 95.1 24 Sestroretsk 34.9 35 Svi gradovi podložni uprave Sankt Peterburg, imaju izravni grad telefonski brojevi. Gradovi regionalne podređenosti Grad H P Boksitogorsk 21.6 PORAVNI=DESNO>245 Bolhov 50.3 PORAVNI=DESNO>122 Bsevolozhsk 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 PORAVNAJ=DESNO>159 Gatchina 80.9 46 Ivangorod 11.9 PORAVNI=DESNO>147 Kamennogorsk 5.9 157 Kingisepp 51.5 PORAVNI=DESNO>138 Kirishi 53.8 PORAVNI=DESNO>115 Kirovsk 23.8 55 Lodeynoye Pole 27.3 PORAVNI=DESNO>244 Lyga 41.8 139 (nastavak tablice) Grad H P Ljuban 4.7 85 Novaja Ladoga 11.2 PORAVNI=DESNO>141 Otradnoe 22. 9 PORAVNAJ=DESNO>40 Pikalevo 25.1 PORAVNI=DESNO>246 Podporožje 23.1 285 Primorsk 6.7 137 Priozersk 20.5 PORAVNAJ=DESNO>145 svetogorsk 15.8 PORAVNI=DESNO>201 Škriljevci 42.6 PORAVNI=DESNO>192 Borik 57.6 81 Tihvin 72.0 PORAVNI=DESNO>200 Tosno 33.8 53 S Lisselburg 12.5 64 Riža. 4.14. Primjer ugniježđenih tablica Rezultat prikaza ovog primjera prikazan je na sl. 4.14. Na prvi pogled se čini da u primjeru nema ugniježđenja tablica. Zapravo, cijeli dokument je tablica koja nema rubova i sastoji se od zaglavlja i samo jednog retka koji sadrži pet ćelija. Organizacija takve tablice služi isključivo za organiziranje podataka na stranici. Unutar prve ćelije nalazi se još jedna tablica koja ima svoj naslov i sastoji se od tri stupca iza kojih slijedi tekst poravnat po sredini. Treća i peta ćelija također sadrže zasebne tablice. Druga i četvrta ćelija su prazne, ne sadrže podatke i imaju jedan WIDTH parametar koji određuje njihovu širinu. Njihova je svrha postaviti uvlaku između prve i treće, te treće i pete ćelije u kojoj se nalaze tablice. Ovo je jedna od mogućih opcija za postavljanje takve uvlake. Druga je mogućnost korištenje parametra CELLSPACING, koji određuje udaljenost između ćelija, međutim, ovaj parametar specificira vodoravno i okomito ispunjavanje, što u ovom trenutku nije potrebno. Osim toga, prazna ćelija zadane širine smanjit će se kada se okvir za prikaz suzi, za razliku od prostora određenog parametrom CELLSPACING (kao i CELLPADDING). Koristeći ovaj primjer, pokušajte smanjiti širinu područja za gledanje u pregledniku ili, što će dovesti do istih rezultata, povećati veličinu fonta u kojem se prikazuje tekst. Razmak između tablica smanjit će se na nulu, što će omogućiti istovremeno gledanje svih informacija što je dulje moguće, no daljnje promjene neće dovesti do oštećenja tablice, već će pružiti mogućnost vodoravnog pomicanja. Koristeći sličnu shemu, možete organizirati postavljanje informacija koje se sastoje ne samo od tablica, već i slika, fragmenata teksta itd. Značajke konstrukcije stola Ovaj odjeljak govori o nekim specifičnim mogućnostima pojedinačnih preglednika, kao io nekim suptilnostima konstrukcije i prikaza tablica. Prikaži prazne ćelije u tablicama Jedna od značajki tabličnog prikaza u raznim preglednicima je prikaz praznih ćelija. Prema opisu jezika, svi preglednici moraju popuniti retke praznim ćelijama ako je u bilo kojem retku njihov broj postavljen na manji nego u drugim redovima. Osim toga, bilo gdje u tablici mogu postojati ćelije koje ne sadrže podatke. Postoji razlika između praznih ćelija i ćelija koje sadrže nevidljive podatke. U praznim ćelijama unutar para oznaka I te odredio poravnanje i širinu svakog stupca tablice. Na primjer, zadatak colspec="L40 R50 C80" odredio je poravnanje podataka u ćelijama za tri stupca tablice: za prvi stupac - LIJEVO, za drugi - DESNO i za treći - SREDINA, kao i širina svakog stupca. Kako se HTML razvijao, ova opcija je napuštena i trenutno nije dio specifikacije jezika i ne podržava je većina preglednika. Kao rezultat toga, Netscape Navigator nema posebne alate za rješavanje ovog problema, a jedina opcija je ili koristiti zadano poravnanje ili postaviti odgovarajuće vrijednosti u svakoj ćeliji gdje je to potrebno. Microsoft Internet Explorer nudi posebne oznake - I . Ove oznake trebaju se nalaziti odmah iza opisa prije prvog pojavljivanja oznake . Parametri oznake I može biti SPAN, koji određuje broj susjednih stupaca na koje utječu vrijednosti parametra, i ALIGN, koji određuje horizontalno poravnanje podataka u svim ćelijama odgovarajućeg stupca (ili stupaca). Valjane vrijednosti za ALIGN su LIJEVO, DESNO i SREDINA. Parametar SPAN zadano je jedan. Označiti dodatno omogućuje postavljanje parametra VALIGN koji određuje okomito poravnanje podataka u ćelijama. Valjane vrijednosti za VALIGN su MIDDLE, TOP i BOTTOM. Razlika između oznaka I je da prvi od njih, osim postavljanja parametara za usklađivanje podataka za stupce, također izvodi uvjetno spajanje nekoliko stupaca u grupu. Učinak ove kombinacije vidljiv je pri korištenju parametra RULES, koji je opisan u nastavku. Prema zadanim postavkama, svi se stupci tablice smatraju jednom grupom. Označiti treba koristiti samo za određivanje poravnanja podataka u pojedinačnim stupcima u grupi. Navedimo primjer. Pretpostavimo da trebate izgraditi tablicu koja sadrži 6 stupaca, a podaci u prva tri trebaju biti poravnati udesno, a sljedeća tri - u sredini. Da biste riješili ovaj problem, trebali biste napisati sljedeći fragment HTML koda: (podaci za tablicu) Rezultat prikazivanja ovog koda prikazan je na sl. 4.16. Riža. 4.16. Tablica s različitim opcijama poravnanja podataka u grupama ćelija Još jedan primjer. Pretpostavimo da u prethodnoj tablici prva dva stupca trebaju biti poravnata udesno, a treći treba biti poravnat u sredini, te sva tri stupca trebaju biti spojena u grupu. Sljedeća tri stupca također bi trebala biti grupirana i imati slično poravnanje kao prva skupina. Da biste riješili ovaj problem, trebali biste napisati sljedeći fragment HTML koda: (podaci za tablicu) U ovom primjeru, nakon oznake

  , iz čega je jasan smisao udruživanja u grupe.

  Savjet

  Budući da opseg oznaka

  I ograničeni na jedan preglednik, Microsoft Internet Explorer, trebali biste ih koristiti s oprezom. Pogodnost korištenja ovih oznaka je očigledna, ali u praksi se većina tablica gradi pomoću odgovarajućeg parametra poravnanja ALIGN za svaku ćeliju tablice gdje je to potrebno, što značajno povećava veličinu izvornog koda tablice, ali osigurava da se može pregledavati u bilo koji preglednik.

  
  

  Riža. 4.17. Tablica s grupiranim stupcima

  Postavljanje boje obruba tablice

  Još nekoliko opcija, jedinstvenih za Microsoft Internet Explorer, omogućuju odabir boje obruba tablice - BORDERCOLOR, BORDERCOLORLIGHT i BORDERCOLORDARK. Ovi parametri mogu se specificirati u oznakama

  , . Vrijednost ovih parametara može biti naziv boje ili njezina heksadecimalna vrijednost. Parametar BORDERCOLOR specificira boju svih rubnih elemenata tablice, a druga dva parametra specificiraju boju pojedinačnih rubova komponente, nadjačavajući vrijednost BORDERCOLOR. Parametar BORDERCOLORLIGHT boji lijevi i gornji rub cijele tablice i, sukladno tome, desni i donji rub svake ćelije u navedenoj boji. Drugi BORDERCOLORDARK parametar određuje boje suprotnih rubova. Zbog kombinacije ovih parametara, stol će izgledati blago podignut iznad površine stranice ili udubljen. Sve ovisi o odabranoj kombinaciji boja.

  Bilješka

  Netscape preglednik verzija 4.x također podržava postavku BORDERCOLOR.

  Postavite pozadinsku sliku za stol

  Microsoft Internet Explorer (kao i Netscape verzija 4.x) omogućuje vam korištenje BACKGROUND parametra, koji određuje pozadinsku sliku za tablicu na isti način na koji se može koristiti za cijeli HTML dokument. Ovaj parametar se može postaviti u oznakama

  ,	I

  , , w

  Preglednik Microsoft Internet Explorer omogućuje korištenje niza novih oznaka za strukturiranje tablica i fleksibilnu kontrolu crtanja okvira i mrežnih linija.

  Oznake

  , I strože postavite strukturu opisa tablice, ističući ćelije zaglavlja tablice, glavni sadržaj tablice i redak sažetka. Ove se oznake mogu pojaviti samo u opisima tablica unutar para oznaka

  I	. Oznake za strukturiranje tablice

  I.

  Oznake I koriste se za opisivanje zaglavlja i podnožja tablice. Ove se oznake mogu pojaviti najviše jednom u tablici. Završna oznaka za njih se može izostaviti. Korištenje ovih oznaka prikladno je pri izradi velikih tablica koje se protežu preko jedne stranice.

  Označiti može se pojaviti više puta u opisu tablice, zahtijevajući upotrebu završne oznake. Ova oznaka izvodi logičko grupiranje podataka na isti način kao i , koji izvodi grupiranje susjednih stupaca.

  Korištenjem novih oznaka možete fleksibilnije kontrolirati obrube i rešetke svoje tablice.

  Crtanje okvira oko stola kontrolira se parametrom oznake FRAME

  , a crte mreže tablice - parametrom RULES. Na primjer, postaje moguće crtati samo okomite crte između stupaca i umjesto okvira oko cijele tablice dati vodoravne crte na vrhu i dnu tablice.

  Parametar FRAME može poprimiti sljedeće vrijednosti:

  • BOX ili BORDER - okvir je nacrtan sa sve četiri strane
  • IZNAD - samo s gornje strane
  • ISPOD - samo s donje strane
  • HSIDES - nacrtane su donja i gornja strana
  • STRANE - nacrtana je lijeva i desna strana
  • LHS - samo s lijeve strane
  • R.H.S. - samo s desne strane
  • PONIŠTITI - stol bez vanjskih okvira

  Parametar RULES kontrolira crtanje linija interne mreže tablice i može poprimiti sljedeće vrijednosti:

  • SVI - nacrtane su sve unutarnje linije
  • GRUPE - nacrtane su samo linije koje dijele skupine
  • REDOVI - nacrtane su linije koje razdvajaju linije
  • COLS - nacrtane su linije koje dijele stupce
  • NIJEDAN - unutarnje linije nisu iscrtane

  Primjer:

  .

  Bilješka

  Crte rešetke i okviri tablice bit će nacrtani samo ako je prisutan parametar oznake BORDER

  . Ako je ovaj parametar odsutan ili je njegova vrijednost nula, linije mreže i okviri će biti odsutni za sve vrijednosti parametara FRAME i RULES.

  Ovdje je primjer potpunog HTML koda koji stvara tablicu koristeći opisane mogućnosti:

  Primjer fleksibilnog upravljanja linijom
  rešetkasta tablica

  Naslov stupca 1	Naslov stupca 2	Naslov stupca 3
  Podaci	Podaci	Podaci
  Podaci	Podaci	Podaci
  Podaci	Podaci	Podaci
  Podaci	Podaci	Podaci
  Podaci	Podaci	Podaci
  Podaci	Podaci	Podaci
  Poanta	Poanta	Poanta

  
  

  Riža. 4.18. Fleksibilno crtanje linija mreže tablice pomoću preglednika Microsoft Internet Explorer

  U ovom primjeru, čiji je prikaz u pregledniku prikazan na sl. Slika 4.18 prikazuje jednu od mogućih opcija za kontrolu linija mreže i obruba oko stola. Okvir debljine 5 piksela (BORDER=S) nacrtan je oko stola samo s gornje i donje strane (FRAME=HSIDES). Crte rešetke nacrtane su unutar tablice za odvajanje grupa podataka (PRAVILA=GRUPE). Grupe podataka definirane su, prvo, prisutnošću tri oznake , od kojih svaki deklarira jedan stupac tablice skupina. Drugo, oznake , I<тгоот>Oni također razbijaju podatke tablice u skupine, što određuje crtanje unutarnjih vodoravnih linija.

  Postavljanje broja stupaca tablice

  Preglednik Microsoft Internet Explorer (kao i preglednik Netscape verzija 4.x) omogućuje vam da u oznaci odredite

  Parametar COLS, čija vrijednost određuje broj stupaca u tablici. Pisanje ovog parametra omogućuje vam da ubrzate postupak izgleda tablice kada se prikazuje u pregledniku, jer postaje moguće odrediti broj stupaca prije učitavanja koda opisa tablice. Trenutačno uključivanje ove opcije ni na koji način ne utječe na napredak učitavanja dokumenta.

  Vertikalno poravnanje tablica

  Zadnji parametar oznake

  , jedinstven za Microsoft Internet Explorer, je VALIGN, koji određuje okomito poravnanje tablice u odnosu na tekst. Njegov učinak je sličan istom parametru za slike.

  Bilješka

  Imajte na umu da se upotreba istog parametra može značajno razlikovati iu svrhu iu mogućim vrijednostima za različite oznake, čak i za isti preglednik i unutar specifikacije jezika. Stoga ga je nemoguće sastaviti stožerna tablica o korištenju različitih parametara izvan konteksta njihove primjene. Na primjer, parametar ALIGN samo u tablicama koristi se na tri različita načina:

  • za oznaku

  parametar ALIGN može poprimiti vrijednosti LIJEVO ili DESNO i znači mjesto tablice, pritisnuto na lijevi ili desni rub;

  za oznaku

  ,

  parametar ALIGN ima vrijednosti TOP ili BOTTOM i označava lokaciju zaglavlja tablice iznad ili ispod tablice;

  za oznake

  I

  parametar ALIGN ima vrijednosti LIJEVO, DESNO ili SREDINA, a znači vodoravno poravnavanje sadržaja odgovarajuće ćelije (ili ćelija) tablice. Alternativa prikazu tablice Podrška za tablice postala je široko rasprostranjena značajka web-preglednika, tako da nema mnogo razloga da je izbjegavate koristiti. Ipak, razmotrit ćemo moguće mogućnosti alternativnog prikaza podataka koji se mogu koristiti umjesto tablica ili kao dodatak njima. Neke druge metode koje ne koriste koncept tablica: Koristite unaprijed formatirani tekst. Ova metoda se tradicionalno koristi u ranije verzije HTML jezik kada podrška za tablice još nije postojala. Njegova upotreba nije izgubila na važnosti do danas, jer će takve tekstove ispravno prikazati bilo koji preglednik, uključujući i čisto tekstualne. Korištenje slike koja sadrži tablicu. Stol može izraditi bilo tko uređivač teksta ili čak prikazati u web pregledniku i zatim spremiti kao sliku u jedan od grafički formati. Ovo nije najbolja opcija, budući da gubi svu fleksibilnost dinamičkog konfiguriranja prikaza tablica. Osim toga, postoji potreba za pohranjivanjem dodatna datoteka slikom čija će veličina u pravilu biti znatno veća od veličine teksta koji opisuje HTML tablicu. Moguće područje primjene su tablice strogo definiranih veličina, za koje je neprihvatljiva ovisnost prikaza o bilo kojim vanjskim čimbenicima (fontovi, načini rada preglednika itd.). Korištenje popisa umjesto tablica. U najjednostavnijim slučajevima, umjesto organiziranja tablica, sasvim je moguće snaći se s jednom od vrsta popisa dostupnih u HTML jeziku. Priprema stolova Bilo koji editor se može koristiti za pripremu HTML tablica, od kojih većina ima alate za vizualno stvaranje tablica. Navedimo primjer pripreme stola u HotDog Professional editoru. Za izradu tablice jednostavno odaberite stavku Tablice iz izbornika Umetanje, nakon čega će se otvoriti dijaloški okvir prikazan na sl. 4.19. Izrada tablice sastoji se od popunjavanja odgovarajućih polja u prozoru. Nakon određivanja broja redaka i stupaca u tablici, možete pristupiti izravnom popunjavanju pojedinačnih ćelija tablice, što će biti prikazano u istom dijaloškom okviru. Dijaloški okvir ima gumb Pregled, klikom na koji možete vidjeti rezultirajuću tablicu pomoću ugrađenog preglednika (Slika 4.20). Riža. 4.19. Dijaloški okvir za izradu tablica Riža. 4.20. Tablica prikazana pomoću ugrađenog preglednika Nakon što završite s pripremom podataka za tablicu kliknite OK. Zatim će generirani kod opisa tablice biti umetnut u uređeni HTML dokument. Za primjer prikazan na sl. 4.19, sljedeći kod će biti generiran: (dio koda izostavljen) 3 zaglavlja tablica Stupac 1 Stupac 2 Stupac 3 Stupac 4 1 2 3 4 Ovaj se zadatak rješava na sličan način kada se koristi komponenta Netscape Composer programa Netscape Communicator. Na sl. Slika 4.21 prikazuje dijaloški okvir u kojem trebate popuniti potrebna polja. Ući dodatni parametri označiti Postoji gumb Extra HTML. Nakon popunjavanja polja dijaloškog okvira, kliknite gumb Primijeni i tada ćete dobiti priliku ispuniti ćelije tablice (Sl. 4.22). Riža. 4.21. Dijaloški okvir za postavljanje opcija tablice Netscape Composer Riža. 4.22. Početna pozicija kursora unosa u praznoj tablici Programi Sigurnost Vijesti Zanimljiv Savjet Vijesti Recenzije Pridruži nam se! Već se pretplatilo više od 6000 ljudi. Dobijte najnovije članke. PRETPLATITE SE