Proizlaziti:

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

○ Poravnavanje sadržaja u HTML tablici

Za poravnavanje sadržaja u HTML tablici koristite to tag atribut "Uskladiti" i "Valign" :

USKLADITI- horizontalno poravnanje sadržaja u tablici.
vrijednosti:

• lijevo - gurnite sadržaj ulijevo (zadano);
• centar – postavljeno u sredini;
• pravo - gurnite sadržaj na desnu stranu

VALIGN- vertikalno poravnanje sadržaja u tablici.
vrijednosti:

• vrh – pritisnite sadržaj na vrh;
• dno – gurnite sadržaj na dno;
• sredina – postavite sadržaj u sredinu

Proizlaziti:

○ Kako centrirati HTML tablicu

Da biste tablicu poravnali po sredini, trebate je omotati oznakom

Dodatne i glavne oznake tablice

Proizlaziti:

Tako smo završili s tablicama. Sada možete sami izraditi tablicu bilo koje složenosti. Pojačajte ovu lekciju. Pokušajte sami stvoriti bilo koji stol.
Veselim se što ću vas vidjeti na sljedećoj lekciji. Pretplatite se na ažuriranja mog bloga.

Prethodni post
Sljedeći post

Poglavlje 4

HTML tablice

Jedan od najmoćnijih i najraširenijih alata u HTML-u su tablice. Koncept tabelarnog prikaza podataka ne treba dodatno pojašnjavati. U HTML-u se tablice ne koriste samo tradicionalno kao metoda predstavljanja podataka, već i kao sredstvo oblikovanja web stranica. Evo primjera dokumenata iz stvarnog života u kojima je tabelarni prikaz prikladan način za izradu dokumenta. Na sl. 4.1 prikazuje tipičan primjer korištenja tablica za predstavljanje brojčanih podataka raščlanjenih po recima i stupcima. Na sl. 4.2 korištenje tablice služi samo u svrhu oblikovanja dokumenta, postavljanja relativnog položaja elemenata stranice. Prilikom gledanja takvog dokumenta nije odmah jasno da se za njegovu izradu koristi tablica, budući da okviri oko njegovih ćelija nisu nacrtani.

Prva verzija HTML jezika nije pružala posebna sredstva za prikaz tablica, jer je uglavnom bila namijenjena za pisanje jednostavnog teksta. S razvojem područja primjene HTML dokumenata, postao je hitan zadatak prezentiranja podataka, za koji je tipična prisutnost većeg broja redaka i stupaca. U početku je izrada dokumenata koji sadrže podatke poravnate po stupcima izvedena pomoću unaprijed formatiranog teksta, unutar kojeg je potrebno poravnanje osigurano uvođenjem potrebnog broja razmaka. Podsjetimo da je tekst unutar para oznaka

I

Posebni alati za izradu tablica, međutim, ne negiraju mogućnost korištenja unaprijed formatiranog teksta. Upotreba tablica nije ograničena na podatke koji se sastoje od redaka i stupaca. Jedna od aplikacija je organiziranje rasporeda različitih podataka na stranici, koji se mogu sastojati od običnog teksta, slika, drugih tablica itd. Ovo poglavlje posvećeno je pravilima za izradu tablica i primjerima njihove uporabe.

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

Riža . 4.2. Primjer tablice bez granica

Izrada osnovnih HTML tablica

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

Opis tablica treba biti smješten unutar dijela dokumenta ... Dokument može sadržavati proizvoljan broj tablica, a tablice mogu biti ugniježđene jedna u drugu. Svaka tablica mora početi oznakom

Svaki redak počinje oznakom (Red tablice) i završava oznakom... Jedna ćelija u nizu uokvirena je parom oznaka i(Tablični podaci) ili i(Zaglavlje tablice). Označiti obično se koristi za ćelije zaglavlja tablice, i - za podatkovne ćelije. Razlika u korištenju leži samo u vrsti fonta koji se prema zadanim postavkama koristi za prikaz sadržaja ćelija, kao i u mjestu podataka unutar ćelije. Sadržaj tipskih ćelija prikazano podebljano i centrirano (ALIGN = CENTER, VALIGN = MIDDLE). Ćelije definirane oznakom prema zadanim postavkama prikazuje podatke poravnate ulijevo (ALIGN = LIJEVO) i u sredini (VALIGN = MIDDLE) u okomitom smjeru.

Oznake i ne može se pojaviti izvan opisa reda tablice ... Završni kodovi, i može se izostaviti. U ovom slučaju, kraj opisa retka ili ćelije je početak sljedećeg retka ili ćelije ili kraj tablice. Oznaka završne tablice ne može se izostaviti.

Broj redaka u tablici određen je brojem otvaranja oznaka , a broj stupaca je maksimalni broj ili među svim linijama. Neke od ćelija možda ne sadrže nikakve podatke, takve ćelije su opisane parom sljedećih oznaka u nizu - , ... Ako jedna ili više ćelija na kraju retka 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 konstrukcija tablica u kojima se u različitim redovima nalazi različit broj stupaca iste veličine.

Tablica može imati naslov, koji je zatvoren u nekoliko oznaka i... Opis zaglavlja tablice mora se nalaziti unutar oznaka

