Tag që përcakton një grup të rreshtave të tryezës. Atributet ALIGN dhe VALIGN

09.11.2015


Përshëndetje!
Ne vazhdojmë të mësojmë bazat e HTML. Në këtë mësim do t'ju tregoj dhe do të tregoj me shembuj si të krijoni një tryezë në HTML... Dhe ne gjithashtu do të shqyrtojmë se si mund të vendosni ngjyrën e qelizave të tryezës, si ta vendosni në tryezë, të mësoni se si të bëni një bord të tryezës, etj.
Tabelat HTML përdoren shpesh në HTML për të renditur disa informacione. Më parë, tabelat ishin përdorur gjithashtu për të krijuar një skelet të faqeve të internetit:

... por kjo është një gjë e së kaluarës, pasi sot ka mënyra më efikase për të bashkuar me kornizë një faqe në internet. Unë shpesh përdor një tryezë në blogun ose faqen time, për shembull, si në.

Mendoj se e kuptuat se për çfarë duhet të mësoni të krijoni një tryezë.

Cilat janë etiketat kryesore të tabelës?

○ etiketë TABELA
Containershtë ena kryesore për krijimin e një tabele dhe përmban elementë të tjerë të tabelës si kolonat dhe rreshtat.
Kërkohet etiketimi mbyllës.

○ etiketë TR

Brenda kontejnerit

……
vendosen rreshtat:

Kolonat krijohen duke përdorur etiketën .
Kërkohet etiketimi i mbylljes.

Kujdes: Nuk është e mundur të krijoni një tabelë pa përdorur të gjitha këto etiketime.

Tani le të përpiqemi të përdorim teorinë dhe të krijojmë një tryezë në praktikë.

Detyrë: krijoni një tabelë me një rresht me tre kolona.

rreshti -1 / kolona 1 kolona 2 kolona 3

Detyrë: krijoni një tabelë me tre rreshta dhe tre kolona.

rreshti -1 / kolona 1 kolona 2 kolona 3
rreshti -2 / kolona 1 kolona 2 kolona 3
rreshti -3 / kolona 1 kolona 2 kolona 3

A është gjithçka e qartë për ju deri në këtë pikë? Kush nuk kupton, ngre dorën! Po, të gjithë e kuptuan, kështu që ne shkojmë më tej.

Tani le të shohim atributet për tabelën.

* Atributet

Kufijtë e tryezës HTML

Për ta bërë tabelën të dukshme, në etiketë

aplikuar atribut "kufiri» .

Nëse vlera e atributit « kufiri» "0", kufiri nuk do të jetë i dukshëm nëse nuk shtohet në etiketë

atribut "Kufiri" , kufiri në tabelë nuk do të jetë i dukshëm.

Kufijtë e tryezës HTML - faqja

rreshti -1 / kolona 1 kolona 2 kolona 3

Rezultati:

Provoni të ndryshoni vlerën në atribut "Kufiri""dhjetë" .

Si të kombinoni qelizat në një tabelë

Për të kombinuar qelizat në një tryezë përdorni atributet "Colspan" dhe "rowspan" në etiketë < td> .

  • colspan - bashkim horizontale i qelizave;
  • rowspan - bashkojnë vertikalisht qelizat.

Në vlerat, specifikoni sa qeliza dëshironi të bashkoni.

rreshti 1 kolona 1
rreshti 2 kolona 1 rreshti 2 kolona 2

Rezultati:

rreshti 1 kolona 1 rreshti 1 kolona 2
rreshti 2 kolona 1

Rezultati:

Shembull më kompleks:

Tabelat në faqen e HTML

rreshti -1 / kolona 1 kolona 2 kolona 3
rreshti -2 / kolona 1 kolona 2 kolona 3 kolona 4

Rezultati:

Si të rritet hapësira midis qelizave të tabelës

Për të rritur distancën midis tekstit dhe kufirit të qelizës, shkruani atributin "Mbushja e qelizave" në etiketë

Në vlerat e atributit "cellpadding", specifikoni distancën e prerjes

rreshti 1 kolona 1 kolona 2

Rezultati:

Për të rritur hapësirën ndërmjet qelizave në një tabelë, përdorni atributin "Hapësira qelizore" në etiketë

Në vlerat e atributit "Hapësira qelizore" specifikoni distancën midis qelizave

rreshti 1 kolona 1 kolona 2

Rezultati:

Si të krijoni sfond të tryezës HTML

Për ta bërë sfondin e tryezës HTML përdorni në etiketë

dhe

atribute të tilla:

  • BGCOLOR - ngjyra e sfondit për të gjithë tryezën ose për secilën qelizë veç e veç. Ngjyra jepet me kod ose fjalë.
  • HISTORIKU - sfondi në tabelë është i mbushur me një foto.
Tabelat në faqen e HTML
rreshti -1 / kolona 1 kolona 2 kolona 3
rreshti -2 / kolona 1 kolona 2 kolona 3 kolona 4

Rezultati:

Si të futni një fotografi në një tryezë HTML

Për të futur një fotografi në një tryezë HTML, midis etiketës

fut etiketën .

rreshti 1 qeliza 1 qeliza 2

Rezultati:

Vlerat specifikohen në piksel (px) ose përqindje (%)

Rendit përmbajtjen në tabelën HTML

Për të rreshtuar përmbajtjen në tryezën HTML përdorni për të etiketuar atribut "Rreshto" dhe "Valign" :

ALIGN - rreshtimi horizontal i përmbajtjes në tabelë.
Vlerat:

  • u largua - shtyni përmbajtjen në të majtë (parazgjedhur);
  • qendra vendosur në qendër;
  • e drejtë - shtyni përmbajtjen në të djathtë

VALIGNI - rreshtimi vertikal i përmbajtjes në tabelë.
Vlerat:

  • majë shtypni përmbajtjen në krye;
  • fund shtyni përmbajtjen në fund;
  • e mesme vendosni përmbajtje në mes
teksti

qeliza e paracaktuar përmbajtja është e rreshtuar horizontalisht në të djathtë, vertikalisht - shtypni në fund
përmbajtja është e rreshtuar horizontalisht në të majtë, vertikalisht - shtypni atë në krye përmbajtja është e rreshtuar horizontalisht në qendër, vertikalisht - shtypni në mes

Rezultati:

Si të rreshtojmë në qendër tryezën HTML

Për të rreshtuar në qendër tryezën, duhet ta mbështillni tabelën me etiketën

:

Kodi i tabelës

rreshti -1 / kolona 1 kolona 2 kolona 3

Etiketa shtesë dhe kryesore në tabelë

Tabela për faqen e internetit
Emri 1 Titulli 2
1 2

Rezultati:

Kështu që mbaruam me tabelat. Tani mund ta krijoni vetë një tryezë të çfarëdo kompleksiteti. Përforconi këtë mësim. Mundohuni të krijoni vetë ndonjë tryezë.
Unë pres që t'ju shoh në mësimin tjetër. Regjistrohu për azhurnimet në blogun tim.

Postimi i mëparshëm
Postimi tjetër

Pastaj tabelat luajnë një rol shumë të rëndësishëm në krijimin e një kornize tel të padukshme për një faqe në internet. Dhe kjo do të ndihmojë për të rregulluar në mënyrë të barabartë dhe të bukur tekstin, menutë, fotografitë, etj.
Për një kuptim më të mirë të asaj që po përpiqem t'ju them, hidhni një vështrim në një shembull të kornizës së faqes në internet:

Kështu që, si të krijoni një tabelë të thjeshtë në HTML?
Për të ndërtuar një tryezë, duhet të përdorni tre etiketa:

TABELA kjo etiketë është e nevojshme për të hapur tryezën. Ky është një lloj ene që përmban elementë të tjerë. Këtu e lakova që të mos e kuptosh dot pa donut. Asgjë, do ta kuptoni kur të shihni një shembull.
Etiketa përfundimtare kërkohet.

Tabela përbëhet nga një rresht

rreshti 1 rreshti 1
rreshti 2 rreshti 2
rreshti 3 rreshti 3
qeliza 1 qeliza 2
qeliza 1 qeliza 2
qeliza 1 qeliza 2

TR krijon një rresht të ri tryeze. Etiketa përfundimtare kërkohet.

TD krijon një qelizë të re në rresht. Etiketa përfundimtare kërkohet.

Le të hedhim një vështrim në një shembull për të kuptuar më mirë të gjitha sa më sipër:

Tabela HTML

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2
rreshti 3 qeliza 1 rreshti 3 qeliza 2

Ja rezultati:

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2
rreshti 3 qeliza 1 rreshti 3 qeliza 2

Më lejoni të shpjegoj gjithçka.
Para se të krijohet çdo tryezë e re, hapet një etiketë

.
Tjetra, ne e vendosim atë në mes të enës.
etiketë , e cila tregon fillimin e një serie të re.
Në këtë rresht, futni dy qeliza me përmbajtje duke përdorur etiketën

Mbyllni rreshtin me një etiketë .
Hapja e një rreshti tjetër me një etiketë
Mbyllni rreshtin me një etiketë .
Hapni rreshtin e tretë me etiketën dhe futni dy qeliza në të përsëri.
Mbyllni rreshtin me një etiketë .
Mbyllni tryezën me një etiketë
rreshti 1 qelizë1 rreshti 1 qelizë2
.

Unë mendoj se ju e kuptuar atë? Në rast se dikush harron se çfarë është një atribut kufiritë cilën po e përdor së bashku me etiketën

, Unë ju kujtoj se kjo është trashësia e kornizës. Nëse në kufiri do të vendoset në "0", atëherë kufijtë e tabelës do të jenë të padukshëm.

Shikoni disa shembuj tabela të krijuara dhe ju mund të shkoni më tej:

Tabela HTML

rreshti 1 qeliza 1
rreshti 2 qeliza 1

Rezultati:

Për të futur një fotografi në një tryezë, duhet të keni njohuri themelore themelore se si të futni një imazh në një skedar HTML. Unë flas për këtë në. Tani që njihni nuancat themelore të një imazhi në HTML, mund të përpiqeni të futni një fotografi në një tryezë. Kjo mund të bëhet si më poshtë:

në vijën midis etiketave fut një imazh.

Tabela HTML

rreshti 1 qeliza 1 rreshti 1 qelizë 2

Rezultati:

rreshti 1 qeliza 1 rreshti 1 qelizë 2

Si të kombinohen qelizat në një tabelë?

Për të kombinuar qelizat në një tabelë, duhet të përdorni atribute si kjo:
COLSPAN - përcakton numrin e kolonave.
Parazgjedhja është 1.
RRUGE - përcakton numrin e rreshtave.
Parazgjedhja është 1.


bashkojnë qelizat në rreshtin e sipërm duke përdorur atributin kolspan :

Tabela HTML

rreshti 1 qelizë 1 + 2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

Si mund të vendos madhësinë e tryezës?

Për të vendosur lartësinë dhe gjerësinë e tabelës, përdorni këto atribute:

Gjerësia - gjerësia e tryezës. Madhësia është vendosur në pixel ose në përqindje.
LARTSIA - lartësia e tryezës. Madhësia është vendosur në pixel ose në përqindje.

