Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Shtrirja e qelizave të tabelës HTML. Të gjitha mënyrat e shtrirjes vertikale në CSS

Parametri align i etiketës përdoret për të vendosur shtrirjen e tabelës në qendër të faqes së internetit ose përgjatë njërës nga skajet e saj.

. Rezultati do të jetë i dukshëm vetëm nëse gjerësia e tabelës nuk zë të gjithë zonën e disponueshme, me fjalë të tjera, më pak se 100%.

Parametri align mund të marrë vlerat e mëposhtme: majtas , djathtas , qendër .

majtas - shtrirja e tabelës në anën e majtë. Ky parametër përdoret si parazgjedhje, kështu që zakonisht lihet i paspecifikuar.
djathtas - shtrirja e tabelës në anën e djathtë të faqes së internetit.
qendër - rreshtoni tabelën në qendër të faqes së internetit.

Shembulli 1 tregon se si të vendosni shtrirjen e tabelës në qendër.

Shembulli 1: Përafrimi i një tabele në qendër





Rreshtimi i tabelës






Përmbajtja e tabelës


Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Rreshtimi i tabelës në qendër

Në fakt, align jo vetëm që vendos shtrirjen, por gjithashtu bën që përmbajtja të rrjedhë rreth tryezës nga anët e tjera, të ngjashme me sjelljen e etiketës . Por që kur

nuk ka një parametër hspace që vendos kufirin horizontal, atëherë ky rol duhet të zhvendoset në stile, në veçanti, atributi margin. Shembulli 2 tregon një tabelë të rreshtuar djathtas dhe ka përmbajtje që rrjedh rreth saj.

Shembulli 2: Rreshtimi i një tabele në anën e djathtë





Rreshtimi i tabelës







Përmbajtja e tabelës

Përmbajtja e mbështjelljes së tavolinës...



Rezultati i këtij shembulli është paraqitur në Fig. 2.

Oriz. 2. Rreshtoni tabelën në anën e djathtë

Shembulli aktual krijon një tabelë me sfond gri dhe shtrirje djathtas. Për të zhvilluar dhëmbëzime nga tabela në përmbajtje, përdoret parametri i marzhit me një vlerë prej 10 pikselësh.

Për të parandaluar që tabela të mbështillet kur ajo është e rreshtuar përgjatë njërës nga skajet, mënyra më e lehtë është të shtoni një etiketë pas tabelës
me të qartë: të dyja set stil. Kjo komandë çaktivizon mbështjelljen nga skajet e majta dhe të djathta (shembulli 3).

Shembulli 3: Zbërthimi i një tavoline





Mbështjellja e tavolinës







Përmbajtja e tabelës



përmbajtje...



Rreshtimi i tabelës në qendër bëhet në të njëjtën mënyrë, përmes parametrit të etiketës align="center".

, por në këtë rast nuk ka mbështjellje dhe përmbajtja pas tabelës fillon gjithmonë në një rresht të ri.

Duhet të jetë e lehtë për vizitorin të gjejë informacionin që i nevojitet në faqe. Për këtë, si dhe për të shprehur disa shprehje, përdoren etiketa të ndryshme HTML. Ky artikull do të diskutojë nuancat e punës me tabela, në veçanti, shtrirjen e tyre.

Hollësitë themelore

Para së gjithash, duhet të theksohet se kjo formë grafike e paraqitjes së të dhënave ju lejon të strukturoni informacionin, gjë që lehtëson shumë asimilimin e tij. Pothuajse çdo përmbajtje mund të vendoset brenda qelizave të tabelës: nga teksti në video. Është e rëndësishme të merret parasysh jo vetëm madhësia, por edhe vendndodhja e saj.

Si ta bëni vetë tabelën në qendër

Më shpesh, ju duhet të rregulloni tabelën në qendër të faqes, megjithëse fillimisht ajo shtypet në anën e majtë të faqes. Për ta vendosur atë në qendër, duhet të vendosni vetinë e saj të marzhit në automatik.

...

Kjo bën që mbushja e tabelës të llogaritet automatikisht. Pas kësaj, tabela do të përqendrohet në faqe.

Rreshtimi i qendrës në qeliza