Prema zadanim postavkama, tekst zaglavlja tablice postavljen je iznad njega (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 poprimaju zadane vrijednosti.

Ove informacije su sasvim dovoljne za izradu elementarnih tablica. Navedimo primjer jednostavne tablice koja se sastoji od dva retka i dva stupca, čiji je prikaz prikazan na Sl. 4.3.

Riža. 4.Z. Primjer najjednostavnije tablice

Pregledajte tablice na stranici

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

Zaglavlje tablice

Oznaka zaglavlja tablice ima jedini važeći parametar ALIGN, koji može biti TOP (naslov iznad tablice) ili BOTTOM (naslov ispod tablice). Parametar ALIGN može se izostaviti, što odgovara vrijednosti ALIGN = TOP. U vodoravnom smjeru, naslov tablice je uvijek centriran. Tablica možda nema naslov. Kao naslov tablice, u većini slučajeva koristi se običan tekst, koji je reguliran HTML specifikacijom, ali u stvarnosti između oznaka i dopušteno je pisati sve HTML elemente koji se koriste u odjeljku ... Evo primjera unosa zaglavlja tablice:

Naslov se nalazi na dnu tablice

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

Riža. 4.4. Tablica s naslovom

Microsoft Internet Explorer pruža dodatne mogućnosti za odabir mjesta naslova. Parametar ALIGN prihvaća vrijednosti LIJEVO, CENTER i DESNO za horizontalno poravnanje, zajedno s gore opisanim vrijednostima. Imajte na umu da je ovo jedan od rijetkih slučajeva kada se široko korišteni parametar ALIGN može koristiti i za horizontalno i okomito poravnanje. Na primjer, ALIGN = DESNO će osigurati da je zaglavlje pozicionirano s desne strane i iznad tablice. Ako napišete ALIGN = BOTTOM, onda će se, baš kao u gornjem primjeru, naslov nalaziti ispod tablice. Međutim, parametar ALIGN ne može se koristiti dvaput u istom zaglavlju. Stoga smo dodatno uveli poseban parametar za vertikalno poravnanje - VALIGN, koji uzima vrijednosti TOP ili BOTTOM. Na primjer, za naslov na dnu tablice, poravnat s lijeve strane, opis izgleda ovako:

Lijevo poravnat donji naslov

Tablica s ovim opisom naslova u Microsoft Internet Exploreru bit će prikazana kako slijedi (slika 4.5). Kada se gleda u Netscapeu, naslov će biti postavljen prema zadanim postavkama, odnosno iznad tablice i u sredini vodoravno.

Riža. 4.5. Horizontalno poravnavanje zaglavlja tablice pomoću Microsoft Internet Explorera

Značajke vodoravnog poravnanja zaglavlja tablice proširenje su HTML specifikacije, preglednik Netscape Navigator ih ne podržava, te se stoga trebaju koristiti samo kada je to apsolutno neophodno.

Parametri oznake

Glavna oznaka koja se koristi pri izradi tablica je oznaka

BORDER parametar

Parametar BORDER kontrolira prikazivanje obruba oko svake ćelije, što u biti daje rešetke tablice i oko cijele tablice. Prema zadanim postavkama, okviri se ne crtaju, a na ekranu će korisnik vidjeti samo ravnomjerno raspoređeni tekst ćelija tablice. Postoje mnoge situacije kada je korištenje tablica bez okvira sasvim opravdano, na primjer, za popise s više stupaca koji se implementiraju pomoću tablica ili navodeći točan relativni položaj slika i teksta. Međutim, u većini slučajeva, za tradicionalnu upotrebu tablica, korisno je odvojiti njihove ćelije jedna od druge mrežnim linijama, što olakšava percepciju i razumijevanje informacija sadržanih u tablici.

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

Na primjer,

Brojčana vrijednost parametra određuje debljinu obruba u pikselima, nacrtanih oko cijele tablice, međutim, ta vrijednost ne utječe na debljinu obruba oko svake ćelije. U nedostatku numeričke vrijednosti, obično se pretpostavlja da je to minimalna vrijednost (1), iako se stil prikaza okvira može razlikovati za različite preglednike. Mogućnost samostalnog upravljanja prikazom obruba oko cijele tablice i obruba oko ćelija nije dostupna.

Primjer tablice s obrubom od 10 piksela prikazan je na Sl. 4.6.

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

HTML 3.0 specifikacija nije uključivala vrijednost za parametar BORDER. To se radi samo u HTML 3.2. Na primjer, ranije verzije Microsoft Internet Explorera nisu dopuštale navođenje numeričke vrijednosti.

Imajte na umu da se u nedostatku parametra BORDER okviri ne crtaju, ali se ostavlja prostor za njih (ovo se odnosi samo na Netscape). Ukupna veličina tablice u odsutnosti ili prisutnosti parametra BORDER se ne mijenja (iznimka je slučaj postavljanja BORDER = 0). Dakle, minimalna udaljenost između dvije susjedne ćelije u tim slučajevima bit će jednaka dvostrukoj debljini okvira, odnosno dva piksela. Moguće je rasporediti ćelije što bliže jedna drugoj postavljanjem BORDER = 0, što znači da nema okvira. Neki preglednici možda ne podržavaju postavljanje numeričke vrijednosti za parametar BORDER, tada će vrijednost jednaka nuli biti zanemarena i tablica će biti nacrtana s obrubama.

Evo nekoliko primjera:

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

CELLSPACING parametar

Oblik za označavanje 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), vodoravno i okomito. Prema zadanim postavkama, vrijednost se pretpostavlja da je dva. Imajte na umu da tradicionalno u sustavima za objavljivanje susjedne ćelije tablice imaju zajedničku granicu. U HTML tablicama, prema zadanim postavkama, između njih je ostavljen razmak, kao što se jasno vidi na gornjoj slici (slika 4.6). Ako postavite CELLSPACING = 0, granice susjednih ćelija će se spojiti i stvoriti dojam jedne mreže tablice (slika 4.7).

Riža. 4.7. Tablica s CELLSACING = 0

CELLPADDING parametar

Zapis parametara sličan je CELLSPACING. Vrijednost num određuje količinu slobodnog prostora (ispuna) između granice ćelije i podataka unutar ćelije. Prema zadanim postavkama, vrijednost se pretpostavlja da je jedan. Postavljanje parametra CELLPADDING na nulu može uzrokovati dodirivanje obruba nekih dijelova teksta ćelije, što ne izgleda baš estetski ugodno.

Na sl. 4.8 prikazuje primjer tablice s CELLPADDING = 10.

Riža. 4.8. Tablica s CELLPADDING = 10

Parametri CELLPADDING i CELLSPACING rade vrlo slično. Za tablicu bez granica, promjena jednog ili drugog parametra dovodi do istog rezultata. Oba parametra utječu na odgovarajuće margine i vodoravno i okomito. Nažalost, odvojeno upravljanje horizontalnim i okomitim marginama radi se, na primjer, za margine sa slika (parametri HSPACE i VSPACE oznake ), nije navedeno.

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

Samo u tom slučaju stanice će se nalaziti blizu jedna drugoj. Primjer korištenja je tablica čije sve ćelije sadrže slike iste veličine, koje se moraju postaviti jedna do druge.

Parametri WIDTH i HEIGHT

Kada se tablice prikazuju, preglednik automatski izračunava njihovu širinu i visinu i ovise o mnogim čimbenicima: vrijednostima parametara navedenih u opisu cijelog dokumenta, ovoj tablici, njenim pojedinačnim recima i ćelijama, sadržaju ćelije, kao i parametri postavljeni prilikom pregledavanja dokumenta u određenom pregledniku, na primjer, vrsta i veličina fonta, veličina okvira za prikaz itd. Prilikom prikaza, veličine tablice se izračunavaju automatski uzimajući u obzir te čimbenike, dok se pokušava predstaviti tablicu u najprikladnijem obliku - urediti tablicu tako da stane u okvir za prikaz. Opća shema pregleda velikih dokumenata u pravilu se svodi na linearno pomicanje sadržaja dokumenta okomito i čitanje teksta, isprepletenog raznim tablicama, slikama itd. To se odnosi i na HTML dokumente i na obične dokumente stvorene u bilo koji uređivač teksta... Većina uređivača teksta (kao što je Microsoft Word) i HTML preglednici automatski formatiraju tekst (ako je moguće) tako da linije ne prelaze širinu okvira za prikaz. Time se izbjegava potreba za vodoravnim pomicanjem dokumenta. Slične radnje poduzimaju preglednici s tablicama - ako je moguće, formatirajte ih tako da širina tablice ne prelazi širinu okvira za prikaz. Može se zaključiti da je širina tablica važniji, najvažniji parametar, čiji se izračun vrši prije svega u usporedbi s visinom.

U većini slučajeva, dinamičko dimenzioniranje tablice rezultira estetski proporcionalnom slikom s učinkovitom upotrebom stvarnog područja okvira za prikaz. Međutim, možda će biti potrebno nametnuti širinu ili visinu stola. U tu svrhu koriste se parametri oznake WIDTH (širina tablice) i HEIGHT (visina tablice)

Slični parametri mogu se postaviti za pojedinačne ćelije. Imajte na umu da navođenje određene vrijednosti za parametar, 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 zadanim uvjetima, prema zadanim postavkama imala širinu manju od navedene. U tom slučaju preglednik će povećati širinu tablice na potrebnu proporcionalno proširivanjem svih stupaca tablice. Sužavanje okvira za prikaz neće promijeniti širinu tablice i možda ćete se morati vodoravno pomicati da biste je vidjeli. Ako tablica ima zadanu š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, razbijanjem teksta u odvojenim ćelijama u nekoliko redaka s povećanjem visine stola. Ove radnje možda neće osigurati potrebnu veličinu tablice, a tada će imati najmanju moguću širinu. Iste se radnje poduzimaju za tablice koje nemaju dimenzije pri sužavanju okvira za prikaz.

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

ALIGN parametar

Zadani parametar oznake

Navedimo primjer tablice s omotanim tekstom, čiji je prikaz prikazan na Sl. 4.9.

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