Tabela HTML

rreshti 1 qelizë1rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

Rreshtimi i përmbajtjes në një tabelë

Për të rreshtuar përmbajtjen (tekstin, imazhet) brenda tabelës, mund të përdorni atributet e mëposhtme:

ALIGN - rreshtimi horizontal i përmbajtjes në tabelë.
Të atribuojë ALIGN vlerat janë caktuar: majtas (parazgjedhur), qendra, e drejtë.
majtas -
shtyni përmbajtjen në të majtë;
qendra -vendosur në qendër;
e drejtë -
shtyni përmbajtjen në të djathtë

VALIGNI - rreshtimi vertikal i përmbajtjes në tabelë.
Të atribuojë VALIGNI vlerat janë caktuar: lart, poshtë, mes.
majë shtypni përmbajtjen në krye;
fund shtyni përmbajtjen në fund;
e mesme vendosni përmbajtje në mes

Tabela HTML

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

Si të krijoni një sfond të tryezës?

Mund të vendosni gjithashtu sfondin e tabelës për të gjitha qelizat e saj të kombinuara, si dhe për secilën qelizë veç e veç. Mund ta vendosni sfondin me një ngjyrë, ose me një fotografi. Ekzistojnë dy atribute për sfondin:

BGCOLOR - ngjyra e sfondit për të gjithë tryezën ose për secilën qelizë veç e veç. Ngjyra jepet me kod ose fjalë.
HISTORIKU - sfondi në tabelë është i mbushur me një figurë.

Kujdes: nëse dëshironi të vendosni sfondin me një ngjyrë ose një imazh sfondi për të gjithë tryezën, atributet duhet të vendosen në etiketë

... Dhe nëse vetëm në një qelizë specifike, atëherë etiketimi (Tabela Rresht) dhe përfundon me etiketën... Një qelizë e vetme në një rresht inkuadrohet nga një palë etiketash (Të dhënat e tabelës) ose (Kreu i tabelës). Etiketoj ... Kodet fundore, dhe mund të hiqet. Në këtë rast, fundi i një rreshti ose përshkrimi i qelizës është fillimi i rreshtit ose qelizës tjetër, ose fundi i një tabele. Etiketa e tryezës fundore
.

Për një kuptim më të mirë, shihni një shembull:

Tabela HTML

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

Kujdes: nëse fotografia është me madhësi më të vogël për qelizë, atëherë ajo do të përsëritet derisa të mbush qelizën deri në fund. Nëse fotografia është më e madhe se qeliza, atëherë sfondi i figurës do të pritet për t'iu përshtatur madhësisë së qelizës.

Dhe së fundmi, do t'ju tregoj më shumë rreth dy atribute të dobishme.

Në rast se papritmas dëshironi të rritni distancën midis të gjitha qelizave, atributet e mëposhtme do t'ju ndihmojnë:

CELPADDING –Distanca midis kornizës së secilës qelizë të tabelës html dhe përmbajtjes së materialit në të.

Tabela HTML

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

QELIZIMI –Distanca ndërmjet kufijve të qelizave fqinje.

Tabela HTML

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Rezultati:

rreshti 1 qelizë1 rreshti 1 qelizë2
rreshti 2 qeliza 1 rreshti 2 qeliza 2

Fuh, i tha!
Shpresoj se e kam përballuar detyrën dhe kam shpjeguar gjithçka që dija tabela html... Dhe për ju, unë rekomandoj që ta rregulloni materialin mirë.
Mundohuni të krijoni tabelën tuaj, ose më mirë një skelet të tërë për një faqe në internet nga një tryezë html.
Të gjitha të mirat për ju!
Faleminderit për vizitën në blogun tim.

Kapitulli 4

Tabela HTML

Një nga mjetet më të fuqishme dhe të përdorura gjerësisht në HTML janë tabelat. Nocioni i paraqitjes së të dhënave tabelore nuk ka nevojë për shpjegim shtesë. Në HTML, tabelat përdoren jo vetëm tradicionalisht si një metodë e paraqitjes së të dhënave, por edhe si një mjet për formatimin e faqeve të internetit. Këtu janë shembuj të dokumenteve të jetës reale në të cilat një pamje tabelare është një mënyrë e përshtatshme për të ndërtuar një dokument. Në fig. 4.1 tregon një shembull tipik të përdorimit të tabelave për të përfaqësuar të dhënat numerike të ndara sipas rreshtave dhe kolonave. Në fig. 4.2 përdorimi i tabelës shërben vetëm për qëllimin e formatimit të dokumentit, vendosjen e pozicionit relativ të elementeve të faqes. Kur shikoni një dokument të tillë, nuk është menjëherë e qartë se përdoret një tryezë për ta ndërtuar atë, pasi kornizat rreth qelizave të tij nuk vizatohen.

Versioni i parë i gjuhës HTML nuk parashikonte mjete të posaçme për shfaqjen e tabelave, pasi ajo ishte menduar kryesisht për të shkruar një tekst të thjeshtë. Me zhvillimin e fushave të zbatimit të dokumenteve HTML, detyra e paraqitjes së të dhënave, për të cilat është tipike prania e një numri rreshtash dhe kolonash, është bërë urgjente. Në fillim, krijimi i dokumenteve që përmbajnë të dhëna të rreshtuara në kolonë u krye duke përdorur tekstin e paraformuar, brenda të cilit sigurohej shtrirja e nevojshme me futjen e numrit të kërkuar të hapësirave. Kujtojmë që teksti brenda një çifti etiketash

DHE
shfaqet me shkronja të vetme dhe të gjitha hapësirat dhe skedat janë domethënëse. Puna e shtrirjes për një tekst të tillë u bë manualisht, gjë që ngadalësoi ndjeshëm krijimin e dokumenteve. Mbështetja për të dhënat tabelore është bërë standard de facto, pasi që fillimisht u implementua në të gjithë shfletuesit kryesorë dhe vetëm pasi u rregullua një kohë e konsiderueshme në specifikimin HTML 3.2.

Sidoqoftë, mjetet e posaçme për krijimin e tabelave nuk parandalojnë përdorimin e tekstit të paraformatuar. Përdorimi i tabelave nuk është i kufizuar në të dhëna që përbëhen nga rreshta dhe kolona. Një nga përdorimet është të organizojë rregullimin e të dhënave të ndryshme në një faqe, e cila mund të përbëhet nga teksti i thjeshtë, imazhe, tabela të tjera, etj. Ky kapitull u kushtohet rregullave për krijimin e tabelave dhe shembuj të përdorimit të tyre.

Oriz . 4.1. Shembull tipik i tryezës HTML


Oriz . 4.2. Shembull i një tabele pa kufij

Krijimi i tabelave themelore HTML

Le të shqyrtojmë së pari grupin minimal të etiketave dhe parametrat e tyre, të nevojshëm dhe të mjaftueshëm për të krijuar tabela të thjeshta, dhe pastaj të vazhdojmë me përshkrimin e tyre të hollësishëm.

Përshkrimi i tabelave duhet të vendoset brenda seksionit të dokumentit ... Një dokument mund të përmbajë një numër arbitrar të tabelave, dhe tabelat mund të vendosen brenda njëra-tjetrës. Çdo tabelë duhet të fillojë me etiketën

dhe të përfundojë me etiketë
... Brenda kësaj palë etiketash është një përshkrim i përmbajtjes së tabelës. Çdo tabelë përbëhet nga një ose më shumë rreshta, secila prej të cilave specifikon të dhëna për qelizat individuale.

Çdo rresht fillon me etiketën

dhe dhe përdoret zakonisht për qelizat e kokave të tabelës, dhe - për qelizat e të dhënave. Dallimi në përdorim qëndron vetëm në llojin e shkronjave të përdorura si parazgjedhje për të shfaqur përmbajtjen e qelizave, si dhe vendndodhjen e të dhënave brenda qelizës. Përmbajtja e qelizave të tipit shfaqet me Bold dhe në qendër (ALIGN \u003d QENDRA, VALIGN \u003d MESAJ). Qelizat e përcaktuara nga një etiketë nga parazgjedhja e të dhënave të ekranit të rreshtuar në të majtë (ALIGN \u003d LEFT) dhe në mes (VALIGN \u003d MIDDLE) në drejtimin vertikal.

Etiketat

dhe nuk mund të shfaqet jashtë përshkrimit të rreshtit të tabelës
nuk mund të lihet pas dore.

Numri i rreshtave në tabelë përcaktohet nga numri i etiketave hapëse , dhe numri i kolonave është numri maksimal ose ndër të gjitha linjat. Disa nga qelizat mund të mos përmbajnë të dhëna, qelizat e tilla përshkruhen nga një palë etiketat e mëposhtme me radhë - , ... Nëse një ose disa qeliza të vendosura në fund të një linje nuk përmbajnë të dhëna, atëherë përshkrimi i tyre mund të hiqet dhe shfletuesi automatikisht do të shtojë numrin e kërkuar të qelizave boshe. Prandaj rrjedh që ndërtimi i tabelave në të cilat numra të ndryshëm të kolonave me të njëjtën madhësi janë të vendosura në linja të ndryshme nuk lejohet.

Tabela mund të ketë një titull, i cili përmbahet në disa etiketa dhe... Përshkrimi i kokës së tabelës duhet të jetë i vendosur brenda etiketave

dhe
kudo tjetër, por jashtë fushës së ndonjë prej etiketave , ose ... Sipas specifikimit të gjuhës HTML, vendndodhja e përshkrimit të titullit rregullohet më rreptësisht: duhet të vendoset menjëherë pas etiketës deri në të parën ... Ne ju rekomandojmë që t'i përmbaheni këtij rregulli.

Si parazgjedhje, teksti i kokës së tabelës është pozicionuar mbi të (ALIGN \u003d TOP) dhe përqendruar horizontalisht.

Etiketat e renditura mund të kenë parametra, numri dhe vlerat e të cilave janë të ndryshme. Sidoqoftë, në rastin më të thjeshtë, etiketat përdoren pa parametra, të cilët marrin vlerat e paracaktuara.

Ky informacion është mjaft i mjaftueshëm për ndërtimin e tabelave elementare. Le të japim një shembull të një tabele të thjeshtë të përbërë nga dy rreshta dhe dy kolona, \u200b\u200bshfaqja e së cilës tregohet në Fig. 4.3.

Një shembull i tabelës më të thjeshtë

Celula 1 e rreshtit 1 Qeliza 2 Rreshti 1
Celula 1 e rreshtit 2 Qeliza 2 Rreshti 2


Figura: 4.Z Një shembull i tabelës më të thjeshtë

Shikoni tabelat në një faqe

Le të shohim qëllimin e parametrave të ndryshëm që mund të përdoren në etiketat që përshkruajnë tabela.

Titulli i tabelës