Po aq shpesh, ju duhet të rreshtoni të dhënat në qendër të një qelize. Në këtë rast, ekzistojnë tre mënyra: horizontale, vertikale dhe absolute. Nga emri i tyre është e qartë se në cilin aks do të bëhet përqendrimi. Në çdo rast, etiketa përdoret , e cila është përgjegjëse për një qelizë specifike në rresht. Tjetra, ju duhet të caktoni atributet e tij valign (vertikale) dhe / ose rreshtoni (horizontale) në "qendër", në varësi të detyrës suaj:

Teksti në qendër të qelizës

Nëse dëshironi ta bëni këtë standard të formatimit për të gjithë faqen ose faqen (në mënyrë që të mos rishkruani çdo tabelë), atëherë duhet të përdorni stilet CSS. Për ta bërë këtë, shtoni kodin e mëposhtëm brenda etiketës :

Duke përdorur këtë metodë, mund të vendosni gjithashtu shtrirjen për një qelizë specifike, si dhe për një kolonë, rresht ose të gjithë tabelën në tërësi. Siç mund ta shihni, secila prej metodave është shumë e thjeshtë.

Unë mendoj se shumë prej jush që kanë bërë punë faqosjeje kanë hasur nevojën për të rreshtuar elementët vertikalisht dhe e dinë se çfarë vështirësish lindin kur rreshtoni një element në qendër.

Po, për shtrirjen vertikale në CSS ekziston një pronë e veçantë vertikale me shumë vlera. Megjithatë, në praktikë nuk funksionon siç pritej. Le të përpiqemi ta kuptojmë këtë.


Le të krahasojmë qasjet e mëposhtme. Përafrimi me:

  • tavolina,
  • dhëmbëzimi,
  • vija e gjatesise ,
  • shtrirje,
  • marzhi negativ,
  • transformoj,
  • pseudo element
  • flexbox.
Si ilustrim, merrni parasysh shembullin e mëposhtëm.

Janë dy elemente div, me njërin e futur brenda tjetrit. Le t'u japim atyre klasat e duhura - të jashtme dhe të brendshme.


Qëllimi është të rreshtoni elementin e brendshëm me qendrën e elementit të jashtëm.

Për të filluar, merrni parasysh rastin kur madhësitë e bllokut të jashtëm dhe të brendshëm i njohur. Le të shtojmë ekranin: inline-block në elementin e brendshëm dhe text-align: në qendër dhe vertikal-align: mes në elementin e jashtëm.

Mos harroni se shtrirja zbatohet vetëm për elementët që kanë modalitetin e ekranit në linjë ose në blloqe të brendshme.

Le të vendosim madhësitë për blloqet, si dhe ngjyrat e sfondit për të parë kufijtë e tyre.