Riža. 4.9. Tablica bez obruba s prelamajućim tekstom

Ovaj dokument se sastoji od tablice bez obruba s parametrom poravnanja ALIGN = LEFT, koji omogućuje da se tekst koji slijedi nakon tablice postavi desno od tablice. Tablica se sastoji od samo jednog retka koji sadrži dvije ćelije. Svaka ćelija sadrži dio neuređenog popisa

... Korištenje tablice za prikaz popisa jedan je od načina da se popis natjera na više stupaca, što je također ilustrirano u ovom primjeru. Tekst koji se nalazi desno od tablice možda neće sav stati tamo, dok će se nastaviti nakon tablice. Pokušajte upotrijebiti ovaj primjer kako biste smanjili širinu okvira za pregled preglednika i u nekom trenutku će se sav tekst pojaviti na dnu tablice. Podsjetimo da biste nasilno prekinuli tok 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 trebate napisati
ili
... Neki preglednici dopuštaju zapisivanje parametra CLEAR bez vrijednosti, ali to se ne preporučuje. Za postizanje istog zadatka, navođenjem više linija
bez parametra CLEAR (kao što je učinjeno u primjeru prije teksta da se pomakne prema dolje za nekoliko redaka) ili nekoliko kodova za početak novog odlomka

Pogrešna odluka.

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

Najčešća muška imena

odraslo stanovništvo Sankt Peterburga

Abram Aleksandra Aleksej Albert Anatolij Andrej Arkadije Boris Vadim Voljeni Valery Bosiljak Pobjednik Vitalij Vladimir Vladislav Vjačeslav Gennady George Hermanna Grgur Dmitrij

Evgenij Efim Ivan Igor Ilya Josipa Konstantin Lav Leonid Michael Nikolaj Oleg Pavao Petar roman Semjone Sergej Stanislav Edvard Jurij Jakova

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



Riža. 4.10. Tablica bez obruba s tri stupca

Za razliku od prethodnog primjera, nema teksta koji teče oko stola. Cijeli dokument sastoji se od jedne tablice s naslovom koji sadrži tri ćelije u jednom redu. Prve dvije ćelije u potpunosti ponavljaju prethodni primjer. Treća ćelija sadrži tekst koji komentira sadržaj prve dvije ćelije. Ovdje nema potrebe postavljati prisilni prijelom teksta, kao što je opisano u prethodnom slučaju. Sav tekst koji se odnosi na tablicu treba biti smješten unutar treće ćelije, a sljedeći tekst - nakon završetka opisa cijele tablice... Oba primjera izgledaju isto kada se gledaju na cijelom ekranu, osim naslova koji se u prvom slučaju nalazi u sredini popisa s dva stupca, a u drugom je u sredini sva tri stupca tablice. Međutim, kada je okvir za prikaz smanjen u posljednjem primjeru, nijedan dio teksta ne može ići ispod tablice, čime se krši njegova struktura.

Formatiranje podataka unutar tablice

Svaka pojedinačna ćelija unutar tablice može se smatrati područjem za neovisno oblikovanje. Sva pravila koja reguliraju prikaz teksta mogu se koristiti za oblikovanje teksta unutar ćelije. Gotovo svi HTML elementi koji se mogu pojaviti unutar tijela dokumenta dopušteni su unutar ćelije. , uključujući oznake koje kontroliraju izgled teksta -

,
,

---

, kodovi zaglavlja - od

prije

, oznake za oblikovanje znakova -<В>, , , , , , , oznake umeću grafičke slike , hipertekstualne veze<А>i tako dalje. Odmah naglašavamo da je opseg oznaka navedenih unutar jedne ćelije ograničen na granice ove ćelije, bez obzira na prisutnost zadnje oznake. Na primjer, ako je boja teksta definirana unutar ćelije - , čak i ako ne postoji završni kod ili ako ga postavite na nekoliko ć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.

Parametri poravnanja sadržaja ćelije su ALIGN i VALIGN. Može se koristiti u kodovima , i ... Parametar horizontalnog poravnanja ALIGN može biti LIJEVO, DESNO i CENTER (zadano je LIJEVO za i CENTAR za ). Parametar okomitog poravnanja VALIGN može biti TOP (vrh), BOTTOM (dno), MIDDLE (sredina), BASELINE (osnovna linija). Zadana postavka je SREDINA. Poravnanje osnovne linije osigurava da se tekst jednog retka u svim ćelijama usidri za jedan redak. Postavljanje opcija poravnanja na razini koda određuje poravnanje za sve ćelije ovog retka, dok se u svakoj pojedinačnoj ćeliji retka mogu definirati vlastiti parametri, nadjačavajući učinak parametara navedenih u .

Evo primjera tablice u kojoj su podaci u ćelijama prvog stupca poravnati udesno, drugi stupac je centriran, a treći je poravnat lijevo (zadano):

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

Prikaz ovog primjera od strane preglednika prikazan je na Sl. 4.11.




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

Parametar NOWRAP onemogućuje mogućnost automatskog rastavljanja teksta ćelije u retke. Može se koristiti u kodovima , i ... Neopravdanu upotrebu ovog parametra treba izbjegavati jer može značajno smanjiti sposobnost dinamičke promjene veličine tablica i narušiti njihovu percepciju. U većini slučajeva dovoljno je primijeniti NOWRAP za pojedinačne ćelije koje stvarno zahtijevaju zabranu prelamanja riječi u novom retku. Prelamanje riječi vrši se samo pomoću separatora između riječi (razmaka), a u nekim slučajevima, kako bi se zabranio razbijanje teksta na određenim mjestima, umjesto znaka razmaka, postavite kod nerazdvojnog razmaka (NonBreaking Space). Primjeri uključuju slučajeve u kojima se ne preporučuje jaz - između brojčane vrijednosti i mjerne jedinice dane vrijednosti; između prezimena i inicijala. Dakle, tekst 650 km ili Jeljcin B.N. preporuča se pisati u obrascu 650 km i Jeljcin B.N.

Parametri WIDTH i HEIGHT mogu se koristiti u kodovima i ... Njihova je sintaksa slična sintaksi ovih parametara za oznaku

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

Složene tablice karakteriziraju potrebu kombiniranja nekoliko susjednih ćelija vodoravno ili okomito u jednu. Ova se značajka implementira pomoću parametara COLSPAN (COLiimn SPANning) i ROWSPAN (ROW SPANning), postavljenih u kodovima

postavljene su postavke za pojedinačne stupce ove grupe. Štoviše, u oznaci ako je potrebno, mogu se specificirati parametri poravnanja čije se vrijednosti odnose na sve stupce dane grupe. Vrijednosti parametara navedene u oznaci , nadjačati vrijednosti iz oznake ... Imajte na umu da u oznaci u ovom primjeru, za razliku od prethodnog, nema parametra SPAN. Ovdje je njegova upotreba besmislena, jer će broj elemenata u grupi odrediti oni koji slijede oznaku oznake ... Stoga, bilo koja vrijednost parametra oznake SPAN bit će nadjačano.

Na sl. 4.17 prikazuje rezultat implementacije gornjeg koda, kao i varijantu prikaza takve tablice s unosom RULES = GROUPS u oznaci

ili