Etiketa e kokës së tryezës ka të vetmin parametër të vlefshëm ALIGN, i cili mund të jetë TOP (koka mbi tabelë) ose BOTTOM (koka poshtë tabelës). Parametri ALIGN mund të hiqet, i cili korrespondon me vlerën ALIGN \u003d TOP. Në drejtimin horizontal, titulli i tabelës përqendrohet gjithmonë. Tabela mund të mos ketë titull. Në shumicën e rasteve, teksti i thjeshtë përdoret si titulli i tabelës, i cili rregullohet nga specifikimi HTML, por në të vërtetë, midis etiketave dhe është e lejueshme të shkruash ndonjë element HTML të përdorur në seksion ... Këtu është një shembull i një hyrje të kokës së tabelës:

Titulli i vendosur në fund të tabelës

Nëse këtij përshkrimi i kokës i shtohet shembulli i mësipërm, tabela do të shfaqet siç tregohet në Fig. 4.4.


Figura: 4.4.Tabela me titull

Microsoft Internet Explorer ofron mundësi shtesë për zgjedhjen e vendndodhjes së titullit. Parametri ALIGN pranon vlerat LEFT, CENTER dhe RIGHT për shtrirjen horizontale, së bashku me vlerat e përshkruara më sipër. Vini re se ky është një nga rastet e rralla kur parametri ALIGN i përdorur gjerësisht mund të përdoret si për shtrirjen horizontale ashtu edhe për atë vertikale. Për shembull, ALIGN \u003d E DREJTA do të sigurojë që titulli të jetë i pozicionuar djathtas dhe sipër tabelës. Nëse shkruani ALIGN \u003d BOTTOM, atëherë, si në shembullin e mësipërm, titulli do të vendoset poshtë tabelës. Sidoqoftë, nuk lejohet të përdoret parametri ALIGN dy herë në të njëjtën kokë. Prandaj, një parametër i veçantë për shtrirjen vertikale u prezantua gjithashtu - VALIGN, i cili merr vlerat TOP ose BOTTOM. Për shembull, për një titull në fund të një tabele, të rreshtuar në të majtë, përshkrimi duket kështu:

Titulli i justifikuar nga e majta

Tabela me këtë përshkrim të titullit në Microsoft Internet Explorer do të shfaqet si më poshtë (Fig. 4.5). Nëse ky shembull shikohet në Netscape, kryefjala do të vendoset si parazgjedhje, domethënë mbi tryezë dhe në mes horizontale.


Figura: 4.5. Rreshtimi horizontal i kokës së tabelës nga Microsoft Internet Explorer

Karakteristikat e shtrirjes horizontale të kokës së tabelës janë një zgjatim i specifikimit HTML, nuk mbështeten nga shfletuesi Netscape Navigator dhe duhet të përdoren vetëm kur është absolutisht e nevojshme.

Parametrat e etiketës

Etiketa kryesore e përdorur gjatë krijimit të tabelave është etiketa

... Mund të përdoret me një numër parametrash, secila prej të cilave mund të hiqet. Opsionet e vlefshme ndryshojnë nga shfletuesi. Sipas specifikimit HTML në etiketë
mund të përdoren parametrat e mëposhtëm: KUFIRI, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Shfletuesit NetScape dhe Microsoft Internet Explorer lejojnë që të përdoren parametrat HEIGHT dhe BGCOLOR përveç pesë parametrave të renditur. Shfletues të caktuar lejojnë gjithashtu vendosjen e parametrave të tjerë. Le të shohim qëllimin e parametrave të zakonshëm të etiketave
.

Parametri BORDER

Parametri BORDER kontrollon shfaqjen e një kufiri rreth secilës qelizë, e cila në thelb jep linjat e rrjetit të tabelës, dhe rreth tërë tryezës. Si parazgjedhje, nuk vizatohen korniza dhe përdoruesi do të shohë vetëm tekstin me hapësirë \u200b\u200btë barabartë të qelizave të tabelës në ekran. Ka shumë situata ku përdorimi i tabelave pa kufij është mjaft i justifikuar, për shembull, për listat me shumë kolona të zbatuara duke përdorur tabela, ose specifikimin e saktë të pozicionit relativ të figurave dhe tekstit. Sidoqoftë, në shumicën e rasteve, për përdorimin tradicional të tabelave, është e dobishme që qelizat të ndahen nga njëra-tjetra me linja rrjeti, gjë që e bën më të lehtë përceptimin dhe kuptimin e informacionit që përmbahet në tabelë.

Për të shtuar korniza në tabelë, duhet të përfshini në kod

një parametër BORDER, i cili mund të jetë numerik.

Për shembull,

ose
.

Vlera numerike e parametrit përcakton trashësinë e kufirit në pixel, të vizatuar rreth tërë tabelës, por kjo vlerë nuk ndikon në trashësinë e kufijve rreth secilës qelizë. Në mungesë të një vlere numerike, zakonisht supozohet se është e barabartë me vlerën minimale (1), megjithëse stili i shfaqjes së kornizave mund të ndryshojë për shfletues të ndryshëm. Aftësia për të kontrolluar në mënyrë të pavarur shfaqjen e kufirit rreth të gjithë tryezës dhe kufijve rreth qelizave nuk është në dispozicion.

Një shembull i një tabele me një kufi prej 10 pikselësh tregohet në Fig. 4.6.


Figura: 4.6.Tabela me një kufi prej 10 pikselësh

Specifikimi HTML 3.0 nuk përfshinte një vlerë për parametrin BORDER. Kjo është bërë vetëm në HTML 3.2. Për shembull, versionet e mëparshme të Microsoft Internet Explorer nuk lejonin specifikimin e një vlere numerike.

Vini re se në mungesë të parametrit BORDER, kornizat nuk vizatohen, por hapësira për ta ka mbetur (kjo vlen vetëm për Netscape). Madhësia totale e tabelës në mungesë ose prani të parametrit BORDER nuk ndryshon (përjashtim është rasti i vendosjes BORDER \u003d 0). Kështu, distanca minimale midis dy qelizave ngjitur në këto raste do të jetë e barabartë me dyfishin e trashësisë së kornizës, domethënë dy piksele. Shtë e mundur të rregulloni qelizat sa më afër njëra-tjetrës duke vendosur BORDER \u003d 0, që do të thotë pa kufij. Disa shfletues mund të mos mbështesin vendosjen e vlerës numerike të parametrit BORDER, atëherë një vlerë e barabartë me zero do të injorohet dhe tabela do të vizatohet me kufij.

Ketu jane disa shembuj:

Netscape do t'i paraqesë të tre shembujt ndryshe. Vini re se ka një rast mjaft unik këtu ku nuk mund të flitet për një vlerë të paracaktuar. Shembulli i tretë, ku hiqet parametri BORDER, është i ndryshëm nga çdo shembull ku ky parametër është i pranishëm. Për Microsoft Internet Explorer, shembujt e dytë dhe të tretë janë identikë, kështu që vlera e paracaktuar për parametrin BORDER është zero për këtë shfletues.

Parametri CELLSPACING

Forma e shënimit të parametrit: CELLSPACING \u003d num, ku num është vlera numerike e parametrit në pikse, e cila nuk mund të lihet. Vlera num përcakton distancën midis qelizave ngjitur (më saktësisht, midis kornizave të qelizave), si horizontale ashtu edhe vertikale. Si parazgjedhje, vlera supozohet të jetë dy. Vini re se tradicionalisht në sistemet e botimit, qelizat e tavolinës ngjitur kanë një kufi të përbashkët. Në tabelat HTML, si parazgjedhje, hapësira lihet ndërmjet tyre, siç mund të shihet qartë në figurën e mësipërme (Figura 4.6). Kur vendosni CELLSPACING \u003d 0, kufijtë e qelizave ngjitur do të bashkohen dhe do të krijojnë përshtypjen e një rrjeti të vetëm të tabelës (Fig. 4.7).


Figura: 4.7.Tabela me CELLSPACING \u003d 0

Parametri CELLPADDING

Shënimi i parametrave është i ngjashëm me CELLSPACING. Vlera num përcakton sasinë e hapësirës së lirë (mbushjes) midis kufirit të qelizës dhe të dhënave brenda qelizës. Si parazgjedhje, vlera supozohet të jetë një. Vendosja e parametrit CELLPADDING në zero mund të bëjë që disa pjesë të tekstit të qelizës të prekin kufirin e saj, gjë që nuk duket shumë estetikisht e këndshme.

Në fig. 4.8 tregon një shembull të një tabele me CELLPADDING \u003d 10.


Figura: 4.8.Tabela me CELLPADDING \u003d 10

Parametrat CELLPADDING dhe CELLSPACING janë shumë të ngjashëm me njëri-tjetrin. Për një tabelë pa kufij, ndryshimi i njërit ose i parametrit tjetër çon në të njëjtin rezultat. Të dy parametrat ndikojnë në mbushjen përkatëse horizontalisht dhe vertikalisht. Fatkeqësisht, bëhet menaxhim i veçantë i kufijve horizontale dhe vertikalë, për shembull, për kufijtë nga imazhet (parametrat HSPACE dhe VSPACE të etiketës ), nuk është dhënë.

Të tre parametrat - KUFIRI, CELLPADDING dhe CELLSPACING veprojnë në mënyrë të pavarur nga njëri-tjetri, nëse ndonjëri prej tyre hiqet, atëherë merret vlera e tij e paracaktuar. Në veçanti, nëse hiqen të gjithë parametrat e mësipërm, atëherë distanca minimale midis të dhënave nga qelizat ngjitur do të jetë 6 piksel (për Netscape). Kjo vlerë përbëhet nga dy pikselë për CELLSPACING, një piksel për CELLPADDING dhe një piksel për kufirin e secilës qelizë. Tabela më kompakte do të merret duke specifikuar përshkrimin e mëposhtëm:

Vetëm në këtë version qelizat do të vendosen afër njëra-tjetrës. Një shembull i përdorimit është një tabelë, të gjitha qelizat e së cilës përmbajnë fotografi me të njëjtën madhësi, të cilat duhet të vendosen pranë njëra-tjetrës.

Parametrat e gjerësisë dhe lartësisë

Kur shfaqen tabelat, gjerësia dhe lartësia e tyre llogariten automatikisht nga shfletuesi dhe varen nga shumë faktorë: vlerat e parametrave të specifikuar në përshkrimin e të gjithë dokumentit, kësaj tabele, rreshtave dhe qelizave të saj individuale, përmbajtja e qelizave, si dhe parametrat e vendosur kur shikoni dokumentin në një shfletues të veçantë. , për shembull, lloji dhe madhësia e shkronjave, madhësia e pamjes së shikimit, etj. Kur shfaqen, madhësitë e tabelës llogariten automatikisht duke marrë parasysh këta faktorë dhe bëhet një përpjekje për të paraqitur tabelën në formën më të përshtatshme - për të rregulluar tabelën në mënyrë që ajo të përshtatet në pamjen e pamjes. Skema e përgjithshme për shikimin e dokumenteve të mëdha, si rregull, zbret në lëvizjen lineare të përmbajtjes së dokumentit vertikalisht dhe leximin e tekstit, ndërthurur me tabela të ndryshme, imazhe, etj. Kjo vlen si për dokumentet HTML ashtu edhe për dokumentet e zakonshëm të krijuar në çdo redaktues teksti ... Shumica e redaktorëve të tekstit (të tillë si Microsoft Word) dhe shfletuesit HTML formatojnë automatikisht tekstin në mënyrë që (nëse është e mundur) në mënyrë që linjat të mos e kalojnë gjerësinë e pamjes së shikimit. Kjo shmang nevojën për lëvizje horizontale të dokumentit. Veprime të ngjashme ndërmerren nga shfletuesit me tabela - nëse është e mundur, formatoni ato në mënyrë që gjerësia e tabelës të mos kalojë gjerësinë e pamjes. Mund të konkludohet se gjerësia e tabelave është një parametër më i rëndësishëm, kryesor, llogaritja e të cilit kryhet para së gjithash në krahasim me lartësinë.