E jashtme ( gjerësia: 200 px; lartësia: 200 pikselë; rreshtimi i tekstit: në qendër; rreshtimi vertikal: i mesëm; ngjyra e sfondit: #ffc; ) . i brendshëm ( ekrani: blloku i brendshëm; gjerësia: 100 px; lartësia: 100 px; ngjyra e sfondit : #fcc;)
Pas aplikimit të stileve, do të shohim që blloku i brendshëm është i rreshtuar horizontalisht, por jo vertikalisht:
http://jsfiddle.net/c1bgfffq/

Pse ndodhi? Fakti është se vetia vertikale e rreshtimit ndikon në shtrirjen vetë elementi, jo përmbajtja e tij(përveç kur aplikohet në qelizat e tabelës). Prandaj, aplikimi i kësaj vetie në elementin e jashtëm nuk bëri asgjë. Për më tepër, aplikimi i kësaj vetie në elementin e brendshëm gjithashtu nuk do të bëjë asgjë, pasi blloqet inline janë të lidhur vertikalisht me blloqet fqinje, dhe në rastin tonë kemi një bllok inline.

Ka disa teknika për të zgjidhur këtë problem. Le të hedhim një vështrim më të afërt në secilën prej tyre më poshtë.

Rreshtimi me një tabelë

Zgjidhja e parë që vjen në mendje është zëvendësimi i bllokut të jashtëm me një tabelë me një qelizë. Në këtë rast, shtrirja do të zbatohet në përmbajtjen e qelizës, domethënë në bllokun e brendshëm.


http://jsfiddle.net/c1bgfffq/1/

Disavantazhi i dukshëm i kësaj zgjidhjeje është se nga pikëpamja e semantikës është e gabuar të përdoren tabela për rreshtim. Disavantazhi i dytë është se për të krijuar një tabelë, duhet të shtoni një element më shumë rreth bllokut të jashtëm.

Minusi i parë mund të hiqet pjesërisht duke zëvendësuar etiketat e tabelës dhe td me div dhe duke vendosur modalitetin e shfaqjes së tabelës në CSS.


.mbështjellës i jashtëm ( shfaqja: tabela; ) . i jashtëm ( shfaqja: qeliza e tabelës; )
Megjithatë, blloku i jashtëm do të mbetet ende një tabelë me të gjitha pasojat që pasojnë.

Rreshtimi me mbushje

Nëse dihen lartësitë e bllokut të brendshëm dhe të jashtëm, atëherë shtrirja mund të vendoset duke përdorur mbushjen vertikale të bllokut të brendshëm, duke përdorur formulën: (H e jashtme - H e brendshme) / 2.

E jashtme (lartësia: 200 px; ) . e brendshme (lartësia: 100 px; kufiri: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/

Disavantazhi i zgjidhjes është se është i zbatueshëm vetëm në një numër të kufizuar rastesh kur dihen lartësitë e të dy blloqeve.

Rreshtimi me lartësinë e vijës

Nëse e dini se blloku i brendshëm nuk duhet të zërë më shumë se një rresht teksti, atëherë mund të përdorni veçorinë line-height dhe ta vendosni atë të barabartë me lartësinë e bllokut të jashtëm. Meqenëse përmbajtja e bllokut të brendshëm nuk duhet të mbyllet në rreshtin e dytë, rekomandohet të shtoni hapësirën e bardhë: nowrap dhe tejmbushje: rregulla të fshehura gjithashtu.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (hapësirë ​​e bardhë: nowrap; tejmbushje: e fshehur; )
http://jsfiddle.net/c1bgfffq/12/

Kjo teknikë mund të përdoret gjithashtu për të rreshtuar tekstin me shumë rreshta nëse anashkaloni vlerën e lartësisë së rreshtit për bllokun e brendshëm dhe shtoni shfaqjen e rregullave: blloku i brendshëm dhe rreshtimi vertikal: i mesëm.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (lartësia e vijës: normale; ekrani: blloku i linjës; rreshtimi vertikal: në mes; )
http://jsfiddle.net/c1bgfffq/15/

Disavantazhi i kësaj metode është se lartësia e bllokut të jashtëm duhet të dihet.

Shtrirja e shtrirjes

Kjo metodë mund të përdoret kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e atij të brendshëm dihet.

Për këtë ju duhet:

  1. vendosni pozicionimin relativ në bllokun e jashtëm dhe pozicionimin absolut në bllokun e brendshëm;
  2. shtoni rregullat lart: 0 dhe poshtë: 0 në bllokun e brendshëm, si rezultat i të cilit do të shtrihet në të gjithë lartësinë e bllokut të jashtëm;
  3. vendosni vlerën në auto për mbushjen vertikale të bllokut të brendshëm.
.i jashtëm ( pozicioni: relative; ) . i brendshëm (lartësia: 100 px; pozicioni: absolut; lart: 0; poshtë: 0; margjina: automatike 0; )
http://jsfiddle.net/c1bgfffq/4/

Thelbi i kësaj teknike është se vendosja e një lartësie për një bllok të shtrirë dhe absolutisht të pozicionuar bën që shfletuesi të llogarisë mbushjen vertikale në proporcion të barabartë nëse vlera e tyre është vendosur në automatik.

Rreshtimi me marzh negativ-lart

Kjo metodë është bërë e njohur gjerësisht dhe përdoret shumë shpesh. Ashtu si ai i mëparshmi, aplikohet kur nuk dihet lartësia e bllokut të jashtëm, por dihet lartësia e të brendshmes.

Ju duhet të vendosni bllokun e jashtëm në pozicionim relativ dhe bllokun e brendshëm në pozicionim absolut. Më pas ju duhet ta zhvendosni kutinë e brendshme poshtë gjysmës së lartësisë së pjesës së sipërme të kutisë së jashtme: 50% dhe ta zhvendosni atë deri në gjysmën e lartësisë së saj të majës së sipërme: -H e brendshme / 2.

E jashtme ( pozicioni: relativ; ) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina e sipërme: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Disavantazhi i kësaj metode është se lartësia e njësisë së brendshme duhet të dihet.

Përafrimi me transformimin

Kjo metodë është e ngjashme me atë të mëparshme, por mund të zbatohet kur lartësia e bllokut të brendshëm nuk dihet. Në këtë rast, në vend që të vendosni një mbushje negative në piksel, mund të përdorni vetinë e transformimit dhe të ngrini kutinë e brendshme lart duke përdorur funksionin translateY dhe një vlerë prej -50%.

E jashtme ( pozicioni: relativ; ) . i brendshëm ( pozicioni: absolut; lart: 50%; transformimi: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Pse në metodën e mëparshme ishte e pamundur të vendosej vlera si përqindje? Meqenëse vlerat e përqindjes së veçorisë së marzhit janë në lidhje me elementin mëmë, një vlerë prej 50% do të ishte e barabartë me gjysmën e lartësisë së kutisë së jashtme dhe do të na duhej ta rrisnim kutinë e brendshme me gjysmën e lartësisë së saj. Pikërisht për këtë shërben vetia e transformimit.

Disavantazhi i kësaj metode është se nuk mund të aplikohet nëse blloku i brendshëm ka pozicionim absolut.

Përafrimi me Flexbox

Mënyra më moderne për t'u lidhur vertikalisht është përdorimi i Flexible Box Layout (i njohur gjerësisht si Flexbox). Ky modul ju lejon të kontrolloni në mënyrë fleksibël pozicionimin e elementeve në faqe, duke i vendosur ato pothuajse kudo. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.

Blloku i jashtëm duhet të vendoset për të shfaqur: flex, dhe blloku i brendshëm duhet të vendoset në margjina: auto. Dhe kjo është e gjitha! E bukur, apo jo?

E jashtme (ekrani: përkul; gjerësia: 200 px; lartësia: 200 px; ) . e brendshme ( gjerësia: 100 px; diferenca: automatike; )
http://jsfiddle.net/c1bgfffq/14/

Disavantazhi i kësaj metode është se Flexbox mbështetet vetëm nga shfletuesit modernë.

Cila mënyrë për të zgjedhur?

Është e nevojshme të vazhdohet nga deklarata e problemit:
  • Për shtrirjen vertikale të tekstit, është më mirë të përdorni mbushjen vertikale ose veçorinë line-height.
  • Për elementët e pozicionuar absolutisht me një lartësi të njohur (si p.sh. ikonat), një qasje negative në majë të marzhit është ideale.
  • Për raste më komplekse ku lartësia e bllokut është e panjohur, duhet të përdoret një pseudo-element ose vetia e transformimit.
  • Epo, nëse jeni mjaft me fat që nuk keni nevojë të mbështesni versionet më të vjetra të IE, atëherë sigurisht që Flexbox është më i mirë.

Etiketa: Shtoni etiketa

ose vetitë e tabelës HTML dhe qelizave në shembuj

Ne vazhdojmë të studiojmë tabelat HTML. Mësimi aktual do t'ju mësojë se si të instaloni madhësia e tryezës, rreshtoni vertikalisht dhe horizontalisht përmbajtjen e tij, më saktë përmbajtjen e qelizave. Do të mësoni gjithashtu se si të përcaktoni Kreu i tabelës HTML.

Navigimi i faqes

Gjerësia dhe lartësia e qelizës së tabelës HTML (madhësia e qelizës)

Lartësia dhe gjerësia e qelizës HTML, madhësia të përcaktuara nga atributet e mëposhtme:

Dimensionet e qelizës së parë nga rreshti i parë u vendosën. Si rezultat, qeliza e dytë e së njëjtës rresht trashëgoi lartësinë e së parës dhe qeliza e parë e rreshtit të dytë trashëgoi gjerësinë e saj (gjerësia e qelizës së parë, rreshti i parë). Kjo është një veçori e ndërveprimit të elementeve tabelat HTML.

Rreshtimi horizontal HTML në tabelë dhe në qelizë, tekst

Rreshtimi HTML brenda një tabele. Teksti majtas, djathtas, i përqendruar në qelizat e tabelës:

Rezultati:

Rezultati:

Rezultati:

etiketat përcaktojnë Kreu i tabelës HTML.

Qendra e tabelës HTML, ana e majtë, e djathtë

Paraqitja horizontale e tabelës HTML brenda një faqe interneti:



Shembuj të tabelës HTML







rresht = "qendër"








rresht = "majtas"








rresht = "djathtas"




Shembulli i mësipërm tregon tre të ndara tabelat, secila prej të cilave përbëhet nga një qelizë. bgcolor- HTML atribut - përcakton ngjyrën e sfondit. Në tutorialin e mëparshëm ne e përdorëm atë css analoge - background-color .

Tabela HTML e vendosur brenda një qelize



Shembuj të tabelës HTML





















Brenda qelizës së dytë është një tjetër tabela me atributet, vlerat dhe stilet e veta.

Dimensionet dhe sfondi i tabelës së brendshme, në ndryshim nga ajo e jashtme, jepen me ndihmën e css.

informon shfletuesin se tabela është e plotë.

Çdo tabelë përbëhet nga kolona dhe rreshta.

Etiketë krijon një varg dhe etiketën qelizë me radhë. Prandaj, sa qeliza përfshihen në një rresht, do të ketë kaq shumë kolona në tabelë.

Etiketë krijon edhe një qelizë. Dallimi i tij nga etiketa që qeliza e krijuar nga etiketa është një qelizë kokë: përmbajtja e saj është e përqendruar dhe nëse është tekst, shfletuesi e shfaq atë me shkronja të zeza.

Përmbajtja e qelizës e krijuar nga etiketa sipas parazgjedhjes ndodhet në pjesën e majtë të saj.

Etiketë krijon një kokë tabele, ajo ndodhet brenda etiketës

- menjëherë pas etiketës hapëse. Titulli vendoset sipër tabelës si parazgjedhje dhe është në qendër.















Kreu i tabelës
Qeliza e parë e rreshtit të parë Qeliza e dytë e rreshtit të parë
Qeliza e parë rreshti i dytë Qeliza e dytë e rreshtit të dytë

Rreshtimi i tabelës. Rreshtimi i përmbajtjes së qelizës

Atributi align i etiketës përdoret për të rreshtuar tabelën.

.

Me atributin align mund ta vendosni tabelën në pjesën e majtë ose të djathtë (align= "majtas" dhe align= "djathtas") të dritares së shfletuesit ( elementi prind) ose nga qendra e tij (align= "center" ).

Shtrirja e përmbajtjes së linjës ( etiketë

) dhe qelizat ( etiketë Ai që krijon rreshtin e tabelës nuk ka atributet lartësi dhe gjerësi. Lartësia e një rreshti korrespondon me lartësinë e qelizave të vendosura në të. Gjerësia e rreshtit është e barabartë me gjerësinë e tabelës.

Vlerat e lartësisë dhe gjerësisë përcaktohen në piksel ose si përqindje e hapësirës së lirë. Për të vendosur vlerat:

Përcakton një numër të plotë pozitiv. Në këtë rast, madhësia do të jepet në pixel;

Specifikoni një numër të plotë pozitiv me simbolin %.

Nëse përmbajtja e tabelës ose qelizës tejkalon dimensionet e specifikuara, ato do të injorohen nga shfletuesi dhe dimensionet e reja do të zgjidhen automatikisht në përputhje me dimensionet e përmbajtjes.

) horizontalisht bëhet gjithashtu me atributin align, dhe vertikalisht me atributin valign:

Atributi align merr vlerat majtas, djathtas, qendra dhe justify, të cilat vendosin shtrirjen e përmbajtjes së rreshtave dhe qelizave sipas përkatësisht majtas, djathtas, qendrës dhe gjerësisë së tyre;

Atributi valign, i cili merr vlerat lart, fund dhe mes, vendos shtrirjen e përmbajtjes së rreshtave dhe qelizave sipas sipërme, poshtme dhe mesit të tyre, përkatësisht.

Atributi align shërben gjithashtu për të lidhur kokën ( etiketë

) horizontalisht dhe përcaktimi i vendndodhjes së tij - sipër tabelës ose poshtë saj.

Si parazgjedhje, përmbajtja e qelizës është e rreshtuar majtas horizontalisht dhe e rreshtuar në qendër vertikalisht.

Lartësia dhe gjerësia e tabelës dhe qelizave

Madhësitë e paracaktuara ( lartësia dhe gjerësia) dhe tabelat dhe qelizat ndryshojnë në varësi të madhësisë së përmbajtjes së tyre.

Por lartësia dhe gjerësia e tabelës dhe e qelizave të saj individuale mund të vendosen në mënyrë eksplicite - duke përdorur respektivisht atributet lartësi dhe gjerësi.

Etiketë














>

Siç mund ta shihni nga shembulli: duke specifikuar gjerësinë e njërës prej qelizave të kolonës, ju vendosni në këtë mënyrë gjerësinë e të gjithë kolonës; dhe duke specifikuar lartësinë e njërës prej qelizave të rreshtit, ju vendosni lartësinë e të gjithë rreshtit.

Kufijtë e tabelës dhe qelizave

Tabela dhe secila prej qelizave të saj kanë kufijtë e tyre, të cilët nuk janë të dukshëm si parazgjedhje.

Atributi kufitar i etiketës

ju lejon të bëni kufijtë të dukshëm dhe të vendosni trashësinë e tyre. Kjo do të shfaqë kufijtë rreth tabelës dhe rreth çdo qelize.

Trashësia e kufirit ( ose korniza) është specifikuar në pixel. Vlera e atributit kufitar është një numër i plotë pozitiv. Nëse atributi i kufirit specifikohet pa vlerë, kufiri do të jetë 1 piksel i trashë.

Trashësia e kufirit vendoset vetëm për tabelën. Trashësia e kufirit rreth qelizave është gjithmonë 1 piksel ( ose mungon).

Si parazgjedhje, kufiri shfaqet me një efekt 3D dhe është i zi.

Atributi bordercolor vendos ngjyrën e kufirit dhe heq efektin 3D. Atributi mund të përdoret për të vendosur ngjyrën e kufirit të tabelës ( etiketë

), tela ( etiketë ) ose qeliza ( etiketë
).

Atributi bordercolor nuk mbështetet nga të gjithë shfletuesit dhe për këtë arsye nuk rekomandohet. Për të vendosur ngjyrën e kufirit, është më mirë të përdorni stilet ( është tashmë në css).










Atributi i kufirit nuk u specifikua. Prandaj, nuk ka kufij.











Kufiri i tabelës është 3 piksel i trashë. Qelizat kanë kufij të trashë 1 piksel!

Shfaqja e pjesshme e kufirit

Kufiri i tabelës dhe korniza rreth qelizave mund të shfaqen pjesërisht.

atributi i etiketës së kornizës

përcakton se ku të vizatoni kufirin e tabelës. Atributi i rregullave specifikon se si të shfaqen kufijtë e qelizave.

Korniza "500px"="hsides" rules="cols" >










Instaluar horizontale kufijtë e tavolinës
DHE shfaqen kufijtë ndërmjet kolonave

Mbushje brenda dhe jashtë qelizave

Gjatë formatimit të tabelave në HTML, për një paraqitje vizuale të disa informacioneve dhe perceptimin e tij të përshtatshëm, mund të jetë e dobishme të përdoren dhëmbëzimet brenda dhe jashtë qelizave.

Mbushje - nga kufijtë e qelizave deri te përmbajtja e tyre, e vendosur nga atributi cellpadding i etiketës

.

Mbushja e jashtme - distanca midis kufijve të qelizave fqinje dhe distanca nga kufijtë e qelizave në kufirin e tabelës, përcaktohen nga atributi i hapësirës së qelizave të etiketës

.

Vlerat e atributeve janë numra të plotë pozitivë që përcaktojnë distancën në piksel.










Largësia nga përmbajtja e qelizës në kufijtë e tyre është 10 piksele
Distanca midis qelizave dhe nga qelizat kufiri i tabelës është 25 px

Bashkimi i qelizave

Gjatë dizajnimit dhe formatimit të tabelave në HTML, shpesh është e nevojshme të bashkohen qelizat ngjitur. Dhe nëse lind një nevojë e tillë, atëherë duhet të përdorni atributet colspan dhe rowspan të etiketës

.

Atributi colspan specifikon numrin e qelizave që do të bashkohen horizontalisht dhe atributi rowspan përcakton numrin e qelizave që do të bashkohen vertikalisht.

Të dy atributet kanë kuptim nëse tabela ka shumë rreshta.










1 2
3 4

1 2
3 4

Sfondi i tryezës. Sfondi i qelizave të tabelës

Në HTML, është e mundur të vendosni një sfond të përgjithshëm për të gjithë tabelën, si dhe një sfond për një qelizë të vetme të zgjedhur.

Atributi i sfondit të etiketës

specifikon një imazh që do të jetë imazhi i sfondit të tabelës. Vlera e atributit specifikon adresën e skedarit me imazhin - një rrugë absolute ose relative për skedarin ().

atributi i etiketës bgcolor

vendos ngjyrën e sfondit të tabelës. Ngjyra mund të vendoset në dy mënyra ()

Duke përdorur të njëjtat atribute, mund të vendosni imazhin e sfondit dhe ngjyrën e sfondit për çdo qelizë tabele ( etiketë

, dhe .

Secili prej tyre mund të përdoret për të ndryshuar disa veti të një ose më shumë rreshtave të tabelës: ky është përsëri shtrirja e përmbajtjes së qelizave në rreshtat horizontalisht dhe vertikalisht - duke përdorur përkatësisht atributet align dhe valign; dhe vendosja e ngjyrës së sfondit të qelizave duke përdorur atributin bgcolor.

Kur përdorni këto etiketa, duhet të jeni të vetëdijshëm për disa nuanca që përcaktojnë vetëm ndryshimet midis tyre.

etiketat

dhe duhet të vendoset përpara etiketës , menjëherë pas etiketës së tabelës hapëse
).










Roza e errët është ngjyra e sfondit të tryezës.
Imazhi i sfondit të një qelize të vetme është qielli!

Kujtoni gjithashtu ekzistencën e atributit cols të etiketës

, i cili i tregon shfletuesit numrin e kolonave në tabelë.

Përdorimi i atributit cols lejon shfletuesin të përshkruajë përmbajtjen e tabelës më shpejt.

Redaktimi i tabelës

Në këtë seksion, ne do të shqyrtojmë etiketat që përdoren kur redaktoni disa elementë të tabelës në të njëjtën kohë. Këto etiketa mund të ndahen në dy grupe.

Grupi i parë përfshin etiketat

dhe . Ato janë pothuajse identike dhe shërbejnë për vendosjen e disa veçorive dhe ndryshimin e karakteristikave të një ose më shumë kolonave të tabelës.

Një nga këto etiketa vendoset menjëherë pas etiketës

. Le të themi këtë etiketë .

Duke përdorur atributin span të etiketës

specifikoni numrin e kolonave në të cilat do të aplikohen atributet align , valign , ose width ( rreshtoni përmbajtjen e qelizave të kolonave horizontalisht, vertikalisht ose vendosni gjerësinë e kolonave).

Nëse atributi span në etiketë

mungon, atëherë karakteristikat e një - kolona e parë e tabelës do të ndryshohen. Herën e dytë që përdorni etiketën vetitë janë caktuar për sa vijon ( tjetër - nëse atributi span mungon) kolonat e tabelave etj.



"2" gjerësi="70px" >







1 2 3 4 5

1 2 3 4 5

Grupi i dytë i etiketave përfshin gjithashtu etiketa pothuajse identike

. Linjat e vendosura në një etiketë janë paraqitur në krye të tabelës, dhe rreshtat e mbyllura në etiketë do të jetë në fund të tabelës. Të dy etiketat mund të aplikohen vetëm një herë në të njëjtën tabelë.

Etiketë

mund të përdoret disa herë brenda një etikete
.









"right" bgcolor= "#00FF33" >

1 2
3 4
5 6
7 8
9 10
1 2
3 4
5 6
7 8
9 10

Artikujt kryesorë të lidhur