... Oblik zapisa: COLSPAN = broj, gdje je num brojčana vrijednost koja određuje na koliko stupaca treba proširiti trenutnu ćeliju vodoravno. Upotreba parametra ROWSPAN je slična, samo ovdje određujete broj redaka koje trenutna ćelija treba uhvatiti okomito. Prema zadanim postavkama, ovi su parametri postavljeni na jedan. Moguće je istovremeno postavljanje vrijednosti oba parametra za jednu ćeliju. Ispravno postavljanje vrijednosti ovih parametara možda nije vrlo jednostavan zadatak, pogotovo jer vam većina HTML uređivača omogućuje vizualno konstruiranje s naknadnom generiranjem HTML kodova samo najjednostavnijih tablica. Na sl. 4.12 prikazuje primjer prikaza tablice, dobiven iz sljedećeg HTML koda: Stanica koja se proteže u dvije linije Ćelija koja obuhvaća dva stupca Ćelija 3 Ćelija 4 Ćelija 5 Ćelija 6 Ćelija 7 Riža. 4.12. Tablica sa ćelijama koje obuhvaćaju više redaka ili stupaca Nepažljivo postavljanje vrijednosti parametara klizanja ćelija može dovesti do njihovog međusobnog preklapanja i sukoba, u kojima je rezultat nepredvidiv. Tipična upotreba proširenih ćelija je uobičajeni naslov za više susjednih stupaca ili redaka. Ovdje je primjer HTML koda (čiji je prikaz prikazan na slici 4.13), u kojem su proširene ćelije pogrešno oblikovane. Ćelija 1 Ćelija 2 Ćelija 3 (uobičajen Ha tri linije) Ćelija 4 Ćelija 5 Ćelija 6 Ćelija 7 (rasprostranjena na dva stupca) Riža. 4.13. Rezultat netočne definicije proširenih ćelija (preklapanje teksta) Parametar BGCOLOR postavlja boju pozadine za cijelu tablicu, pojedinačne retke ili ćelije. Može se pojaviti u oznakama , , ne sadrži nikakve informacije ili jedan ili više prostora koji se ne tretiraju kao podaci. Stanice koje sadrže nevidljive podatke, na primjer, mogu sadržavati kod ili kod za prijelaz retka , ili bilo koji tekst koji odgovara boji pozadine ćelije. Ako se ćelije koje sadrže podatke (čak i ako su nevidljive) prikazuju na isti način u svim preglednicima, tada će prazne ćelije biti drugačije prikazane. Netscape preglednik ne prikazuje praznu ćeliju, odnosno mjesto na kojem se ta ćelija nalazi bit će obojano bojom pozadine stranice, a ne bojom pozadine ćelije, za razliku od ćelija koje sadrže podatke. Oko praznih ćelija ne iscrtava 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 s bojom pozadine ćelija. Preglednik kao što je NSCA Mosaic daje korisniku mogućnost da odredi prirodu izlaza praznih ćelija tablice odabirom odgovarajućih opcija. Poznavanje ovih značajki omogućit će vam dizajniranje tablica koje će biti prikazane na prikladan način, bez obzira na preglednik koji korisnik odabere. U nekim slučajevima za to je dovoljno stvoriti ćelije koje sadrže jedan kod umjesto nekoliko praznih ćelija. Poravnavanje podataka u stupcima tablice Čest problem pri izradi tablica je postavljanje opcija 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 nego ne, potrebno je osigurati isto poravnanje za sve stavke u istom stupcu, jer u većini slučajeva stupac sadrži homogene podatke. U ranijim verzijama HTML-a, predloženo je korištenje parametra COLSPEC (COLumn SPECification) za to, koji je naveden u oznaci i ... Ovu značajku ne podržava HTML specifikacija, ali je podržavaju i Netscape i Microsoft Internet Explorer. Obrazac zapisa je isti kao i za oznaku , i to: BGCOLOR = vrijednost, gdje je vrijednost sadržaj boje u RGB formatu ili njezin 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 se može postaviti unutar ćelije tablice. Takve tablice se nazivaju ugniježđene tablice. Pravila za njihovu konstrukciju ne razlikuju se od konstrukcije tablica i ne trebaju poseban opis. Samo imajte na umu da svi preglednici koji podržavaju tablice ne odražavaju ispravno složene tablice s više razina ugniježđenja, stoga je potreban oprez pri njihovoj upotrebi. Ovdje je primjer tablice koja koristi jednu razinu ugniježđenja. Gradovi Lenjingradske oblasti H - gradsko stanovništvo (tisuću stanovnika, 1992.) P - udaljenost od Sankt Peterburga (km) Gradovi podređeni Sankt Peterburgu Grad H P Zelenegopsk 13.6 50 Kolpino 144.6 26 Kronstadt 45.2 48 Lomonosov 42.0 40 Pavlovsk 25.4 30 Petrodvorets 83.8 29 Puškin 95.1 24 Sestroretsk 34.9 35 Svi gradovi podređeni administracija Petersburg, imati izravni grad telefonske brojeve. Regionalni gradovi Grad H P Boksitogorsk 21.6 RAVNI = DESNO> 245 Balkhov 50.3 RAVNI = DESNO> 122 Bcevolozhsk 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 RAVNI = DESNO> 159 Gatchina 80.9 46 Ivangorod 11.9 RAVNI = DESNO> 147 Kamennogorsk 5.9 157 Kingisepp 51.5 RAVNI = DESNO> 138 Kirishi 53.8 RAVNI = DESNO> 115 Kirovsk 23.8 55 Lodeynoye Pole 27.3 RAVNI = DESNO> 244 Lyga 41.8 139 (nastavak tablice) Grad H P Lyuban 4.7 85 Nova Ladoga 11.2 RAVNI = DESNO> 141 Prijatan 22. 9 RAVNI = DESNO> 40 Pikalevo 25.1 RAVNI = DESNO> 246 Podrška 23.1 285 Primorska 6.7 137 Priozersk 20.5 RAVNI = DESNO> 145 Svetogorsk 15.8 RAVNI = DESNO> 201 Škriljevci 42.6 RAVNI = DESNO> 192 Borik 57.6 81 Tikhvin 72.0 ALGN = DESNO> 200 Tosno 33.8 53 W liscelbypg 12.5 64 Riža. 4.14. Primjer ugniježđenih tablica Rezultat prikaza ovog primjera prikazan je na Sl. 4.14. Na prvi pogled čini se da primjer nema ugniježđenje tablice. Zapravo, cijeli dokument je tablica bez obruba koja se sastoji od naslova i samo jednog retka koji sadrži pet ćelija. Organizacija takve tablice služi isključivo za sređivanje podataka na stranici. Unutar prve ćelije nalazi se još jedna tablica, koja ima svoj naslov i sastoji se od tri stupca, nakon čega slijedi tekst poravnat u sredini. Treća i peta ćelija također sadrže zasebne tablice. Druga i četvrta ćelija su prazne, ne sadrže nikakve podatke i imaju jedan parametar WIDTH koji određuje njegovu širinu. Njihova je svrha postaviti uvlačenje između prve i treće, kao i treće i pete ćelije u kojima se nalaze tablice. Ovo je jedna od mogućih opcija za postavljanje takvog uvlačenja. Druga je mogućnost korištenje parametra CELLSPACING, koji određuje udaljenost između ćelija, ali ovaj parametar postavlja i horizontalne i vertikalne uvlake, što trenutno nije potrebno. Osim toga, prazna ćelija s navedenom širinom smanjit će se kada se okvir za prikaz suzi, za razliku od prostora navedenog parametrom CELLSPACING (kao i CELLPADDING). Pokušajte upotrijebiti ovaj primjer da smanjite širinu okvira za prikaz u pregledniku ili, što će dovesti do istih rezultata, povećati veličinu fonta koji se koristi za prikaz teksta. Udaljenost između tablica bit će smanjena na nulu, što će omogućiti da se sve informacije istodobno vide što je dulje moguće, međutim daljnje promjene neće oštetiti tablicu, već će omogućiti vodoravno pomicanje. Prema sličnoj shemi, možete organizirati postavljanje informacija koje se sastoje ne samo od tablica, već i slika, fragmenata teksta itd. Značajke građenja stolova Ovaj odjeljak govori o nekim specifičnim mogućnostima pojedinačnih preglednika, kao io nekim suptilnostima izrade i prikaza tablica. Prikazivanje praznih ćelija u tablicama Jedna od značajki prezentacije tablica različitim preglednicima je prikaz praznih ćelija. Prema opisu jezika, svi preglednici trebaju ispuniti retke praznim ćelijama ako je u bilo kojem retku njihov broj postavljen manji nego u ostatku redaka. Osim toga, ćelije koje ne sadrže podatke mogu se pronaći bilo gdje u tablici. Postoji razlika između praznih ćelija i ćelija koje sadrže nevidljive podatke. U praznim ćelijama unutar para oznaka i i odredio poravnanje i širinu svakog stupca u tablici. Na primjer, postavljanjem colspec = "L40 R50 C80" određeno je poravnanje podataka u ćelijama za tri stupca tablice: za prvi stupac - LIJEVO, za drugi - DESNO i za treći - CENTER, kao i širinu svaki stupac. Kako se HTML razvijao, ova je opcija izbačena i trenutno nije dio jezične specifikacije 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 pruža posebne oznake - i ... Ove oznake trebale bi se pojaviti odmah nakon opisa. prije prvog pojavljivanja oznake . Parametri oznake i može postojati SPAN, koji određuje broj susjednih stupaca na koje utječu vrijednosti parametara, i ALIGN, koji određuje vodoravno poravnanje podataka u svim ćelijama odgovarajućeg stupca (ili stupaca). Važeće vrijednosti za parametar ALIGN su LIJEVO, DESNO i CENTER. Zadana vrijednost za parametar SPAN je jedan. Označiti dodatno vam omogućuje postavljanje parametra VALIGN, koji određuje okomito poravnanje podataka u ćelijama. Važeće vrijednosti za parametar VALIGN su MIDDLE, TOP i BOTTOM. Razlika između oznaka i leži u činjenici da prvi od njih, osim postavljanja parametara poravnanja podataka za stupce, također uvjetno spaja nekoliko stupaca u grupu. Učinak ove kombinacije prikazan je kada se koristi parametar RULES, koji je opisan u nastavku. Prema zadanim postavkama, svi stupci u tablici smatraju se jednom grupom. Označiti treba koristiti samo za definiranje poravnanja podataka u pojedinačnim stupcima u grupi. Navedimo primjer. Pretpostavimo da želite izgraditi tablicu koja sadrži 6 stupaca, s podacima u prva tri od njih poravnati udesno, a sljedeća tri u sredini. Da biste riješili ovaj problem, trebali biste napisati sljedeći dio HTML koda: (podaci za tablicu) Rezultat prikaza ovog koda prikazan je na Sl. 4.16. Riža. 4.16. Tablica s različitim opcijama poravnanja podataka u skupinama ćelija Još jedan primjer. Pretpostavimo da u prethodnoj tablici prva dva stupca trebaju biti poravnata udesno, a treći - u sredini, a sva tri stupca trebaju biti grupirana. Sljedeća tri stupca također moraju biti grupirana i imati isto poravnanje kao prva grupa. Da biste riješili ovaj problem, trebali biste napisati sljedeći dio HTML koda: (podaci za tablicu) U ovom primjeru, nakon oznake