Në shumicën e rasteve, madhësia dinamike e tabelës do të rezultojë në një imazh proporcional estetik me përdorim efikas të zonës aktuale të pamjes. Sidoqoftë, mund të jetë e nevojshme të zbatohet gjerësia ose lartësia e tryezës. Për këtë qëllim përdoren parametrat WIDTH (gjerësia e tryezës) dhe HEIGHT (lartësia e tabelës) e etiketës

... Forma e shënimit: WIDTH \u003d num ose WIDTH \u003d num%, ku num është vlera numerike e gjerësisë së të gjithë tryezës në pixel ose si përqindje e të gjithë madhësisë së dritares. Vini re se është e lejueshme të specifikoni vlera më të mëdha se 100%, megjithëse është e vështirë të imagjinohet një rast kur kjo është e nevojshme. Shembull:

.

Parametra të ngjashëm mund të vendosen për qelizat individuale. Vini re se specifikimi i një vlere specifike për parametrin, për shembull WIDTH \u003d 200, nuk do të thotë se tabela do të ketë gjerësinë e specifikuar në çdo rast, por vetëm përcakton gjerësinë e rekomanduar, e cila do të ruhet sa herë që të jetë e mundur. Le ta shpjegojmë këtë me shembuj. Supozoni se keni një tabelë që, në këto kushte, do të kishte një gjerësi më të vogël se ajo e specifikuar si parazgjedhje. Në këtë rast, shfletuesi do të rrisë gjerësinë e tabelës në atë të kërkuar duke zgjeruar në mënyrë proporcionale të gjitha kolonat e tabelës. Ngushtimi i pamjes nuk do të ndryshojë gjerësinë e tabelës dhe mund të duhet të lëvizni horizontalisht për ta parë atë. Nëse tabela ka një gjerësi të paracaktuar më të madhe se ajo e specifikuar, atëherë shfletuesi do të përpiqet të zvogëlojë gjerësinë e saj, së pari, duke zvogëluar gjerësinë e kolonave individuale për të cilat gjerësia e specifikuar është më e madhe se ajo e kërkuar, dhe së dyti, thyerja e tekstit në qeliza të ndara në disa rreshta me duke rritur lartësinë e tryezës. Këto veprime mund të mos sigurojnë madhësinë e kërkuar të tryezës, dhe atëherë ajo do të ketë gjerësinë më të vogël të mundshme. Të njëjtat veprime ndërmerren për tabelat pa dimensione të specifikuara kur porta e shikimit ngushtohet.

Algoritmet specifike për vendosjen e tabelave për shfletues të ndryshëm mund të ndryshojnë pak.

Parametri ALIGN

Parametri i dhënë i etiketës

përcakton pozicionin horizontal të tabelës në portin e pamjes. Vlerat e vlefshme janë Majtas (majtas justifikuar) dhe Djathtas (djathtas justifikohen). Si parazgjedhje, tabelat lihen të rreshtuara. Vini re se vlerat e vlefshme nuk përfshijnë një vlerë tipike për parametrin e shtrirjes - QENDRA. Disa burime HTML citojnë QENDRN (qendër) si të vlefshme në këtë rast. Kjo ndjek specifikimin HTML, por në praktikë, të dy Netscape Navigator dhe Microsoft Internet Explorer zbatojnë vetëm dy vlera. Fakti është se prania e parametrit ALIGN në etiketë
jo vetëm që përcakton vendndodhjen e tabelës, por gjithashtu lejon që teksti të rrjedhë rreth tryezës nga ana e kundërt, e ngjashme me rrjedhën e imazheve. Mbështjellja e tekstit rreth tryezës nga të dy anët nuk sigurohet në asnjë rast. Për kontroll më të saktë të rrjedhës, përdorni etiketën
me parametrin CLEAR në të njëjtën mënyrë siç është bërë për të ... Nëse parametri ALIGN hiqet, atëherë hapësira në të djathtë dhe / ose majtas të tabelës do të jetë gjithmonë e zbrazët, pavarësisht nga gjerësia e saj. Nëse tabela nuk kërkon tekst për t'u mbështjellë, atëherë mund të arrini vendndodhjen e saj në qendër të portës së shikimit. Për këtë, për shembull, i gjithë përshkrimi i tabelës mund të vendoset brenda një palë etiketash
dhe
.

Le të japim një shembull të një tabele me tekst të mbështjellë, shfaqja e së cilës tregohet në Fig. 4.9.

Tabela me tekst që rrjedh rreth saj


i rritur