, iz čega se vidi značenje grupiranja.

Savjet

Budući da je opseg oznaka

i je ograničen na jedini preglednik Microsoft Internet Explorer, trebali biste ih koristiti s oprezom. Lakoća korištenja ovih oznaka je očigledna, ali u praksi se većina tablica gradi korištenjem odgovarajućeg parametra ALIGN poravnanja za svaku ćeliju tablice, gdje je to potrebno, što značajno povećava veličinu izvornog koda tablice, ali omogućuje pregled u bilo kojem pregledniku.




Riža. 4.17. Grupirana tablica stupaca

Postavljanje boje obruba tablice

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

, ... Naziv boje ili njegova heksadecimalna vrijednost može se koristiti kao vrijednost za ove parametre. Parametar BORDERCOLOR određuje boju svih elemenata obruba tablice, a druga dva parametra određuju boju pojedinačnih sastavnih granica, nadjačavajući vrijednost BORDERCOLOR. Parametar BORDERCOLORLIGHT boji lijevi i gornji rub cijele tablice te, sukladno tome, desni i donji rub svake ćelije u navedenoj boji. Drugi parametar BORDERCOLORDARK postavlja boje suprotnih rubova. Zbog kombinacije djelovanja ovih parametara, tablica će izgledati pomalo izdignuta iznad površine stranice ili produbljena. Sve ovisi o odabranoj kombinaciji boja.

Bilješka

Preglednik Netscape 4.x također podržava parametar BORDERCOLOR.

Postavljanje pozadinske slike za tablicu

Microsoft Internet Explorer (kao i Netscape 4.x) dopušta parametru BACKGROUND da definira pozadinsku sliku za tablicu na isti način na koji može cijeli HTML dokument. Ovaj parametar se može postaviti u oznakama

,	i

, , w

Microsoft Internet Explorer vam omogućuje korištenje niza novih oznaka za strukturiranje tablica i fleksibilnu kontrolu prikazivanja okvira i linija mreže.

Oznake

, i strože postaviti strukturu opisa tablice, naglašavajući ćelije zaglavlja tablice, glavni sadržaj tablice i posljednji redak. Ove oznake mogu se pojaviti samo u opisu tablica unutar para oznaka

i	. Oznake za strukturiranje tablice

i.

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

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

Uz korištenje novih oznaka, postaje moguće fleksibilnije kontrolirati granice i linije mreže tablice.

Kontrolu crtanja okvira oko stola vrši parametar FRAME oznake

i mrežne linije tablice s parametrom RULES. Na primjer, postaje moguće nacrtati samo okomite crte između stupaca i umjesto obruba oko cijele tablice dati vodoravne linije na vrhu i dnu tablice.

Parametar FRAME može imati sljedeće vrijednosti:

• KUTIJA ili GRANICA - okvir je nacrtan sa sve četiri strane
• IZNAD - samo s gornje strane
• ISPOD - samo na donjoj strani
• STRANE - nacrtane su donja i gornja strana
• VSIDES - nacrtane su lijeva i desna strana
• LHS - samo na lijevoj strani
• RHS - samo s desne strane
• PONIŠTITI - stol bez vanjskih okvira

Parametar RULES kontrolira crtanje unutarnjih linija mreže tablice i može imati sljedeće vrijednosti:

• SVI - nacrtane su sve unutarnje linije
• GRUPE - povlače se samo linije koje razdvajaju grupe
• REDOVI - crtaju se linije koje razdvajaju linije
• COLS - crtaju se linije koje razdvajaju stupce
• NIJEDAN - unutarnje linije se ne povlače

Primjer:

.

Bilješka

Crtanje mrežnih linija tablice i okvira vršit će se samo ako je prisutan parametar BORDER oznake

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

Evo primjera cjelovitog HTML koda koji stvara tablicu koristeći opisane mogućnosti:

Primjer fleksibilne kontrole linije
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
Ishod	Ishod	Ishod




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

U ovom primjeru, čiji prikaz prikazuje preglednik na Sl. 4.18, prikazana je jedna od mogućih opcija za kontrolu linija mreže i granica oko tablice. Obrub od 5 piksela nacrtan je oko stola (BORDER = S) samo na vrhu i dnu (FRAME = HSIDES). Mrežne crte se crtaju unutar tablice za odvajanje grupa podataka (PRAVILA = SKUPINE). Grupe podataka definirane su, prvo, postojanjem tri oznake , od kojih svaki deklarira zaseban stupac tablice skupina. Drugo, oznake , i<тгоот>također podijeliti podatke tablice u grupe, što određuje crtanje unutarnjih horizontalnih linija.

Postavljanje broja stupaca u tablici

Microsoft Internet Explorer (kao i Netscape 4.x preglednik) omogućuje vam da navedete oznaku

parametar COLS, čija vrijednost određuje broj stupaca u tablici. Pisanje ovog parametra omogućuje vam da ubrzate izgled tablice kada se prikaže u pregledniku, budući da postaje moguće odrediti broj stupaca prije nego što se kod opisa tablice završi učitavanjem. U ovom trenutku omogućavanje ovog parametra ni na koji način ne utječe na napredak učitavanja dokumenta.

Vertikalno poravnanje tablica

Parametar zadnje oznake

specifičan samo za Microsoft Internet Explorer, to je VALIGN, koji određuje okomito poravnanje tablice u odnosu na tekst. Njegovo djelovanje je slično onome za slike.

Bilješka

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

• za oznaku

parametar ALIGN može imati vrijednosti LIJEVO ili DESNO, a označava mjesto tablice, poravnato s lijevim ili desnim rubom;

za oznaku

, ... Ovaj par znači da smo napravili jedan red u tablici, a koliko će takvih oznaka biti upisano, toliko će biti redaka.



Pa unutra

sada stavljamo još jedan par - ... Ovaj par znači da smo u ovom retku napravili jedan stupac, a ako je u svakom tr upisano nekoliko td, onda će ovaj red imati nekoliko stupaca. Čisto? Ako ne, onda pogledajmo primjer kako ovdje sve funkcionira... Recimo da želim napraviti tablicu učenika i ocjena. Zatim upisujemo sljedeće unutar oznake :

parametar ALIGN uzima vrijednosti TOP ili BOTTOM, a označava mjesto zaglavlja tablice iznad ili ispod tablice;

za oznake