popullsia e Shën Petersburg

  • Abram
  • Aleksandri
  • Aleksei
  • Alberti
  • Anatoli
  • Andrei

  • Arkady
  • Boris
  • Vadim
  • Shën Valentinit
  • Valeri
  • Vasiliy

  • Viktori
  • Vitali
  • Vladimir
  • Vladislav
  • Vyacheslav

  • Genadi
  • Xhorxh
  • Hermann
  • Gregori
  • Dmitri

  • Evgjeni
  • Efim
  • Ivan
  • Igor
  • Ilya
  • Jozefi
  • Konstantin

  • nje luan
  • Leonid
  • Michael
  • Nikollaj
  • Oleg
  • Paul
  • Peter

  • Novelë
  • Semyon
  • Sergei
  • Stanislav
  • Eduard
  • Juri
  • Jakobi








  • 43 emrat më të zakonshëm të përmendur mbulojnë 92% të mostrës.

    Figura: 4.9. Tabela pa bordura me tekst që rrjedh

    Ky dokument përbëhet nga një tabelë pa kufij me parametrin e rreshtimit ALIGN \u003d LEFT, i cili lejon që teksti pas tabelës të pozicionohet në të djathtë të tij. Tabela përbëhet nga vetëm një rresht, i cili përmban dy qeliza. Çdo qelizë përmban një pjesë të një liste të parenditur

      ... Përdorimi i një tabele për të shfaqur një listë është një mënyrë për të detyruar një listë në kolona të shumta, e cila gjithashtu ilustrohet në këtë shembull. Teksti i vendosur në të djathtë të tabelës mund të mos përshtatet i gjithë atje, ndërsa do të vazhdojë pas tabelës. Provoni të përdorni këtë shembull për të zvogëluar gjerësinë e pamjes së shfletuesit dhe në një moment i gjithë teksti do të shfaqet në fund të tabelës. Kujto se për të ndërprerë me forcë rrjedhën e tekstit përgjatë tabelës (për shembull, nëse teksti pasues nuk ka lidhje logjikisht me tabelën dhe duhet të vendoset nën të), duhet të përdorni kodin
      me grupin e parametrave CLEAR. Për këtë shembull, duhet të shkruani
      ose
      ... Disa shfletues lejojnë shkrimin e parametrit CLEAR pa një vlerë, por kjo nuk rekomandohet. Për të përmbushur të njëjtën detyrë, duke specifikuar burime të shumta të linjës
      pa parametrin CLEAR (siç është bërë në shembullin para tekstit për ta zhvendosur poshtë për disa rreshta) ose disa kode për fillimin e një paragrafi të ri

      Vendim i gabuar.

      Le të japim një shembull pak më ndryshe për krijimin e një faqeje të tillë, shfaqja e së cilës tregohet në Fig. 4.10.

      Tabela pa mbështjellë tekstin

      Emrat më të zakonshëm të meshkujve

      popullsia e rritur e Shën Petersburg

    • Abram
    • Aleksandri
    • Aleksei
    • Alberti
    • Anatoli
    • Andrei

    • Arkady
    • Boris
    • Vadim
    • Shën Valentinit
    • Valeri
    • Vasiliy

    • Viktori
    • Vitali
    • Vladimir
    • Vladislav
    • Vyacheslav

    • Genadi
    • Xhorxh
    • Hermann
    • Gregori
    • Dmitri

    • Evgjeni
    • Efim
    • Ivan
    • Igor
    • Ilya
    • Jozefi
    • Konstantin

    • nje luan
    • Leonid
    • Michael
    • Nikollaj
    • Oleg
    • Paul
    • Peter

    • Novelë
    • Semyon
    • Sergei
    • Stanislav
    • Eduard
    • Juri
    • Jakobi

    • Të dhënat e paraqitura u morën në bazë të një analize të një mostre përfaqësuese që përmban informacion në lidhje me 5,000 burra mbi moshën 18 vjeç që jetojnë në Shën Petersburg.
      43 emrat më të zakonshëm të përmendur mbulojnë 92% të mostrës.
      Frekuenca e shfaqjes së secilit prej emrave të tjerë nuk e kalon 0.3%

      Figura: 4.10. Një tryezë pa kufij me tre kolona

      Ndryshe nga shembulli i mëparshëm, nuk ka asnjë tekst që rrjedh rreth tryezës. I gjithë dokumenti përbëhet nga një tryezë me një titull, që përmban tre qeliza në një rresht. Dy qelizat e para përsërisin plotësisht shembullin e mëparshëm. Qeliza e tretë përmban tekst që komenton përmbajtjen e dy qelizave të para. Këtu nuk ka nevojë të caktoni pushim të detyruar të tekstit, siç përshkruhet në rastin e mëparshëm. I gjithë teksti në lidhje me tabelën duhet të jetë i vendosur brenda qelizës së tretë, dhe teksti pasues - pas përfundimit të përshkrimit të tërë tabelës... Të dy shembujt duken njëlloj kur shikohen në ekran të plotë, përveç titullit, i cili në rastin e parë është në mes të listës me dy kolona, \u200b\u200bdhe në të dytin është në mes të të tre kolonave të tabelës. Sidoqoftë, kur pamja zvogëlohet në shembullin e fundit, asnjë pjesë e tekstit nuk mund të shkojë poshtë tabelës, duke thyer kështu strukturën e saj.

      Formatimi i të dhënave brenda një tabele

      Çdo qelizë individuale brenda një tabele mund të mendohet si një zonë për formatimin e pavarur. Të gjitha rregullat që rregullojnë shfaqjen e tekstit mund të përdoren për të formatuar tekstin brenda një qelize. Pothuajse të gjithë elementët HTML që mund të shfaqen brenda trupit të dokumentit lejohen brenda qelizës. , duke përfshirë etiketat që kontrollojnë paraqitjen e tekstit -

      ,
      ,


      , kodet e kokave - nga

      para

      , etiketat e formatimit të karakterit -<В>, , , , , , , etiketat futin imazhe grafike , lidhjet e hipertekstit<А> Menjëherë, ne theksojmë se fusha e etiketave të specifikuara brenda një qelize të veçantë është e kufizuar në kufijtë e kësaj qelize, pavarësisht nga prania e etiketës përfundimtare. Për shembull, nëse një ngjyrë teksti përcaktohet brenda një qelize - , atëherë edhe nëse nuk ka ndonjë kod përfundimtar ose duke e pozicionuar atë nëpër disa qeliza ose rreshta të tabelës, teksti i qelizës tjetër do të pasqyrohet në ngjyrën e paracaktuar.

      Janë dhënë opsionet e mëposhtme për të formatuar të dhënat brenda qelizave të tabelës.

      Opsionet e shtrirjes për përmbajtjen e qelizave janë ALIGN dhe VALIGN. Mund të përdoret në kode , dhe ... Parametri i shtrirjes horizontale ALIGN mund të jetë LEFNG,, Djathtas dhe QENDRER (parazgjedhja është LTNG për dhe QENDRA për ) Parametri i shtrirjes vertikale VALIGN mund të jetë TOP (lart), BOTTOM (poshtë), MIDDLE (mes), BAZEL (baseline). Parazgjedhja është e Mesme. Rreshtimi bazë siguron që teksti i një linje të vetme në të gjitha qelizat të ankorohet në një rresht të vetëm. Vendosja e opsioneve të shtrirjes në nivelin e kodit përcakton shtrirjen për të gjitha qelizat e një rreshti të caktuar, ndërsa në secilën qelizë individuale të rreshtit mund të përcaktohen parametrat e vet që tejkalojnë efektin e parametrave të specifikuar në .

      Këtu është një shembull i një tabele në të cilën të dhënat në qelizat e kolonës së parë janë të përafruara në të djathtë, kolona e dytë është në qendër dhe e treta është e radhitur në të majtë (e paracaktuar):

      Renditja e elementeve të tryezës

      Qeliza 1 Qeliza 2 Qeliza 3
      Qeliza 4 Qeliza 5 Qeliza 6

      Shfaqja e këtij shembulli nga shfletuesi është treguar në Fig. 4.11.


      Figura: 4.11.Rreshtimi i të dhënave në qelizat e tabelës

      Parametri NOWRAP pamundëson aftësinë për të thyer automatikisht tekstin qelizor në rreshta. Mund të përdoret në kode , dhe ... Përdorimi i pajustifikuar i këtij parametri duhet të shmanget, pasi ai mund të zvogëlojë ndjeshëm aftësinë për të ndryshuar madhësinë dinamike të tabelave dhe të dëmtojë perceptimin e tyre. Në shumicën e rasteve, mjafton të zbatohet NOWRAP në qeliza individuale që kërkojnë vërtet ndalimin e mbështjelljes së fjalëve në një rresht të ri. Mbështjellja e fjalëve kryhet vetëm nga ndarësit midis fjalëve (hapësirave), dhe në disa raste, për të ndaluar thyerjen e tekstit në vende të caktuara, në vend të një karakteri hapësinor, vendosni kodin e një hapësire që nuk prishet (NonBreaking Space). Shembujt përfshijnë rastet kur një boshllëk nuk rekomandohet - midis një vlere numerike dhe njësisë së matjes së një vlere të dhënë; midis mbiemrit dhe inicialeve. Pra, teksti 650 km ose Yeltsin B.N. rekomandohet të shkruhet në formë650 km dhe Yeltsin B.N.

      Parametrat WIDTH dhe HEIGHT mund të përdoren në kode dhe ... Sintaksa e tyre është e ngjashme me sintaksën e këtyre parametrave për etiketën

      ... Vlera e tyre përcakton gjerësinë ose lartësinë e qelizës për të cilën janë shkruar këto parametra. Vlerat mund të specifikohen në piksel ose si përqindje e madhësisë së të gjithë tryezës. Microsoft Internet Explorer lejon që vlera WIDTH të vendoset në pixel. Meqenëse një tryezë është një strukturë koherente e përbërë nga rreshta dhe kolona, \u200b\u200bvendosja e gjerësisë për një qelizë ndikon në gjerësinë e të gjithë kolonës në të cilën ndodhet qeliza, dhe vendosja e lartësisë ndikon në të gjithë vijën. Nëse në një kolonë vlera e gjerësisë specifikohet vetëm në një qelizë, atëherë kjo vlerë bëhet gjerësia e të gjithë kolonës. Nëse ka disa indikacione të tilla, atëherë zgjidhet vlera maksimale. Të njëjtat veti vlejnë për vargjet.

      Tabelat komplekse karakterizohen nga nevoja për të kombinuar disa qeliza ngjitur horizontalisht ose vertikalisht në një. Kjo karakteristikë zbatohet duke përdorur parametrat COLSPAN (COLiimn SPANning) dhe ROWSPAN (ROW SPANning), të vendosura në kode

      vendosen cilësimet për kolonat individuale të këtij grupi. Për më tepër, në etiketë nëse është e nevojshme, mund të specifikohen parametrat e shtrirjes, vlerat e të cilave vlejnë për të gjitha kolonat e grupit të dhënë. Vlerat e parametrave të specifikuara në etiketë , tejkaloni vlerat nga etiketimi ... Vini re se në etiketë në këtë shembull, ndryshe nga ai i mëparshmi, parametri SPAN mungon. Këtu përdorimi i tij është i pakuptimtë, pasi që numri i elementeve në grup do të përcaktohet nga ata që ndjekin etiketën etiketat ... Prandaj, çdo vlerë e dhënë e parametrit të etiketës SPAN do të mbivlerësohet.

      Në fig. 4.17 tregon rezultatin e zbatimit të kodit të mësipërm, si dhe një variant të shfaqjes së një tabele të tillë me hyrjen RREGULLAT \u003d GRUPET në etiketë

      ose ... Forma e shënimit: COLSPAN \u003d num, ku num është një vlerë numerike që përcakton sa kolona për të zgjeruar horizontale qelizën aktuale. Përdorimi i parametrit ROWSPAN është i ngjashëm, vetëm këtu ju specifikoni numrin e rreshtave që qeliza aktuale duhet të kapë vertikalisht. Si parazgjedhje, këto parametra janë vendosur në një. Lejohet vendosja e njëkohshme e vlerave të të dy parametrave për një qelizë. Vendosja e saktë e vlerave të këtyre parametrave mund të mos jetë një detyrë shumë e thjeshtë, veçanërisht pasi shumica e redaktorëve HTML ju lejojnë të ndërtoni vizualisht me gjeneratën pasuese të kodeve HTML vetëm tabelat më të thjeshta.

      Në fig. 4.12 tregon një shembull të shfaqjes së një tabele, të marrë duke përdorur kodin vijues HTML:

      Përdorimi i parametrave COLSPAN dhe ROWSPAN

      Qeliza që përfshin dy rreshta Qeliza që përfshin dy kolona
      Qeliza 3 Qeliza 4
      Qeliza 5 Qeliza 6 Qeliza 7


      Figura: 4.12. Tabela me qeliza që shtrihen në rreshta ose kolona të shumëfishta

      Vendosja e pavëmendshme e vlerave të parametrave të rrëshqitjes së qelizave mund të çojë në mbivendosje dhe konflikte të tyre reciproke, në të cilat rezultati është i paparashikueshëm. Një përdorim tipik për qelizat e zgjeruara është një titull i zakonshëm për disa kolona ose rreshta ngjitur.

      Këtu është një shembull i kodit HTML (shfaqja e të cilit tregohet në Fig. 4.13), në të cilin qelizat e zgjeruara janë formuar gabimisht.

      Përdorimi i pavlefshëm i qelizave të zgjatura

      Qeliza 1 Qeliza 2

      Qeliza 3
      (i zakonshëm
      Ha tre
      linjat)

      Qeliza 4Qeliza 5
      Qeliza 6 Celula 7 (e shpërndarë në dy kolona)

      Figura: 4.13.Rezultati i përcaktimit të pasaktë të qelizave të zgjeruara (mbivendosja e tekstit)

      Parametri BGCOLOR vendos ngjyrën e sfondit për të gjithë tabelën, rreshtat ose qelizat individuale. Mund të ndodhë në etiketa

      , , nuk përmban ndonjë informacion ose një ose më shumë hapësira që nuk trajtohen si të dhëna. Qelizat që përmbajnë të dhëna të padukshme, për shembull, mund të përmbajnë kod ose kod të linjës
      , ose ndonjë tekst që përputhet me ngjyrën e sfondit të qelizës. Nëse qelizat që përmbajnë të dhëna (edhe nëse janë të padukshme) shfaqen në të njëjtën mënyrë nga të gjithë shfletuesit, atëherë qelizat boshe do të shfaqen ndryshe. Shfletuesi Netscape nuk tregon një qelizë të zbrazët, domethënë, vendi ku ndodhet kjo qelizë do të pikturohet me ngjyrën e sfondit të faqes, jo me ngjyrën e sfondit të qelizës, ndryshe nga qelizat që përmbajnë të dhëna. Asnjë kufi nuk është tërhequr rreth qelizave boshe. Një shembull i një tabele me një qelizë të zbrazët është treguar në Fig. 4.15.


      Figura: 4.15. Qeliza boshe e tabelës jep ndryshe nga shfletues të ndryshëm

      Microsoft Internet Explorer shfaq të dy qelizat në ngjyrën e sfondit të qelizave. Një shfletues i tillë si NSCA Mosaic i ofron përdoruesit mundësinë për të përcaktuar natyrën e daljes së qelizave të tavolinës bosh duke zgjedhur opsionet e duhura. Njohja e këtyre veçorive do t'ju lejojë të hartoni tabela që do të shfaqen në një mënyrë të përshtatshme, pavarësisht nga shfletuesi i zgjedhur nga përdoruesi. Në disa raste, mjafton të krijoni qeliza që përmbajnë një kod të vetëm në vend të disa qelizave boshe.

      Rreshtimi i të dhënave në kolonat e tabelës

      Një problem i zakonshëm kur krijoni tabela është vendosja e opsioneve të shtrirjes për rreshta ose kolona individuale. Për të lidhur përmbajtjen e të gjitha qelizave të linjës aktuale, thjesht vendosni parametrat e kërkuar në kod

      ... Sidoqoftë, më shpesh sesa jo, është e nevojshme të sigurohet rreshtimi i njëjtë për të gjithë artikujt në të njëjtën kolonë, sepse në shumicën e rasteve, kolona përmban të dhëna homogjene. Në versionet e mëparshme të HTML, u sugjerua që të përdoret parametri COLSPEC (SPECification COLumn) për këtë, i cili ishte specifikuar në etiketë
      dhe ... Kjo veçori nuk përfshihet në specifikimin HTML, por mbështetet nga Netscape dhe Microsoft Internet Explorer. Forma e regjistrimit është e njëjtë me atë të etiketës , përkatësisht: BGCOLOR \u003d vlerë, ku përmbajtja e ngjyrës në formatin RGB ose emri i saj është vendosur si vlerë.

      Shembull:

      ose .

      Tabela të vendosura

      Qelizat individuale të tabelës mund të përmbajnë pothuajse çdo etiketë gjuhësore dhe të dhëna të lejuara në seksion dokument Në veçanti, një tabelë tjetër mund të vendoset brenda një qelize të një tabele. Tabela të tilla quhen tabela të mbivendosura. Rregullat për ndërtimin e tyre nuk ndryshojnë nga ndërtimi i tabelave dhe nuk kanë nevojë për një përshkrim të veçantë. Thjesht vini re se jo të gjithë shfletuesit që mbështesin tabela pasqyrojnë saktë tabelat komplekse me disa nivele të folezimit, prandaj përdorni ato me kujdes.

      Këtu është një shembull i një tabele që përdor një nivel foleje.

      Qytetet e Rajonit të Leningradit

      Qytetet e Rajonit të Leningradit

      H - popullsia e qytetit (mijë banorë, 1992)

      P - distanca nga Shën Petersburg (km)

      Qytetet në varësi të Shën Petersburg
      QytetiHP
      Zelenegopsk 13.6

      50

      Kolpino144.6

      26

      Kronstadt 45.2

      48

      Lomonosov 42.0

      40

      Pavlovsk 25.4

      30

      Petrodvorets 83.8

      29

      Pushkin 95.1

      24

      Sestroretsk 34.9

      35

      Të gjitha qytetet e varura
      administrata
      Petersburg, kanë
      qytet i drejtpërdrejtë
      numrat e telefonit.

      Qytetet rajonale
      QytetiHP
      Boksitogorsk 21.6

      ALIGN \u003d E DREJTA\u003e 245

      Balkhov 50.3

      ALIGN \u003d E DREJTA\u003e 122

      Bcevolozhsk 32.9

      24

      Vyborg 80.9 130
      Vysotsk 1.0

      ALIGN \u003d E DREJTA\u003e 159

      Gatchina 80.9 46
      Ivangorod 11.9

      ALIGN \u003d E DREJTA\u003e 147

      Kamennogorsk 5.9 157
      Kingisepp 51.5

      ALIGN \u003d E DREJTA\u003e 138

      Kirishi 53.8

      ALIGN \u003d E DREJTA\u003e 115

      Kirovsk 23.8

      55

      Lodeynoye Pol 27.3

      ALIGN \u003d E DREJTA\u003e 244

      Lyga 41.8139

      (Vazhdimi i tabelës)
      QytetiHP
      Lyuban 4.7

      85

      Ladoga e re 11.2

      ALIGN \u003d E DREJTA\u003e 141

      Kënaqës 22. 9

      ALIGN \u003d E DREJTA\u003e 40

      Pikalevo 25.1

      ALIGN \u003d E DREJTA\u003e 246

      Mbështetje 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      ALIGN \u003d E DREJTA\u003e 145

      Svetogorsk 15.8

      ALIGN \u003d E DREJTA\u003e 201

      Pllaka 42.6

      ALIGN \u003d E DREJTA\u003e 192

      Pinezeri 57.6

      81

      Tikhvin 72.0

      ALIGN \u003d E DREJTA\u003e 200

      Tosno 33.8

      53

      W liscelbypg 12.5

      64

      Figura: 4.14.Shembull i tabelave të vendosura

      Rezultati i shfaqjes së këtij shembulli tregohet në Fig. 4.14.

      Në shikim të parë, duket se nuk ka fole tabelash në shembull. Në fakt, i gjithë dokumenti është një tryezë pa kufij, e përbërë nga një titull dhe vetëm një rresht që përmban pesë qeliza. Organizimi i një tabele të tillë i shërben qëllimit të vetëm për rregullimin e të dhënave në faqe. Brenda qelizës së parë është një tabelë tjetër me titullin e saj dhe tre kolona, \u200b\u200be ndjekur nga teksti i rreshtuar në mes. Qelizat e treta dhe të pesta përmbajnë gjithashtu tabela të ndara. Qelizat e dyta dhe të katërta janë bosh, ato nuk përmbajnë asnjë të dhënë dhe kanë një parametër të vetëm WIDTH që përcakton gjerësinë e tij. Qëllimi i tyre është të vendosin indentacionin midis qelizave të para dhe të tretë, si dhe qelizave të treta dhe të pesta në të cilat ndodhen tabelat. Ky është një nga opsionet e mundshme për vendosjen e një dhëmbëzimi të tillë. Një tjetër mundësi është përdorimi i parametrit CELLSPACING, i cili përcakton distancën midis qelizave, por ky parametër vendos si indentacione horizontale dhe vertikale, e cila aktualisht nuk kërkohet. Për më tepër, një qelizë e zbrazët me gjerësinë e specifikuar do të tkurret kur pamja të ngushtohet, në krahasim me hapësirën e specifikuar nga parametri CELLSPACING (si dhe CELLPADDING). Provoni të përdorni këtë shembull për të ulur gjerësinë e pikëpamjes në shfletues, ose, gjë që do të çojë në të njëjtat rezultate, për të rritur madhësinë e shkronjave të përdorura për të shfaqur tekstin. Distanca midis tabelave do të reduktohet në zero, duke bërë të mundur shikimin e të gjithë informacionit njëkohësisht për aq kohë sa të jetë e mundur, megjithatë, ndryshimet e mëtejshme nuk do të dëmtojnë tabelën, por do të sigurojnë aftësinë për të lëvizur horizontalisht. Sipas një skeme të ngjashme, ju mund të organizoni vendosjen e informacionit, i përbërë jo vetëm nga tabela, por edhe imazhe, fragmente të tekstit, etj.

      Karakteristikat e ndërtimit të tabelave

      Kjo pjesë diskuton disa veçori specifike të shfletuesve individualë, si dhe disa hollësi të ndërtimit dhe shfaqjes së tabelave.

      Shfaqja e qelizave bosh në tabela

      Një nga tiparet e paraqitjes së tabelave nga shfletues të ndryshëm është shfaqja e qelizave boshe. Sipas përshkrimit të gjuhës, të gjithë shfletuesit duhet të mbushin linjat me qeliza boshe nëse numri i tyre është vendosur në ndonjë rresht më pak se në rreshtat e tjerë. Për më tepër, qelizat që nuk përmbajnë të dhëna mund të gjenden kudo në tabelë. Ekziston një dallim midis qelizave bosh dhe qelizave që përmbajnë të dhëna të padukshme. Në qelizat boshe brenda një palë etiketash

      dhe
      dhe përcaktoi shtrirjen dhe gjerësinë e secilës kolonë të tabelës. Për shembull, vendosja e colspec \u003d "L40 R50 C80" përcaktoi rreshtimin e të dhënave në qeliza për tre kolona të tabelës: për kolonën e parë - LEFNT, \u200b\u200bpër të dytën - DREJT dhe për të tretën - QENDRA, si dhe gjerësinë e secilës kolonë. Ndërsa HTML u zhvillua, ky opsion u hoq dhe aktualisht nuk është pjesë e specifikimit të gjuhës dhe nuk mbështetet nga shumica e shfletuesve. Si rezultat, Netscape Navigator nuk ka mjete të posaçme për të zgjidhur këtë problem dhe e vetmja mundësi është ose të përdorni rreshtimin e paracaktuar, ose të vendosni vlerat e duhura në secilën qelizë, aty ku është e nevojshme.

      Microsoft Internet Explorer ofron etiketa speciale -

      dhe ... Këto etiketa duhet të shfaqen menjëherë pas përshkrimit
      para ndodhjes së parë të etiketës .

      Parametrat e etiketës

      dhe mund të ketë SPAN, i cili përcakton numrin e kolonave të afërta që preken nga vlerat e parametrave dhe ALIGN, i cili përcakton rreshtimin horizontal të të dhënave në të gjitha qelizat e kolonës (ose kolonave) përkatëse. Vlerat e vlefshme për parametrin ALIGN janë Majtas, Djathtas dhe QENDRA. Vlera e paracaktuar për SPAN është një.

      Etiketoj

      përveç kësaj ju lejon të vendosni parametrin VALIGN, i cili përcakton rreshtimin vertikal të të dhënave në qeliza. Vlerat e vlefshme për parametrin VALIGN janë MIDDLE, TOP dhe BOTTOM.

      Diferenca midis etiketave

      dhe qëndron në faktin se i pari prej tyre, përveç vendosjes së parametrave të rreshtimit të të dhënave për kolonat, gjithashtu bashkon me kusht disa kolona në një grup. Efekti i këtij kombinimi është kur përdorni parametrin RULES, i cili përshkruhet më poshtë. Si parazgjedhje, të gjitha kolonat në një tabelë konsiderohen një grup. Etiketoj duhet të përdoret vetëm për të përcaktuar shtrirjen e të dhënave në kolonat individuale në një grup.

      Le të japim një shembull. Supozoni se doni të ndërtoni një tabelë që përmban 6 kolona, \u200b\u200bme të dhënat në tre prej tyre të para të rreshtuara në të djathtë, dhe tre në vijim në mes. Për të zgjidhur këtë problem, duhet të shkruani pjesën e mëposhtme të kodit HTML:

      (të dhëna për tabelën)

      Rezultati i shfaqjes së këtij kodi është treguar në Fig. 4.16.


      Figura: 4.16. Tabela me opsione të ndryshme të shtrirjes së të dhënave në grupet qelizore

      Një shembull tjetër. Supozoni se në tabelën e mëparshme, dy kolonat e para duhet të rreshtohen në të djathtë, dhe e treta - në mes, me të tre kolonat të grupuara. Tri kolonat e ardhshme gjithashtu duhet të grupohen së bashku dhe të kenë të njëjtën rreshtim me grupin e parë. Për të zgjidhur këtë problem, duhet të shkruani pjesën e mëposhtme të kodit HTML:

      (të dhëna për tabelën)

      Në këtë shembull, pas etiketës

      , nga e cila mund të shihni kuptimin e grupimit.

      Këshilla

      Që nga qëllimi i etiketave

      dhe është i kufizuar në shfletuesin e vetëm Microsoft Internet Explorer, duhet t'i përdorni me kujdes. Lehtësia e përdorimit të këtyre etiketave është e dukshme, por në praktikë, shumica e tabelave ndërtohen duke përdorur parametrin e duhur të shtrirjes ALIGN për secilën qelizë të tryezës, aty ku është e nevojshme, gjë që rrit ndjeshëm madhësinë e kodit burimor të tabelës, por lejon shikimin në çdo shfletues.


      Figura: 4.17. Tabela e kolonave të grupuara

      Vendosja e ngjyrës së kufijve të tryezës

      Disa opsione të tjera, specifike vetëm për Microsoft Internet Explorer, ju lejojnë të zgjidhni ngjyrën e kufijve të tryezës - BORDERCOLOR, BORDERCOLORLIGHT dhe BORDERCOLORDARK. Këto parametra mund të vendosen në etiketa

      , ... Emri i ngjyrës ose vlera e tij heksadecimale mund të përdoret si vlerë për këto parametra. Parametri BORDERCOLOR specifikon ngjyrën e të gjithë elementëve të kufirit të tabelës, dhe dy parametrat e tjerë specifikojnë ngjyrën e kufijve përbërës individualë, duke tejkaluar vlerën BORDERCOLOR. Parametri BORDERCOLORLIGHT pikturon skajet e majtë dhe të sipërm të të gjithë tryezës dhe, në përputhje me rrethanat, skajet e djathtë dhe të poshtme të secilës qelizë në ngjyrën e specifikuar. Parametri i dytë BORDERCOLORDARK përcakton ngjyrat e skajeve të kundërta. Për shkak të kombinimit të veprimit të këtyre parametrave, tabela do të duket disi e ngritur mbi sipërfaqen e faqes ose e thelluar. E gjitha varet nga kombinimi i zgjedhur i ngjyrave.

      shënim

      Shfletuesi Netscape 4.x gjithashtu mbështet parametrin BORDERCOLOR.

      Vendosja e imazhit të sfondit për një tryezë

      Microsoft Internet Explorer (si dhe Netscape 4.x) lejon parametrin BACKGROUND të përcaktojë imazhin e sfondit për një tryezë në të njëjtën mënyrë që mund të bëjë një dokument i tërë HTML. Ky parametër mund të vendoset në etiketa

      , dhe
      , , w

      Microsoft Internet Explorer ju lejon të përdorni një numër etiketash të reja për të strukturuar tabelat dhe për të kontrolluar në mënyrë fleksibile pasqyrimin e kornizave dhe linjave të rrjetit.

      Etiketat

      , dhe vendosni në mënyrë më rigoroze strukturën e përshkrimit të tabelës, duke theksuar qelizat e kokës së tabelës, përmbajtjen kryesore të tabelës dhe rreshtin përfundimtar. Këto etiketa mund të shfaqen vetëm në përshkrimin e tabelave brenda një çifti etiketash
      dhe .

      Etiketat strukturuese të tryezës

      dhe
      .

      Etiketat dhe përdoren për të përshkruar kokën dhe fundin e një tabele. Këto etiketa mund të shfaqen më së shumti një herë në tabelë. Etiketa e mbarimit për këto mund të hiqet. Përdorimi i këtyre etiketave është i dobishëm kur krijoni tabela të mëdha që shtrihen përtej një faqe.

      Etiketoj mund të ndodhë shumë herë në përshkrimin e tabelës, e cila kërkon përdorimin e etiketës përfundimtare... Ky tag kryen grupimin logjik të të dhënave në të njëjtën mënyrë si etiketa grupimi i kolonave të afërta.

      Kur përdorni etiketa të reja, bëhet e mundur të kontrollohen në mënyrë më fleksibile kufijtë dhe linjat e rrjetit të tabelës.

      Kontrolli i kornizave të vizatimit rreth tryezës kryhet nga parametri FRAME i etiketës

      dhe linjat e rrjetit të tabelës me parametrin RULES. Për shembull, bëhet e mundur të vizatoni vetëm vija vertikale midis kolonave dhe në vend të një kufiri rreth tërë tryezës, jepni vija horizontale në krye dhe në fund të tabelës.

      Parametri FRAME mund të marrë vlerat e mëposhtme:

      • KUTI ose KUFIR - korniza është tërhequr nga të katër anët
      • Mbi të - vetëm nga ana e sipërme
      • POSHT - vetëm nga ana e poshtme
      • Fsheh - vizatohen anët e poshtme dhe të sipërme
      • VSIDES - vizatohen anët e majtë dhe të djathtë
      • LHS - vetëm në anën e majtë
      • RHS - vetëm në anën e djathtë
      • E Zbrazët - tryezë pa korniza të jashtme

      Parametri RULES kontrollon vizatimin e linjave të rrjetit të brendshëm të tabelës dhe mund të marrë vlerat e mëposhtme:

      • TE GJITHA - tërhiqen të gjitha linjat e brendshme
      • GRUPET - vizatohen vetëm linja që i ndajnë grupet
      • RRESHT - vizatohen linjat ndarëse
      • COLS - vizatohen linjat që ndajnë kolonat
      • ASNJE - nuk vizatohen vija të brendshme

      Shembull:

      .

      shënim

      Vizatimi i linjave të rrjetit të tabelës dhe kornizave do të kryhet vetëm nëse është i pranishëm parametri i etiketës BORDER

      ... Nëse ky parametër mungon ose vlera e tij është zero, linjat dhe kufijtë e rrjetit do të mungojnë për çdo vlerë të parametrave FRAME dhe RULES.

      Këtu është një shembull i një kodi të plotë HTML që krijon një tryezë duke përdorur aftësitë e përshkruara:

      Theksimi i titullit dhe linjës përmbledhëse

      Një shembull i kontrollit fleksibël të linjës
      tabela e rrjetës

      Titulli i kolonës 1 Titulli i kolonës 2 Titulli i kolonës 3
      Të dhënatTë dhënatTë dhënat
      Të dhënatTë dhënatTë dhënat
      Të dhënatTë dhënatTë dhënat
      Të dhënatTë dhënatTë dhënat
      Të dhënatTë dhënatTë dhënat
      Të dhënatTë dhënatTë dhënat
      RezultatiRezultatiRezultati


      Figura: 4.18.Vizatimi fleksibël i linjave të rrjetit të tabelës duke përdorur shfletuesin Microsoft Internet Explorer

      Në këtë shembull, i cili shfaqet nga shfletuesi në Fig. 4.18, tregohet një nga opsionet e mundshme për kontrollimin e linjave të rrjetit dhe kufijve rreth tryezës. Një kufi prej 5 pikselësh vizatohet rreth tryezës (BORDER \u003d S) vetëm në pjesën e sipërme dhe të poshtme (FRAME \u003d HSIDES). Linjat e rrjetit vizatohen brenda tabelës për të ndarë grupe të të dhënave (RREGULLAT \u003d GRUPET). Grupet e të dhënave përcaktohen, së pari, nga prania e tre etiketave , secila prej të cilave deklaron një kolonë të veçantë të tabelës grupi Së dyti, etiketat , dhe<тгоот> gjithashtu ndani të dhënat e tabelës në grupe, gjë që përcakton vizatimin e vijave të brendshme horizontale.

      Vendosja e numrit të kolonave në një tabelë

      Microsoft Internet Explorer (si dhe shfletuesi Netscape 4.x) ju lejon të specifikoni në etiketë

      parametri COLS, vlera e të cilit përcakton numrin e kolonave në tabelë. Shkrimi i këtij parametri ju lejon të shpejtoni paraqitjen e tabelës kur shfaqet në një shfletues, pasi bëhet e mundur të përcaktoni numrin e kolonave para se të ngarkohet kodi i përshkrimit të tabelës. Aktualisht, mundësimi i këtij opsioni nuk ndikon në përparimin e ngarkimit të dokumentit në asnjë mënyrë.

      Rreshtimi vertikal i tabelave

      Parametri i etiketës së fundit

      specifik vetëm për Microsoft Internet Explorer, është VALIGN, i cili përcakton rreshtimin vertikal të tabelës në lidhje me tekstin. Veprimi i tij është i ngjashëm me atë për imazhet.

      shënim

      Vini re se përdorimi i një dhe të njëjtit parametër mund të ndryshojë ndjeshëm si në qëllim dhe në vlerat e mundshme për etiketa të ndryshme, madje edhe për të njëjtin shfletues dhe brenda kornizës së specifikimeve të gjuhës. Prandaj, është e pamundur të përpilohet një tabelë strumbullar mbi përdorimin e parametrave të ndryshëm jashtë kontekstit të zbatimit të tyre. Për shembull, parametri ALIGN përdoret në tabela vetëm në tre mënyra të ndryshme:

      • për etiketë
      parametri ALIGN mund të marrë vlerat LEFNT ose Djathtas, dhe nënkupton vendndodhjen e tabelës, të rreshtuar në skajin e majtë ose të djathtë, përkatësisht;
    • për etiketë
    • ,
      parametri ALIGN merr vlerat TOP ose BOTTOM, dhe nënkupton vendndodhjen e kokës së tabelës sipër ose poshtë tabelës;
    • për etiketat
    • dhe parametri ALIGN merr vlerat LEFNG, DREJT or ose QENDRA, dhe do të thotë të përafrosh përmbajtjen e qelizës përkatëse (ose qelizave) në tabelë horizontalisht.

      Alternativë për pamjen e tryezës

      Mbështetja për tabelat është bërë një tipar i zakonshëm i shfletuesve të internetit, kështu që ka pak ose aspak arsye për të shmangur përdorimin e tyre. Sidoqoftë, ne do të shqyrtojmë opsionet e mundshme për paraqitje alternative të të dhënave që mund të përdoren në vend të tabelave ose përveç tyre.

      Disa metoda të tjera që nuk përdorin konceptin e tabelave:

      • Përdorimi i tekstit të paraformatuar. Kjo teknikë u përdor tradicionalisht në versionet e hershme të HTML, kur mbështetja e tryezës nuk ekzistonte ende. Përdorimi i tij nuk e ka humbur rëndësinë e saj deri më sot, pasi që tekste të tilla do të shfaqen në mënyrë korrekte nga çdo shfletues, duke përfshirë edhe ato thjesht me tekst.
      • Përdorimi i një imazhi që përmban një tryezë. Tabela mund të krijohet me ndonjë redaktues teksti ose madje të shfaqet nga një shfletues uebi dhe më pas të ruhet si një fotografi në një nga formatet grafike. Ky nuk është opsioni më i mirë, pasi humbet të gjithë fleksibilitetin për të personalizuar dinamikisht shfaqjen e tabelave. Përveç kësaj, bëhet e nevojshme të ruhet një skedar shtesë me një imazh, madhësia e të cilit gjithashtu, si rregull, do të jetë shumë më i madh se madhësia e tekstit që përshkruan tabelën HTML. Një zonë e mundshme e aplikimit është tabela me madhësi të përcaktuara në mënyrë rigoroze, për të cilat varësia e shfaqjes së tij nga ndonjë faktor i jashtëm (gërmat, mënyrat e funksionimit të shfletuesit, etj.) Është e papranueshme.
      • Përdorimi i listave në vend të tabelave. Për rastet më të thjeshta, në vend të organizimit të tabelave, është mjaft e mundur të merresh vesh me një nga llojet e listave të disponueshme në HTML.

      Përgatitja e tabelave

      Çdo redaktor mund të përdoret për të përgatitur tabela HTML, shumica e të cilave kanë mjete për krijimin e tabelave vizualisht. Le të japim një shembull të përgatitjes së një tabele në redaktorin HotDog Professional. Për të krijuar një tabelë, thjesht zgjidhni artikullin Tabelat nga menuja Fut, pas së cilës kutia e dialogut e treguar në Fig. 4.19. Krijimi i një tabele konsiston në plotësimin e fushave përkatëse në dritare. Pas përcaktimit të numrit të rreshtave dhe kolonave në tabelë, mund të vazhdoni të plotësoni direkt qelizat individuale të tabelës, të cilat do të shfaqen në të njëjtën kutinë e dialogut. Kutia e dialogut ka një buton Preview, duke klikuar i cili ju lejon të shihni tabelën që rezulton duke përdorur shfletuesin e integruar (Fig. 4.20).


      Figura: 4.19. Kutia e dialogut për krijimin e tabelave


      Figura: 4.20. Tabela e treguar duke përdorur shfletuesin e integruar

      Pas përfundimit të përgatitjes së të dhënave për tabelën, klikoni në butonin OK. Atëherë kodi i përshkrimit të tabelës së gjeneruar do të futet në dokumentin e redaktuar HTML. Për shembullin e treguar në Fig. 4.19, do të gjenerohet kodi i mëposhtëm:

      (një pjesë e kodit është hequr)

      Shefi i tryezës
      Kolona 1 Kolona 2 Kolona 3 Kolona 4
      1 2 3 4

      Në mënyrë të ngjashme, kjo detyrë zgjidhet duke përdorur përbërësin Netscape Composer të programit Netscape Communicator. Në fig. 4.21 tregon një kuti dialogu në të cilën duhet të plotësoni fushat e kërkuara. Për të futur parametra shtesë të etiketës

      Buttonshtë dhënë butoni shtesë HTML. Pasi të plotësoni fushat e kutisë së dialogut, duhet të klikoni në butonin Zbato dhe më pas do t'ju jepet mundësia të plotësoni qelizat e tabelës (Fig. 4.22).

      Figura: 4.21. Kuti dialogu Parametrat e tryezës së kompozitorit Netscape


      Figura: 4.22. Pozicioni fillestar i kursorit të hyrjes në një tabelë të zbrazët

      Një detyrë

      Krijoni një tabelë dhe specifikoni parametrat e saj (kufijtë dhe distanca midis qelizave) përmes stileve.

      Vendimi

      Një tabelë përbëhet nga rreshta dhe kolona të qelizave që mund të përmbajnë tekst dhe fotografi. Për të shtuar një tryezë në një faqe në internet, përdorni etiketën

      ... Ky element shërben si një enë për elementet që përcaktojnë përmbajtjen e tabelës. Çdo tabelë përbëhet nga rreshta dhe qeliza, të cilat vendosen në përputhje me rrethanat duke përdorur etiketat dhe
      ... Tabela duhet të përmbajë të paktën një qelizë (shembulli 1). Lejohet në vend të etiketës përdor etiketën ... Teksti në një qelizë të zbukuruar me një etiketë , shfaqet nga shfletuesi me shkronja të zeza dhe të rreshtuar në qendër të qelizës. Përndryshe, ndryshimet midis qelizave të krijuara përmes etiketave dhe jo

      Shembull 1. Krijimi i një tabele

      HTML5 IE Cr Op Sa Fx

      Etiketa e tryezës

      Qeliza 1 Qeliza 2
      Qeliza 3 Qeliza 4

      Renditja e qelizave dhe pamja e tyre tregohet në Fig. 1

      Figura: 1. Rezultati i krijimit të një tabele me katër qeliza

      Atributi kufitar i etiketës

      lejohet të shtohet vetëm me një vlerë boshe (
      ) ose e barabartë me 1. Të gjitha vlerat e tjera nuk janë të vërtetuara.

      Prona e stilit të mbushjes përdoret për të kontrolluar fushat brenda qelizave, e cila i shtohet zgjedhësit td. Hapësira midis qelizave ndryshohet nga vetia e ndarjes së kufirit (shembulli 2) i shtuar zgjedhësit të tabelës, shfletuesi IE e kupton atë vetëm që nga versioni 8.0.

      Shembulli 2. Fushat brenda qelizave

      HTML5 CSS 2.1 IE Cr Op Sa Fx

      Etiketa e tryezës

      Titulli 1Titulli 2
      Qeliza 3Qeliza 4

      Një tabelë me fusha dhe hapësira ndërmjet qelizave tregohet në Fig. 2. Një rezultat i ngjashëm mund të arrihet me një kufi të bardhë rreth qelizave.

      Figura: 2. Fushat në qelizat e tabelës

      U bënë të popullarizuar, krijuesit e faqeve kryesisht përdorën metodën e paraqitjes së tryezës dhe morën rezultate shumë të mira.


      Etiketat që përdoren për të ndërtuar një tryezë në html

      tryezë - etiketimi i kërkuar hapja dhe mbyllja e tryezës
      mbishkrim - një etiketë opsionale që tregon titullin e tabelës
      th - një etiketë opsionale, në etiketat hapëse dhe mbyllëse të të cilave është shkruar emri i kolonës. Në mënyrë tipike të theksuar me shkronja të zeza
      tr - një etiketë e kërkuar nga e cila hapet dhe mbyllet rreshti
      td - një etiketë e kërkuar që tregon hapjen dhe mbylljen e një qelize në një rresht

      Shembull kodi për një tryezë të thjeshtë



      Tabela HTML





      Emri i tabelës

      Kolona 1

      Kolona 2

      Teksti në qelizën e parë

      Teksti në qelizën e dytë



      Shfletuesi do të shfaqet

      Qëllimi i tabelave në html

      Mësimi i spreadsheet është shumë i rëndësishëm! Falë tabelave, ju mund të rregulloni jo vetëm tekst, por edhe imazhe, lidhje dhe shumë më tepër. Në tabelën që mund të vendosni sfond (ose ngjyra e tij), indent, gjerësia, kufiri dhe parametrat e tjerëqë do t'i japë asaj një pamje të bukur. Tabela - Hapi juaj i parë për të kuptuar krijimi i faqes në internet! Më parë, shumë faqe ishin paraqitur tërësisht si tabela, domethënë gjithçka që shihte përdoruesi (menuja anësore, menuja e sipërme, përmbajtja) ishte përmbajtja e qelizave në një tryezë të madhe.
      Në atë shënim, le të shkojmë drejtpërdrejt te atributet që e bëjnë tryezën të duket e bukur ...

      Karakteristikat dhe parametrat e tabelave html: indent, gjerësi, ngjyra e sfondit, kufiri (korniza)

      Kanë etiketa e tryezës ekzistojnë atributet e mëposhtme:

      gjerësia - gjerësia e tryezës. mund të jetë në pixel ose% e gjerësisë së ekranit.
      ngjyra e gjelbër - ngjyra e sfondit të qelizave të tryezës
      sfond - mbush sfondin e tabelës me një figurë
      kufiri - korniza dhe kufijtë në tabelë. Trashësia është specifikuar në pixel
      mbulesa celulare - mbushje në piksel midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm
      Si më parë, shkruani vlerën e atributit në thonjëza.

      Le të shqyrtojmë zbatimin e këtyre atributeve me shembull. Për ta bërë këtë, krijoni një tabelë (por tashmë pa etiketat e përdorura jashtëzakonisht rrallë dhe etiketat) dhe vendosni parametrin në atribut kufiri (kufiri), gjerësia (gjerësia e tabelës, rreshtit ose qelizës) dhe bgcolor (ngjyra e qelizës)



      Tabela HTML







      Si rezultat, shfletuesi do të shfaqë një tabelë të formës së mëposhtme

      kornizë - një atribut që tregon një kufi rreth tryezës. Ekzistojnë vlerat e mëposhtme:

      E pavlefshme - pa kornizë,
      sipër - vetëm korniza e sipërme,
      poshtë - vetëm kufiri i poshtëm,
      hsides - vetëm kornizat e sipërme dhe të poshtme,
      vsides - vetëm kornizat majtas dhe djathtas,
      lhs - vetëm korniza e majtë,
      rhs - vetëm kufiri i djathtë,
      kutia - të katër pjesët e kutisë.

      rregullat - një atribut që tregon kufijtë brenda një tabele, midis qelizave. Ekzistojnë vlerat e mëposhtme:

      Asnjë - nuk ka kufij midis qelizave,
      grupe - kufizohet vetëm midis grupeve të rreshtave dhe grupeve të kolonave (do të diskutohet pak më vonë),
      rreshta - kufizohet vetëm midis rreshtave,
      kolonat - kufizohet vetëm midis kolonave,
      të gjitha - shfaq të gjitha kufijtë.

      Merrni parasysh kodin shembull



      Tabela HTML


      Kolona 1

      Kolona 2









      Rezultati

      Tani le të përpiqemi të krijojmë një tryezë të këndshme. Për këtë, le të fillojmë të përdorim rreshtimi në tabelë... Për këtë, ekzistojnë parametrat e mëposhtëm të njohur:

      radhit - rreshtimi i tryezës. Mund të pozicionohet majtas (majtas), djathtas (djathtas), qendër (qendër)
      hapësira qelizore - distanca midis qelizave të tabelës. Specifikuar në pixel (parazgjedhur 0 pixel)
      mbulesa celulare - mbushje në piksel midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm (nga parazgjedhja 0 piksele)
      Shikoni një shembull



      Tabela HTML


      Kolona 1

      Kolona 2

      Teksti në qelizën e parë të kolonës së parë

      Teksti në qelizën e dytë të kolonës së dytë







      Shfletuesi shfaq një tryezë në qendër që duket si kjo

      Vargjet Tr dhe qelizat td në tabelat HTML

      Më lejoni t'ju kujtoj përsëri se tabelat formohen rresht për rresht (tr). Rreshtat (tr) përmbajnë tashmë qelizat (td). Nëse vendosni një parametër për një varg (tr), atëherë ai do të jetë i vlefshëm për të gjitha qelizat (td) në këtë linjë, nëse për një qelizë specifike, atëherë vetëm për të. Në shembujt e mësipërm, unë specifikova ngjyrën për rreshtin, ky parametër u shpërnda në përputhje me rrethanat për të gjitha qelizat.





      Për etiketat tr dhe td ekzistojnë si më poshtë

      radhit - rreshtimi i tekstit brenda qelizës. Majtas (majtas), djathtas (djathtas), qendra (qendra)
      valign - rreshtimi vertikal i tekstit brenda qelizës. Lart (sipër), poshtë (poshtë), qendër (mes)
      ngjyra e gjelbër - vendos ngjyrën e vijës
      gjerësia - gjerësia e kolonës (të gjitha qelizat më poshtë do ta pranojnë këtë parametër) specifikohet në pixel ose në përqindje, ku 100% është gjerësia e tërë tabelës
      lartësia - lartësia e qelizës (të gjitha qelizat në rresht do ta pranojnë këtë parametër)

      Merrni parasysh një kod ku përmbajtja e qelizave (td) është e vendosur në skaje të ndryshme: në të parën në të majtë, në të dytën në të djathtë:



      Tabela HTML


      Kolona 1

      Kolona 2

      Teksti në qelizën e parë të kolonës së parë

      Teksti në qelizën e dytë të kolonës së dytë

      Kolona 1

      Kolona 2







      Rezultati

      Me ndihmën e tabelave, ju mund të bëni një faqe shumë të mirë. Mos harroni se mund të futni jo vetëm tekst në qeliza, por edhe imazhe, lidhje, etj.!)

      Faleminderit per vemendjen tuaj! Shpresoj që materiali të ishte i dobishëm!


      Kolona 1

      Kolona 2

      Teksti në qelizën e parë të kolonës së parë

      Teksti në qelizën e dytë të kolonës së dytë