i	parametar ALIGN uzima vrijednosti LIJEVO, DESNO ili CENTER, a znači vodoravno poravnati sadržaj odgovarajuće ćelije (ili ćelija) u tablici. Alternativa prikazu tablice Podrška za tablice postala je uobičajena značajka web-preglednika, tako da postoji malo ili nimalo razloga za izbjegavanje njihove upotrebe. Ipak, razmotrit ćemo moguće opcije za alternativne prikaze podataka koji se mogu koristiti umjesto tablica ili kao dodatak njima. Neke druge metode koje ne koriste koncept tablica: Korištenje unaprijed formatiranog teksta. Ova tehnika se tradicionalno koristila u ranim verzijama HTML-a, kada podrška za tablice još nije bila dostupna. Njegova uporaba do danas nije izgubila na važnosti, budući da će takvi tekstovi biti ispravno prikazani u svim preglednicima, uključujući i one isključivo tekstualne. Korištenje slike koja sadrži tablicu. Tablica se može izraditi bilo kojim uređivačem teksta ili čak prikazati u web pregledniku, a zatim spremiti kao sliku u jednom od grafičkih formata. Ovo nije najbolja opcija jer se gubi sva fleksibilnost za dinamičko prilagođavanje prikaza tablica. Osim toga, postaje potrebno pohraniti dodatnu datoteku sa slikom, čija će veličina, osim toga, obično biti mnogo veća od veličine teksta koji opisuje HTML tablicu. Moguće područje primjene su tablice strogo definiranih veličina, za koje je ovisnost njegovog prikaza o bilo kojim vanjskim čimbenicima (fontovima, načinima rada preglednika itd.) neprihvatljiva. Korištenje popisa umjesto tablica. U najjednostavnijim slučajevima, umjesto organiziranja tablica, sasvim je moguće proći s jednom od vrsta popisa dostupnih u HTML-u. Priprema stolova Za pripremu HTML tablica mogu se koristiti bilo koji uređivači, od kojih većina ima alate za vizualno kreiranje tablica. Navedimo primjer pripreme tablice u uređivaču HotDog Professional. Za izradu tablice samo odaberite stavku Tablice iz izbornika Umetanje, nakon čega se otvara dijaloški okvir prikazan na sl. 4.19. Izrada tablice sastoji se od popunjavanja odgovarajućih polja u prozoru. Nakon što odredite broj redaka i stupaca u tablici, možete nastaviti s izravnim popunjavanjem pojedinačnih ćelija tablice, koje će biti prikazane u istom dijaloškom okviru. Dijaloški okvir ima gumb Preview, klikom na koji vam omogućuje pregled rezultirajuće tablice 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 završetka pripreme podataka za tablicu, kliknite gumb U redu. Zatim će generirani kod opisa tablice biti umetnut u uređeni HTML dokument. Za primjer prikazan na sl. 4.19, generirat će se sljedeći kod: (dio koda izostavljen) Šef stola 1. stupac 2. stupac 3. stupac 4. stupac 1 2 3 4 Slično, ovaj zadatak se postiže korištenjem komponente Netscape Composer programa Netscape Communicator. Na sl. 4.21 prikazuje dijaloški okvir u kojem trebate ispuniti potrebna polja. Za unos dodatnih parametara oznake Dostupan je dodatni HTML gumb. Nakon što ispunite polja dijaloškog okvira, trebate kliknuti gumb Primijeni i tada ćete dobiti priliku ispuniti ćelije tablice (slika 4.22). Riža. 4.21. Dijaloški okvir za određivanje opcija tablice Netscape Composer Riža. 4.22. Početna pozicija kursora za unos u praznoj tablici je tijelo stola. Tijelo se sastoji od redova i stupaca. Tablica se popunjava red po redak. Svaka oznaka stvara novu liniju. Dalje u ugniježđenim koristi se za sadržavanje zaglavlja grupe u tablici ("zaglavlje tablice", nemojte brkati sa zaglavljima). Označiti koristi se za sadržavanje "podnožja" tablice (podnožja). Označiti koristi za sadržavanje "tijela" tablice (tijela). Element treba koristiti samo jednom u jednoj tablici u sljedećem kontekstu: kao dio elementa nastaju stupci. Može se stvoriti više stupaca. U tom slučaju morate pratiti broj stupaca u svakom retku. Na primjer, ako je prvi red imao 5 stupaca, onda bi sljedeći retki također trebali imati 5 stupaca. Inače će stol plutati. Moguće je kombinirati stanice. Kako napraviti tablicu u html-u Dajemo primjer, html kod: Primjer tablice 1. stupac 2. stupac Obratite pažnju na ćeliju ... Koristimo poseban atribut colspan za vodoravno kombiniranje ćelija. Njegova brojčana vrijednost označava broj stupaca za kombiniranje. Postoji i analog ovog atributa: oznaka (zaglavlje tablice), gdje također trebate napisati colspan. Rezultat će biti isti. Ali često se koristi uobičajeni td. Sada pogledajmo pobliže sve atribute oznake. . Atributi i svojstva oznake Na početnu oznaku možete napisati razne atribute. 1. Svojstvo align = "parametar" - postavlja poravnanje tablice. Može poprimiti sljedeće vrijednosti: U gornjem primjeru, poravnali smo tablicu po sredini align = "center". Ovaj se atribut može primijeniti ne samo na tablicu, već i na pojedinačne ćelije tablice. ... Dakle, poravnanje će biti različito u različitim stanicama. Na primjer , , , ili cols - linija se prikazuje između stupaca nijedan - sve granice su skrivene rows - granica se iscrtava između redaka tablice kreiranih kroz oznaku 12. Širina svojstva = "broj" - postavlja širinu tablice: ili u pikselima ili u postocima. 13. Property class = "class_name" - možete odrediti naziv klase kojoj tablica pripada. 14. Stil svojstava = "stilovi" - stilovi se mogu postaviti pojedinačno za svaku tablicu. Sada je vrijeme da zaronite u tablicu i pogledate atribute ćelija tablice. Ovi atributi moraju biti upisani u početnu oznaku. i dostupne su iste opcije kao za bit će hijerarhijski primijenjen na sve a ne unutar elementa : ili žice ... ... ... 2. Svojstvo background = "URL" - postavlja pozadinsku sliku. Umjesto URL-a mora biti napisana adresa pozadinske slike. Primjer Primjer tablice 1. stupac 2. stupac Pretvoreno na stranici u sljedeće: U gornjem primjeru, naša pozadinska slika nalazi se u mapi img (koja se nalazi u istom direktoriju kao i html stranica), a slika se zove fon.gif. Imajte na umu da smo u oznaku dodali style = "boja: bijela;" ... Budući da je pozadina gotovo crna, da se tekst ne spaja s pozadinom, tekst smo napravili bijelim. 3. Svojstvo bgcolor = "color" - postavlja boju pozadine tablice. Kao boju možete odabrati bilo koju od cijele palete (pogledajte kodove i nazive html boja) 4. Granica svojstva = "broj" - postavlja debljinu obruba tablice. U prethodnim primjerima naveli smo border = "1", što znači da je širina obruba 1 piksel. 5. Svojstvo bordercolor = "color" - postavlja boju obruba. Ako je granica = "0", tada neće biti obruba i boja obruba neće imati smisla. 6. Svojstvo cellpadding = "broj" - uvlačenje od okvira do sadržaja ćelije u pikselima. 7. Svojstvo cellspacing = "number" - udaljenost između ćelija u pikselima. 8. Svojstvo cols = "broj" - broj stupaca. Ako ga ne navedete, preglednik će sam odrediti broj stupaca. Jedina razlika je u tome što će navođenje ovog parametra vjerojatno ubrzati učitavanje tablice. 9. Okvir svojstva = "parametar" - kako prikazati obrube oko stola. Može poprimiti sljedeće vrijednosti: void - ne crtajte granice granica - granica oko stola iznad - obrub na vrhu tablice ispod - obrub na dnu tablice hsides - dodajte samo vodoravne rubove (vrh i dno tablice) vsides - nacrtajte samo okomite granice (lijevo i desno od tablice) rhs - granica samo s desne strane tablice lhs - obrub samo na lijevoj strani stola 10. Visina svojstva = "broj" - postavlja visinu tablice: ili u pikselima ili u postocima. 11. Pravila svojstava = "parametar" - gdje prikazati granice između ćelija. Može poprimiti sljedeće vrijednosti: sve - crta se crta oko svake ćelije u tablici grupe - linija se prikazuje između grupa koje su formirane oznakama . Atributi i svojstva 1. Svojstvo align = "parametar" - postavlja poravnanje pojedinačne ćelije u tablici. Može poprimiti sljedeće vrijednosti: lijevo - lijevo poravnanje centar - poravnanje središta desno - desno poravnanje 2. Svojstvo background = "URL" - postavlja pozadinsku sliku ćelije. Umjesto URL-a mora biti napisana adresa pozadinske slike. 3. Svojstvo bgcolor = "color" - postavlja boju pozadine ćelije. 4. Svojstvo bordercolor = "color" - postavlja boju obruba ćelije. 5. Svojstvo char = "slovo" - postavlja slovo od kojeg treba izvršiti poravnavanje. Vrijednost atributa align mora biti postavljena na char. 6. Svojstvo colspan = "broj" - postavlja broj horizontalnih ćelija za kombiniranje. 7. Visina svojstva = "broj" - postavlja visinu tablice: ili u pikselima ili u postocima%. 8. Širina svojstva = "broj" - postavlja širinu tablice: ili u pikselima ili u postocima%. 9. Svojstvo rowspan = "broj" - postavlja broj spojenih okomitih ćelija. 10. Svojstvo valign = "parametar" - okomito poravnanje sadržaja ćelije. vrh - poravnava sadržaj ćelije s vrhom retka srednje - srednje poravnanje dno - poravnati prema dnu baseline - poravnanje osnovne linije Napomena 1 Za oznaku ... Parametri za jednu oznaku unutar Kako spriječiti da se ćelije tablice lijepe zajedno U slučaju korištenja obruba (granice ćelija) i nula paddinga između ćelija, one su i dalje zalijepljene i dobivate dvostruki obrub. Da biste to izbjegli, morate registrirati tablicu border-collapse: collapse u tablici stilova: ... Dragi čitatelju, sada ste naučili puno više o html tablici. Sada vam savjetujem da prijeđete na sljedeću lekciju. . Svaki red tablice smješten je u element ... . Ćelija zaglavlja tablice smještena je u element (Ovo prikazuje sadržaj podebljano i centrirano). Svaka ćelija podataka tablice smještena je u element . Naziv tablice, ako je potrebno, stavlja se unutar elementa (opcijski element tablice). Skrećem vam pozornost na činjenicu da ako planirate koristiti ovaj element u svojoj tablici, onda on mora slijediti u dokumentu odmah nakon elementa ... ... ... .. . Prijeđimo na praktični dio izrade proračunske tablice: granica = "1"> Osnovna tablica Ćelija zaglavlja 1 Ćelija zaglavlja 2 Ćelija zaglavlja 3 Podatkovna ćelija 1, redak 2 Podatkovna ćelija 2, redak 2 Podatkovna ćelija 3, redak 2 Podatkovna ćelija 1, redak 3 Podatkovna ćelija 2, redak 3 Podatkovna ćelija 3, redak 3 Radi jasnoće, ovoj smo tablici dodali atribut obruba s vrijednošću "1", koji određuje da se granica treba prikazati oko ćelija tablice. Atribut granice se gotovo nikada ne koristi u HTML-u, u ovom slučaju korištenje CSS-a bi bilo poželjno i pružilo bi veću fleksibilnost. U sklopu proučavanja HTML-a naučit ćemo oblikovati tablice gramatički, te prilikom učenja CSS 3 u članku "" naučit ćemo kako ih profesionalno stilizirati. Rezultat našeg primjera: Spojite stupce Spojite stupce u elemente (podatkovna ćelija) ili (ćelija zaglavlja) može se izvesti pomoću atributa colspan (ćelija se rasteže udesno za navedeni broj ćelija). granica = "1"> Osnovna tablica Ćelija zaglavlja 1 Ćelija zaglavlja 2 Podatkovna ćelija 1, redak 2 Podatkovna ćelija 2, redak 2 Podatkovna ćelija 3, redak 2 Podatkovna ćelija 1, redak 3 Podatkovna ćelija 2, redak 3 Podatkovna ćelija 3, redak 3 Rezultat našeg primjera: Povezivanje nizova Spojite nizove u elemente ili dopušteno korištenje atributa rowspan (raspon ćelija je od vrha do dna i obuhvaća više redaka - ćelija je rastegnuta prema dolje). granica = "1"> Osnovna tablica Ćelija zaglavlja 1 Ćelija zaglavlja 2 raspon reda = "2"> Podatkovna ćelija 1, redak 2 Podatkovna ćelija 2, redak 2 Podatkovna ćelija 2, redak 3 Podatkovna ćelija 2, redak 3 Podatkovna ćelija 3, redak 3 Rezultat našeg primjera: Svojstva stupca Primjer korištenja atributa span na pojedinačnim stupcima tablice: span = "2" style = "boja pozadine: kaki"> Broj prijave Servis cijena, rub. Ukupno 31337 Čitanje po sluhu 1 000 1 000 Rezultat našeg primjera: Ako trebate stilizirati samo jedan stupac, dovoljno je navesti atribut span unutar elementa Broj prijave Servis cijena, rub. Provizija, trljanje. 31337 Čitanje po sluhu 1 000 150 Rezultat našeg primjera: Dijeljenje stola na dijelove Za podjelu tablice na dijelove koriste se sljedeće HTML oznake: Označiti (kao podređeni (ugniježđeni) element), ako je označen (definira grupu stupaca u tablici) mora slijediti nakon ovi elementi, ali prije nego bilo koja oznaka , i ... Osim toga, element mora imati jednu ili više oznaka unutra (spremnik za kreiranje niza). Elementi , i ne utječu na zadani izgled tablice. Međutim, koristeći CSS, ove elemente možete stilizirati kako god želite. (naziv tablice) i style = "boja pozadine: srebrna"> style = "boja pozadine: koralj"> style = "boja pozadine: kaki"> Servis Cijena Iznos 3 000 Čitanje po sluhu 1 000 Igra punchera 2 000 Rezultat našeg primjera. Dobar dan svima dragi moji prijatelji. Kako ide ljeto? Nadam se da svi rade dobro. Pa, danas ćemo nastaviti učiti osnove html-a i danas će vjerojatno biti zadnja lekcija na ovu temu, jer ćemo tada zaroniti u CSS. Dakle, kada je riječ o html-u, ne mogu a da ne govorim o tablicama, budući da su i one prilično značajna tema. Uzmite barem isti WordPress. Prema zadanim postavkama, ovaj motor ne može stvoriti tablicu. Potreban vam je ili poseban dodatak (plugin) ili poseban programski kod (skripta). Ali jednostavno možemo raditi što želimo s jednostavnim oznakama. Općenito, danas ću vam reći kako napraviti tablicu u html-u, jer vam to može jako pomoći. Sjećam se kako sam napravio svoje prve stranice koristeći raspored tablice, t.j. zaglavlje, bočne trake, podnožje i blok sadržaja bili su samo elementi tablice. To sam spomenuo u svom članku o. Istina, danas više nije uobičajeno izrađivati ​​stranice pomoću tablica, ali to ne znači da nisu potrebne. Dapače, točno je suprotno. Ono što je također super je da ne morate ništa ni crtati. Sve se radi u običnoj bilježnici (dobro, ili nekom drugom, kao što je Notepad ++), i to prilično jednostavno. Općenito, spremimo se za posao. Oznake Označavanje je ovdje malo kompliciranije nego u drugim oznakama, ali sve je lako zapamtiti. Zato gledamo i ne ometamo se. Bilo koja tablica je uvijek zatvorena u oznaku para ... Oni. ti znakovi daju naredbu da se stol nalazi ovdje. Uparena oznaka nalazi se unutar tablice

	Matematika	ruski jezik	Povijest
Medvedev	3	5	5
Smirnov	5	5	5
Sokolov	3	2	3

Što smo učinili ovdje? I napravili smo četiri reda (tr), od kojih svaki sadrži četiri tablice (td). U prvom bloku tr upisali smo naziv akademskih disciplina, a prvi stupac ostavili prazan kako ne bismo prekršili tablicu.

Dalje u svakom prvom paru td ubacujemo imena učenika, i svih ostalih td popunite ocjene u odgovarajuću ćeliju. Općenito, napišite ovo i spremite datoteku, a zatim je otvorite u pregledniku, tada ćete sami razumjeti kako se to događa.



No, ulazeći u dokument, vidimo da tablica nije baš slična onome što smo planirali. A što tu nedostaje? Tako je – granice. Ali ne brini. O tome ću vam reći u nastavku.

Ali radi pristojnosti, pokazat ću vam još jednu oznaku koja ističe i centrira podatke u tablicama. Ova oznaka je napisana kao ... Istaknimo naše naslove u tablici. Da biste to učinili, samo zamijenite oznake td, na th na onim mjestima gdje upisujemo nazive i naslove disciplina.



I da vidimo što ćemo dobiti zahvaljujući ovome. Kao što sam rekao, ova imena su sada centrirana i istaknuta. Ovo smo htjeli.



Općenito, nekako smo shvatili oznake. Iako postoje i drugi (možete pogledati htmlbook), ali neću se zadržavati na njima.

Atributi

Naravno, takva stvar kao što su tablice ne može bez posebnih atributa, a ja ću vam pokazati neke od njih.

Granica

Pa, htio bih početi s onim što sam rekao gore, a zatim o granicama. Standardno ih nema, pa je tablica neprivlačna i nije sasvim razumljiva. Ali to se može popraviti, a u tome će nam pomoći atribut border, koji se postavlja izravno u početnu oznaku.

... Učinite kako sam vam pokazao u donjem primjeru, odnosno postavite vrijednost atributa border = "1".



Nakon što ste to učinili, spremite rezultat i pokrenite dokument. Dobro? To je sasvim druga stvar. Stol se sada vratio u normalan oblik i izgleda kako bi trebao. Možete eksperimentirati s različitim vrijednostima obruba i vidjeti što vam najbolje odgovara.



Padding i razmak (cellpadding and cellspacing)

Sasvim je prirodno da jedan prikaz stola za sve prilike neće odgovarati svima. Ali to možemo malo promijeniti, zahvaljujući dva slična atributa.

Cellpadding = "" - mijenja udaljenost od samog okvira do sadržaja u ćeliji. Dakle, sve ćelije u tablici postaju veće. Zapišimo ovaj atribut u tablicu, i postavimo vrijednost na 5, i vidimo kako će se razlikovati od izvorne verzije.

Hop. Vidjeti? Udaljenost se povećala. na taj način možete sami zamijeniti željene vrijednosti, čime ćete proširiti ćelije.

Cellspacing = "" - mijenja udaljenost između ćelija tablice i njegove vrijednosti se također mjere u pikselima. Pokušajmo i ovaj atribut postaviti na vrijednost 5 i vidjeti što će se dogoditi.



Dobro? Je li suština jasna? Kao što vidite, razmak između stanica je postao širi. To je upravo ono čemu smo težili.



Uskladiti

Pa, gdje smo bez ovog prekrasnog atributa koji nam omogućuje da sve uskladimo na različitim mjestima? Align radi na isti način kao i kod ostalih oznaka koje smo ranije prošli i ima tri značenja:

• Centar
• Pravo

Zapišimo svaku od vrijednosti i vidimo kako će tablica biti raspoređena.



Dobro? Čini se da sve funkcionira i mislim da bi trebalo biti jasno. Ali ako imate pitanja, slobodno pitajte.



Pa, to je u biti sve što sam vam danas htio reći o stolovima. Nadam se da vam je sve bilo jasno. Pa, ako želite detaljno proučiti sve zamršenosti rada s HTML-om i CSS-om i naučiti kako sami izraditi web stranice, preporučujem vam da pogledate vrhunski video tečaj na ovu temu. Za početnika je ovo najrazumljiviji, za mene, video tečaj, u kojem će jednostavno sve prožvakati i staviti na police.

Pa, završavam svoju lekciju za danas. Ne zaboravite se pretplatiti na ažuriranja mog bloga kako ne biste propustili važne informacije ili vijesti. I vidjet ćemo se u drugim člancima. Sretno i doviđenja!

Srdačan pozdrav, Dmitry Kostin.