Dhëmbëzimi në tabelën CSS. Marzhet brenda qelizave

Përshëndetje. Tabela si element ka karakteristikat e veta që e dallojnë shumë nga ato më të njohurat për shumë blloqe. Sot do të doja të flisja se si është shkruar distanca midis qelizave të tabelës në css.

Dallimet me modelin e bllokut

Për të vendosur distancën midis blloqeve, zakonisht përdoret mbushja e jashtme, por kjo nuk funksionon në rastin e qelizave. Qelizat mund të mbushen brenda, por jo nga jashtë.

Kjo duket të jetë një katastrofë e vogël, por si parazgjedhje, qelizat në tabelë nuk janë të vendosura fund-për-fund, por me dhëmbëzime të vogla, të cilat nuk janë gjithmonë të nevojshme. Si t’i hiqni ato?

Prona e ndarjes së kufijve

Prona vjen në shpëtim, e cila përdoret në CSS posaçërisht për të dhëna tabelare - ndarja e kufijve. Siç sugjeron emri, ajo përcakton hapësirën e lirë (mbushjen) nga secila qelizë.

Një pikë e rëndësishme: e gjithë tabela duhet të vendosë ndarjen e kufijve. Kjo është, si kjo:

Tabela (
Hapësira e kufijve: 0;
}

Me këtë rregull, ne heqim distancën midis qelizave dhe tani ato janë të shtrënguara fort kundër njëra-tjetrës. Prandaj, në pixel, mund ta vendosni këtë distancë, nëse është e nevojshme.

Mund të jetë pak e pazakontë që një pronë të vendoset në një përzgjedhës tavoline, por kjo është një tipar specifik i tryezës, thjesht duhet ta mbani mend atë. Prona nuk do të funksionojë nëse tabela vendoset gjithashtu në shembjen e kufirit: shembje. Në këtë rast, mbushja e qelizave hiqet automatikisht dhe nuk ka nevojë për ndarje kufijsh.

Mënyrë e vjetër për të vendosur mbushjen e qelizave

Më parë për këtë në etiketë

shtoi atributin e hapësirës qelizore, i cili përcaktoi mbushjen, por sot kjo nuk rekomandohet. Kjo është duke ngatërruar kodin dhe nuk është në përputhje me standardet moderne të zhvillimit të internetit.

Çështja është që mbushja i referohet pamjes së një elementi, dhe html është plotësisht e papërshtatshme për këtë rast. Standardsshtë e sigurt nga standardet që css duhet të jetë përgjegjëse për këtë.

Siç mund ta shihni, në css, distanca midis qelizave të tabelës mund të hiqet krejtësisht, ose mund ta kontrolloni duke përdorur pronën ndarja e kufijve... Kjo është e gjitha për sot. Nëse jeni të interesuar në temën e ndërtimit të faqes, regjistrohuni për të mbajtur informacionin për materialet e reja në sit.

Ne kemi konsideruar shumë metoda të elementeve të stilimit në faqe si informacione me tekst, lidhje, imazhe, tituj, por e gjithë kjo nuk mjafton ende. Në artikujt e mi, unë shpesh përdor elemente HTML të tilla si tabela, sepse në shumicën e rasteve ato janë ndihmoni në organizimin e informacionit të rëndësishëm dhe bëjeni më të lehtë prezantimin.

Në këtë artikull, unë do t'ju prezantoj me ndërlikimet e stilimit të tabelave HTML dhe do të mësoni veti të reja CSS të krijuara për të arritur këto qëllime.

Gjuha e shënimit të hipertekstit HTML na ka ofruar një numër të madh mundësish për të lidhur stilet e CSS në dhjetë etiketa unike të krijuara për të punuar me tabela, sugjeroj që t'i përsërisni ato para studimit të mëtejshëm:

("Fundi i tabelës") ngjyra e sfondit - koral, për elementin (Tabela "kokë") vendosni ngjyrën e sfondit argjend.

Për sendet

që janë brenda elementit (trupi i tryezës) vendosni ndryshimin e ngjyrës së sfondit në pezull (klasa pseudo: rri pezull) c e bardhe për ngjyra kaki (e gjithë vija është e theksuar).

Rezultati i shembullit tonë:

Figura: 153 Shembull i stilizimit të rreshtave në tabela

Shembulli i mëposhtëm tregon se si të zbatohet rrumbullakimi i këndit në qelizat e tryezës (prona).

) ne vendosim mbushjen e poshtme në 19 piksel. Shpresoj të mos jeni të hutuar nga numrat e pabarabartë :)

Rezultati i shembullit tonë:

Hapësira ndërmjet qelizave

Pas shembullit të mësipërm, ju mund të keni vërejtur se kemi një hendek midis të gjitha qelizave të tabelës. Le të shohim se si të heqim hendekun midis qelizave të tryezës, ose ta rrisim atë.

Për të vendosur distancën midis kufijve të qelizave fqinje, duhet të përdorni pronën CSS - ndarjen e kufijve.

ndarja e kufijve: 30px 10px;

1	2	3
2
3

ndarja e kufijve: 0;

1	2	3
2
3

ndarja e kufijve: 0.2em;

1	2	3
2
3

Në këtë shembull, ne:

• noton: majtas). Nëse e keni humbur temën e elementeve lundrues, atëherë gjithmonë mund t'i ktheheni asaj në këtë manual - "".
• Përveç kësaj, ne vendosim mbushjen e tryezës në të djathtë në 30 px dhe vendosim shtrirjen vertikale të tabelave (pjesa e sipërme e elementit është e rreshtuar me pjesën e sipërme të elementit më të lartë). Ne do të kthehemi në këtë pronë në detaje në këtë artikull.

) - e theksuar.

Për qelizat e tabelës (kokë dhe qelizat e të dhënave), ne vendosim një kufi të ngurtë 1 pixel me ngjyra # F50 magji dhe vendosëm mbushjen në 19 piksel për të gjitha anët.

Për tryezën e parë me klasë .e para ne vendosim hapësirën ndërmjet qelizave të tabelës (prona e ndarjes së kufirit) në 30px 10px për tabelën e dytë me klasën .e dyta e barabartë me zero, për tabelën e tretë me klasë .e treta e barabartë me 0.2em.

Unë tërheq vëmendjen tuaj për faktin se nëse specifikohet vetëm një vlerë e gjatësisë në vetinë e ndarjes së kufirit, atëherë ajo tregon hapësirën, si horizontale dhe vertikalisht, dhe nëse specifikohen dy vlera gjatësi, atëherë e para përcakton distancën horizontale, dhe e dyta vertikale. Distanca midis kufijve të qelizave ngjitur mund të specifikohet në njësitë CSS (px, cm, em, etj.). Vlerat negative nuk lejohen.

Rezultati i shembullit tonë:

Shfaq kufijtë rreth qelizave të tryezës

Mund të thuash: - pra, kemi hequr hapësirën ndërmjet qelizave duke përdorur vetinë e ndarjes së kufijve me një vlerë 0, por pse tani kemi kufijtë e qelizave që kryqëzohen?

Kufijtë e dyfishtë formohen për shkak të faktit se kufiri i poshtëm i një qelize shtohet në kufirin e sipërm të qelizës që është poshtë saj, një situatë e ngjashme ndodh në anët e qelizave dhe kjo është logjike nga pikëpamja e shfaqjes së tabelës, por për fat të mirë ekziston një mënyrë për t'i treguar shfletuesit që jemi ne nuk duam të shohim një sjellje kaq të pacipë të kufijve të qelizave.

Për ta bërë këtë, duhet të përdorni pronën CSS të shembjes së kufirit. Çuditërisht, përdorimi i pronës së shembjes së kufirit me vlerën e rënies është mënyra më e mirë për të hequr hendekun midis qelizave dhe për të mos marrë kufij të dyfishtë midis tyre.

Merrni parasysh një krahasim të sjelljes së kufirit kur përdorni pronën e ndarjes së kufirit të vendosur në 0 dhe pronën e shembjes së kufirit të vendosur për të shembur:

ndarja e kufijve: 0;

1	2	3
2
3

kolapsi i kufirit: shembje;

1	2	3
2
3

Në këtë shembull, ne:

• Ne i bëmë tabelat tona të notonin dhe të rreshtuara majtas (noton: majtas), vendosëm mbushjen e tyre të djathtë në 30px.
• Vendosni për emrin e tabelës (etiketën

) - e theksuar.

Për qelizat e tryezës (kokë dhe qelizat e të dhënave), ne vendosim një kufi të ngurtë 5px me # F50 magji dhe vendosim një gjerësi fikse 50px dhe një lartësi 75px.

Për tryezën e parë me klasë .e para vendosim hapësirën ndërmjet qelizave të tabelës në zero (ndarja e kufijve: 0;), dhe për tabelën e dytë me klasën .e dyta vendosni që prona e rënies së kufirit të shembet, e cila bashkon kufijtë e qelizave në një kur është e mundur.

Rezultati i shembullit tonë:

Sjellja e qelizave boshe

Duke përdorur CSS, mund të vendosni nëse do të shfaqni kufijtë dhe sfondet për qelizat boshe në një tryezë apo jo. Prona e qelizave boshe është përgjegjëse për këtë sjellje, e cila si parazgjedhje, siç mund ta keni vërejtur nga shembujt e mëparshëm, tregon qelizat boshe.

Le të kalojmë në një shembull:

qelizat boshe: shfaqje;

1	2	3
2		☺
3	☺

qelizat boshe: fsheh;

1	2	3
2		☺
3	☺

Për të kuptuar se si funksionon vetia e qelizave boshe nga ky shembull është shumë e thjeshtë, nëse është vendosur të fshihet, atëherë qelizat boshe dhe sfondi në to do të fshihen, nëse vendosen të shfaqen (si parazgjedhje), atëherë ato do të shfaqen.

Vendndodhja e kokës së tryezës

Le të hedhim një vështrim në një veti tjetër të thjeshtë për stilimin e tabelave - nga ana e titullit, e cila përcakton pozicionin e titullit të tabelës (sipër ose poshtë tryezës). Si parazgjedhje, prona nga ana e titullit vendoset në krye, e cila vendos titullin mbi tryezë. Për të vendosur titullin nën tryezë, duhet të përdorni pronën me vlerën e poshtme.

Le të shohim një shembull të përdorimit të kësaj prone:

Duke shkuar sipër tryezës

Emrin	Çmimi
Nje peshk	350 rubla
Mish	250 rubla

Titulli poshtë tabelës

Emrin	Çmimi
Nje peshk	350 rubla
Mish	250 rubla

Në këtë shembull, ne kemi krijuar dy klasaqë kontrollojnë pozicionin e kokës së tabelës. Klasa e parë ( .top Kapitulli) vendos titullin e tabelës mbi të, ne e zbatuam atë në tabelën e parë dhe klasën e dytë ( .poshtë Kapitulli) vendos titullin e tabelës poshtë tij, ne e zbatuam atë në tabelën e dytë. Klasa .top Kapitulli ka një veti të paracaktuar nga ana e titullit dhe është krijuar për qëllime demonstrimi.

Rezultati i shembullit tonë:

Shtrirja horizontale dhe vertikale

Në shumicën e rasteve, kur punoni me tabela, do t'ju duhet të rregulloni rreshtimin e përmbajtjes brenda kokës dhe qelizave të të dhënave. Prona e rreshtimit të tekstit përdoret për shtrirjen horizontale të ngjashme me çdo informacion të tekstit. Ne diskutuam përdorimin e kësaj prone për tekst më parë në artikullin "".

Për të vendosur shtrirjen për përmbajtjen në qeliza, duhet të përdorni fjalë kyçe të veçanta me vetinë e rreshtimit të tekstit. Le të shqyrtojmë zbatimin e fjalëve kyçe të kësaj prone në shembullin vijues.

Vlera	Përshkrim
u largua	Drejton tekstin e qelizës në të majtë. Kjo është e paracaktuar (nëse drejtimi i tekstit është lënë në të djathtë).
e drejtë	Drejton tekstin e qelizës në të djathtë. Kjo është e paracaktuar (nëse drejtimi i tekstit është djathtas majtas).
qendra	Rendit tekstin e qelizës në qendër.
justifikoj	Zgjat linjat në mënyrë që secila rresht të ketë të njëjtën gjerësi (shtrihet teksti i qelizës për t'iu përshtatur gjerësisë).

Në këtë shembull, ne kemi krijuar katër klasaqë vendosin shtrirje horizontale të ndryshme në qeliza dhe i zbatojnë ato në mënyrë që të rreshtat e tryezës. Vlera në qelizë përputhet me vlerën e pronës së rreshtimit të tekstit

Rezultati i shembullit tonë:

Përveç shtrirjes horizontale, ju gjithashtu mund të përcaktoni shtrirjen vertikale në qelizat e tabelës duke përdorur vetinë vertikale-align.

Ju lutemi vini re se kur punoni me qelizat e tryezës, përdoren vetëm vlerat e mëposhtme * të kësaj prone:

* - Vlerat nën, super, krye të tekstit, fund në tekst, gjatësi dhe% të aplikuara në një qelizë tabele do të sillen sikur përdorin një vlerë fillestare.

Le të shohim një shembull të përdorimit:

Vlera	Përshkrim
bazë	Rendit bazën fillestare të qelizës në vijën bazë të prindit. Kjo është parazgjedhja.
majë	Rendit përmbajtjen e qelizës vertikalisht në majë.
e mesme	Rendit përmbajtjen e qelizës vertikalisht në mes.
fund	Rendit përmbajtjen e qelizës vertikalisht në pjesën e poshtme.

Në këtë shembull, ne kemi krijuar katër klasaqë vendosin shtrirje vertikale të ndryshme në qeliza dhe i zbatojnë ato në mënyrë që të rreshtat e tryezës. Vlera në qelizë përputhet me vlerën e vetisë vertikale-align që është aplikuar në atë rresht.

Algoritmi për vendosjen e paraqitjes së tryezës nga shfletuesi

CSS përdor si parazgjedhje algoritmin automatik të paraqitjes së tryezës në shfletues. Në këtë rast gjerësia e kolonës përcaktohet nga përmbajtja më e gjerë e qelizave që nuk thyen... Ky algoritëm mund të jetë i ngadaltë në disa raste, pasi shfletuesi duhet të lexojë të gjitha përmbajtjet në tabelë para se të përcaktojë paraqitjen e tij përfundimtare.

Për të ndryshuar llojin e vendosjes së paraqitjes së tryezës nga shfletuesi me automatike në fikse, ju duhet të përdorni veçorinë CSS të paraqitjes në tryezë me vlerën fikse.

Në këtë rast, vendosja horizontale varet vetëm nga nga gjerësia e tabelës dhe gjerësia e kolonave, dhe jo nga përmbajtja e qelizave. Shfletuesi fillon të shfaqë tabelën menjëherë pasi të merret rreshti i parë. Si pasojë, algoritmi fiks ju lejon të krijoni paraqitjen e një tabele të tillë më shpejt sesa të përdorni versionin automatik. Kur punoni me tavolina të mëdha, mund të përdorni një algoritëm fiks për të përmirësuar performancën.

Le të shohim zbatimin e kësaj prone me shembullin vijues:

paraqitja e tryezës: automatike;

Emrin	2009	2010	2011	2012	2013	2014	2015	2016
Gruri	125	215	2540	33287	695878	1222222	125840000	125

paraqitja e tryezës: fikse;

Emrin	2009	2010	2011	2012	2013	2014	2015	2016
Gruri	125	215	2540	33287	695878	1222222	125840000	125

Në këtë shembull, ne:

Stilimi i rreshtave dhe kolonave të tryezës

Ne tashmë kemi prekur pjesërisht metodat e stilimit të rreshtave dhe kolonave të tabelës në artikullin "". Në këtë artikull, ne shikuam duke përdorur një grup pseudo-klasë që ju lejon të alternoni stilet e rreshtit në tabela duke përdorur vlera madje (madje) dhe i çuditshëm (i çuditshëm), ose nga fillore formulë matematikore.

Le të rishikojmë teknikat e mëparshme dhe të eksplorojmë mënyra të reja për të stiluar rreshtat dhe kolonat në tabela. Le të kalojmë në shembuj.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Në këtë shembull, ne:

Rezultati i shembullit tonë:

Le të kalojmë në shembullin tjetër, në të cilin do të shohim opsionet për stilimin e rreshtave të tryezës.

Shërbimi	Kosto
Shuma	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Në këtë shembull, ne:

• Ne vendosim gjerësinë e tabelës në 100% të gjerësisë së elementit mëmë, dhe vendosim një kufi të fortë 1px për kokën dhe qelizat e të dhënave.
• Instaluar për artikullin

Etiketoj	Përshkrim
. Përcakton përmbajtjen e tabelës. Specifikon emrin e tabelës. Përcakton qelinë e kokës së tabelës. Përcakton një rresht në një tabelë. Përcakton qelizën e të dhënave të tabelës. Përdoret për të përmbajtur kokën e grupit në tabelë (header table). Përdoret për të përmbajtur "trupin" e tryezës. Përdoret për të përmbajtur "fundin" e tabelës (fundin). Përcakton vetitë e specifikuara të kolonës për secilën kolonë brenda një etikete Përcakton një grup kolonash në një tabelë. Puna me dhëmbëzat e tryezës Gërvishtjet e tryezës 1 2 3 4 2 3 4 Në këtë shembull, ne: Vendoset tavolina në qendër duke përdorur teknikën horizontale të përqendrimit me mbushje të jashtme (marzhi: 0 automatikisht). Për emrin e tabelës (etiketimi

1	2	3	4	5

Në këtë shembull, ne:

• Vendosni tryezën me mbushje, vendosni gjerësinë dhe lartësinë e qelizave të kokës në 50px, të specifikuara transparente kufiri 5 pixel.
• Gjetur se kur rri pezull (pseudo-klasë: rri pezull) mbi qelizën e kokës, ajo merr sfondin blu ngjyra, portokalli ngjyra e tekstit, kufiri portokalli ngjyros 5 piksel dhe rrezja 100%.
• Kufiri transparent është e nevojshme në mënyrë që të rezervohet hapësira për kufirin, e cila do të shfaqet në pezull, nëse kjo nuk është bërë, tabela do të "kërcejë".

Rezultati i shembullit tonë:

Shembulli i mëposhtëm prek përdorimin e elementeve HTML dhe dhe stilimi i tyre.

Numri i aplikimit	Shërbimi	çmimi, fshij.	Total
1	Duke kënduar	6 000	6 000
2	larja	2 000	2 000
3	Pastrimi	1 000	1 000
4	Duke ngecur	1 500	1 500
5	Leximi	3 000	3 000

Në këtë shembull, ne:

Rezultati i shembullit tonë:

Epo, dhe shembulli i fundit, i cili është mjaft i vështirë për tu kuptuar dhe kërkon njohuri të përparuara në CSS, pasi prek temat e ardhshme të planifikuara për studim të hollësishëm brenda kornizës së këtij kursi.

Në shembullin e mëparshëm, kemi kuptuar se elementi HTML ju mund të aplikoni vetëm një veti të CSS, ngjyrën e sfondit, por nuk mund ta vendosni drejtpërdrejt ngjyrën e sfondit në hover (klasa pseudo-hover) në këtë element. Në këtë shembull, ne do të shikojmë se si të nxjerrim në pah një kolonë tabele duke përdorur vetëm CSS.

Numri i aplikimit	Shërbimi	çmimi, fshij.	Total
1	Duke kënduar	6 000	6 000
2	larja	2 000	2 000
3	Pastrimi	1 000	1 000
4	Duke ngecur	1 500	1 500
5	Leximi	3 000	3 000

Në këtë shembull, ne:

• Ne vendosim tabelën tonë për të zënë 100% të elementit mëmë, qelizat e tabelës zënë 25% të elementit mëmë dhe kanë një kufi të gjelbër të ngurtë 1 piksel, dhe kryefjalët dhe qelizat e të dhënave janë 45px të larta. Ne kemi hequr hendekun midis qelizave duke përdorur pronën e kolapsit të kufirit me vlerën .
• Dhe kështu, duke përdorur pseudo-elementin ::, shtoni përmbajtje pas secilit element në pezull. Pseudo-elementi :: pas është përdorur domosdoshmërisht në lidhje me vetinë e përmbajtjes, në sajë të së cilës ne vendosim një element bllok që ka një ngjyrë sfondi jeshile pyjore dhe ka pozicionimi absolut.
• Pozicionimi absolut këtu është i domosdoshëm për të kompensuar elementin në krahasim me skajin e specifikuar të paraardhësit të tij, ndërsa paraardhësi duhet të ketë një vlerë pozicioni tjetër nga statika e paracaktuar, përndryshe numërimi do të jetë relativ me skajin e specifikuar të dritares së shfletuesit, për këtë arsye vendosim për tabelën pozicionimi relativ (relativ)
• Ne vendosim për bllokun tonë të gjeneruar pronën e sipërme, e cila tregon drejtimin e zhvendosjes së elementit të pozicionuar nga buza e sipërme, dhe vetinë e poshtme, e cila tregon drejtimin e zhvendosjes së elementit të pozicionuar nga buza e poshtme. Për të dy vetitë, vlera 0 ishte specifikuar, kështu që blloku do të zërë plotësisht elementin nga fundi dhe maja e tabelës, gjerësia e këtij blloku ishte vendosur në 25%, kjo vlerë korrespondon me gjerësinë e vetë qelizës.
• Dhe vetia përfundimtare që kemi vendosur për këtë bllok: indeksi z me një vlerë prej "-1" përcakton renditjen e elementeve të pozicionuar nga boshti Z... Kjo veti është e nevojshme në mënyrë që teksti të jetë përpara këtij blloku, dhe jo pas tij, nëse nuk vendosni një vlerë më të vogël se zero, atëherë blloku do ta mbyllë tekstin.

Rezultati i shembullit tonë:

Nëse në këtë fazë të studimit nuk e kuptoni procesin e pozicionimit të elementeve, atëherë mos u dekurajoni, kjo është një temë e vështirë për tu kuptuar, të cilën gjithashtu nuk e konsideruam, por patjetër që do ta shqyrtojmë në artikullin vijues të tutorialit "Elementet e pozicionimit në CSS".

Pyetje dhe detyra mbi temën

Përfundoni Aktivitetin e Praktikës përpara se të kaloni në temën tjetër:

Nëse keni ndonjë vështirësi në përfundimin e praktikës, gjithmonë mund të hapni shembullin në një dritare të veçantë dhe të inspektoni faqen për të parë se çfarë është përdorur CSS.

2016-2020 Denis Bolshakov, ju mund të dërgoni komentet dhe sugjerimet tuaja për punën e faqes në faqen e [email protected]

Ne tashmë kemi kuptuar me ju që kanë tabelat HTML kornizëmegjithëse shfletuesit nuk i tregojnë ato si parazgjedhje. Por kjo nuk është e gjitha, secila qelizë e tryezës gjithashtu ka një kufi të quajtur kufiri qelizor... Por kjo nuk është e gjitha, duke përdorur atributet speciale të etiketave

ju mund të ndryshoni hapësirën ndërmjet qelizave dhe nga qelizat në kufirin e tryezës, si dhe mbushjen nga kufijtë e qelizave në përmbajtjen e tyre.

Korniza e tryezës HTML, kufijtë e qelizave, ndarja dhe mbushja.

Pra për krijimi i kornizës Tabela HTML dhe kufijtë e qelizave të saj përdoret vetëm një atribut i etiketës

- kufiri. Vlera e atributit është numër i plotë jo-negativ (zero si parazgjedhje), që do të thotë madhësia në pixel. Por, vëmendja, madhësia ndryshon vetëm në kufirin e tabelës, në kufijtë e qelizave është gjithmonë e pandryshuar.

...

Për ndryshim distanca midis qelizave (kufijtë e tyre) dhe nga qelizat në kornizë tabela në etiketë

zbatohet atributi i hapësirës qelizore. Vlerat e tij mund të jenë gjithashtu vetëm numra që matin distancat në piksel.

...

Për të vendosur të brendshme mbushje nga kufijtë e qelizave në përmbajtjen e tyre e nevojshme në etiketë

përdorni atributin e mbushjes së qelizave. Dhe vlerat e tij janë numra që përfaqësojnë dimensionet e pikselëve.

...

Vini re se shfletuesit vendosin vlera të vogla (dy piksele) për hapësirën e qelizave dhe mbushjen e qelizave si parazgjedhje, kështu që për të hequr hapësirën krejtësisht, vendosni atributet në zero (0).

Shembull i kufijve, kufijve dhe mbushjes së tabelave HTML

Qeliza 1.1	Qeliza 1.2	Qeliza 1.3
Qeliza 2.1	Qeliza 2.2	Qeliza 2.3
Qeliza 3.1	Qeliza 3.2	Qeliza 3.3

Tabela me vetëm kufijtë e kufijve dhe qelizave të vendosura:

Qeliza 1.1	Qeliza 1.2	Qeliza 1.3
Qeliza 2.1	Qeliza 2.2	Qeliza 2.3
Qeliza 3.1	Qeliza 3.2	Qeliza 3.3

Rezultati në shfletues

Tabela me dhëmbëza dhe distanca të ndryshuara:

Natyrisht, nuk është e nevojshme të vizatoni kornizën dhe kufijtë e qelizave në tabelë në mënyrë që të ndryshoni mbushjen dhe hapësirën midis qelizave.

Sipas sintaksës HTML, shfletuesit shtojnë hapësira të hapësirave dhe vlera të qelizave në dimensionet e tabelës dhe qelizave të saj. Për shembull, nëse vendosni gjerësinë e qelizës në 100 pixel dhe cellpadding \u003d "10" - shfletuesit shtojnë 20 pixel në gjerësi (10 secili në të majtë dhe të djathtë) dhe bëhet 120 pixel. Në përgjithësi, do ta kuptoni gjatë rrugës.

Devijimi nga tema ose si të hiqni mbushjen në skajet e faqes

Fillimisht, të gjithë shfletuesit vendosin kufij të vegjël në skajet e faqeve HTML, të cilat shpesh janë të panevojshme, kështu që tani do të mësoni se si t'i hiqni ato. Në përgjithësi, ky informacion duhet të vendoset në fillim të librit shkollor, por atje vështirë se do të ishte i dobishëm për ju.

Në një kohë etiketën kishte katër atribute që përcaktonin madhësinë e këtyre kufijve për secilën anë të faqes: topmargin (lart), rightmargin (djathtas), bottommargin (fund), dhe leftmargin (majtas). Këto atribute janë zhvlerësuar, kështu që ne do të zbatojmë stilet (CSS). Pra, ka disa mënyra për të ndryshuar hapësirën e mbushjes në skajet e faqes, unë do t'ju tregoj dy, dhe ju do të mësoni për të tretën nëse vendosni të mësoni CSS.

Metoda e parë. Etiketa B specifikoni atributin e stilit me vlerat e mëposhtme:

style \u003d "margin: 0"\u003e ... - heq prerjet nga të gjitha anët e faqes HTML në të njëjtën kohë.

stili \u003d "diferencë: lart djathtas poshtë majtas">... - rregullon madhësinë e dhëmbëzimeve për secilën anë në drejtim të akrepave të orës. Në mënyrë tipike, përdoren dimensionet e pikselëve, për shembull: style \u003d "margin: 5px 3px 4px 5px"\u003e ...

Mënyra e dytë dhe më e përshtatshme. Në etiketë

Detyre shtepie.

Në këtë mësim, as unë nuk do të përshkruaj gjithçka në detaje - vetëm pikat e përgjithshme. Për plotësinë, shihni rezultatin e shembullit.

1. Krijoni tre tabela, secila me një rresht dhe tre kolona.
2. Vendosni Header ose "header" të faqes në tabelën e parë (të mos ngatërrohet me "header" të dokumentit HTML), në të dytën - menutë majtas dhe djathtas, si dhe përmbajtjen kryesore (përmbajtjen), në të tretën - Footer ose "footer" të faqes.
3. Le të fiksohet gjerësia e kolonës së parë dhe të fundit të secilës tryezë.
4. E rëndësishme Përdorni një etiketë thjesht për të krijuar katër butona horizontale të menusë në "kokën" e faqes. Në raste të tjera, lejoni që imazhet të jenë në sfond, dhe në qelizat e dyta të tabelave, zakonisht përdoren vetëm ngjyrat, dhe në tabelën e parë dhe të fundit është # 99FF99.
5. Lejoni që teksti i përmbajtjes së faqes të rreshtohet në të dy anët e qelizës së tabelës dhe titullin të përqendruar.
6. Sa i përket hapësirës ndërmjet qelizave të tryezës, si dhe dhëmbëzave të qelizave, mendoni vetë se ku duhet t'i hiqni plotësisht ato dhe ku t'i rritni ato.

Specifikimi CSS jep mundësi të pakufizuara për hartimin e tryezës. Si parazgjedhje, tabela dhe qelizat e tabelës nuk kanë kufij dhe sfonde të dukshme dhe qelizat brenda tabelës nuk janë ngjitur me njëra-tjetrën.

Gjerësia e qelizave të tabelës përcaktohet nga gjerësia e përmbajtjes së tyre, kështu që gjerësia e kolonave të tabelës mund të jetë e ndryshme. Lartësia e të gjitha qelizave me radhë është e njëjtë dhe përcaktohet nga lartësia e qelizës më të lartë.

Formatimi i tabelave

1. Tabela kufizon kufirin

Tabela dhe qelizat brenda saj shfaqen në shfletues pa kufij të dukshëm si parazgjedhje. Kufijtë e tryezës vendosur nga prona kufitare:

Tabela (shembja e kufirit: shembje; / * hiqni hapësirat boshe midis qelizave * / bordura: 1px gri e fortë; / * vendosni një kufi të jashtëm me 1px gri për tabelën * /)

Kufijtë e qelizave të kokës secila kolonë janë vendosur për elementin e th:

Th (kufiri: 1px gri i fortë;)

Kufijtë e qelizave trupat e tryezës janë vendosur për elementin td:

Td (kufiri: 1px gri i fortë;)

Gjerësia e kufijve të qelizave ngjitur nuk është dyfishuar, kështu që mund të vendosni kufij për të gjithë tabelën në mënyrën e mëposhtme:

Th, td (kufiri: 1px gri i fortë;)

Kufiri i jashtëm i tabelës mund të zgjidhet duke i dhënë asaj një gjerësi të shtuar:

Tabela (kufiri: 3px gri e fortë;)

Kufijtë mund të vendosen pjesërisht:

/ * vendosni një kufi të jashtëm gri 3px për tryezën * / tryezë (maja e kufirit: 3px gri e fortë;) / * vendosni një kufi gri 1px për qelizën e trupit të tabelës * / td (fundi i kufirit: 1px gri e fortë;)

Mund të lexoni më shumë rreth pronës kufitare.

2. Si të vendosni gjerësinë dhe lartësinë e tryezës

Parazgjedhur gjerësia dhe lartësia e tryezës përcaktohet nga përmbajtja e qelizave të saj. Nëse nuk përcaktohet gjerësia, ajo do të jetë e barabartë me gjerësinë e rreshtit (rreshtit) më të gjerë.

Gjerësia e tabelës dhe kolonës vendosur duke përdorur vetinë gjerësi. Nëse tabela (gjerësia: 100%;) është specifikuar për një tabelë, atëherë gjerësia e tabelës do të jetë e barabartë me gjerësinë e bllokut të kontejnerit në të cilin ndodhet.

Gjerësia e tabelës dhe kolonave zakonisht specifikohet në px ose%, për shembull:

Tabela (gjerësia: 600px;) e (gjerësia: 20%;) td: fëmija i parë (gjerësia: 30%;)

Lartësia e tryezës e pavendosur. Lartësia e rreshtave tabelat mund të manipulohen duke shtuar elemente mbushëse të sipërme dhe të poshtme dhe ... Fiksimi i lartësisë duke përdorur vetinë e lartësisë nuk rekomandohet.

Th, td (mbushja: 10px 15px;)

3. Si të vendosni sfondin e tabelës

Parazgjedhur sfondi i tryezës dhe qelizat janë transparente. Nëse faqja ose blloku që përmban tabelën ka një sfond, atëherë ai do të shkëlqejë përmes tabelës. Nëse sfondi është vendosur si për tabelën, ashtu edhe për qelizat, atëherë vetëm sfondi i qelizave do të jetë i dukshëm në vendet ku sfondi i tabelës dhe qelizave mbivendosen. Sfondi për tabelën në tërësi dhe qelizat e saj mund të jenë:
mbush,
,
.

4. Kolonat e tryezës

Modeli i tabelës CSS është i përqendruar kryesisht në vargjet (rreshtat) e formuar duke përdorur një etiketë

... Në praktikë, ka raste kur keni nevojë për formatim të veçantë të kolonës, e cila është e mundur në mënyrat e mëposhtme:

duke përdorur etiketën

Mund të vendosni sfondin për çdo numër kolonash;

duke përdorur tabelën td: zgjedhës i fëmijës së parë, tryezë td: zgjedhës i fëmijës së fundit, ju mund të stiloni kolonën e parë ose të fundit të tabelës (duke përjashtuar qelizën e parë të kokës së tabelës);

duke përdorur përzgjedhësin e tryezës td: nth-child (rregulli i përzgjedhjes së kolonës), ju mund të stilizoni çdo kolonë në tabelë.

Mund të lexoni më shumë rreth përzgjedhësve të CSS.

5. Si të shtoni një titull të tabelës

Ju mund të shtoni një titull në tabelë duke përdorur etiketën , dhe duke përdorur pronën nga ana e titullit, ajo mund të vendoset para ose poshtë tryezës. Prona e përafrimit të tekstit përdoret për përafrimin horizontal të tekstit të titullit. I trashëguar.

...

Tabela Nr. 1

Kompania	P1	P2	P3	P4

mbishkrim (ana e titullit: poshtë; rreshtimi i tekstit: djathtas; mbushje: 10px 0; madhësia e shkronjave: 14px;) Figura: 2. Një shembull i shfaqjes së kokës nën tryezë

6. Si të hiqni hendekun midis kornizave të qelizave

Si parazgjedhje, kufijtë e qelizave të tabelës ndahen nga një hapësirë \u200b\u200be vogël. Nëse vendosim shembjen e kufirit: shembje për tabelën, atëherë hendeku do të hiqet. Prona është e trashëguar.

Sintaksë

Tabela (shembja e kufirit: shembja;)
Figura: 3. Një shembull i tabelave me kufij të bashkuar dhe të ndarë të qelizave

7. Si të rritet hapësira midis kornizave të qelizave

Duke përdorur karakteristikën e ndarjes së kufijve, mund të ndryshoni distancën midis kufijve të qelizave. Kjo pronë vlen për tabelën në tërësi. I trashëguar.

Sintaksë

Tabela (shembja e kufirit: e veçantë; ndarja e kufirit: 10px 20px;) tabela (shembja e kufirit: e ndarë; ndarja e kufirit: 10px;)
Figura: 4. Një shembull i tabelave me boshllëqe të rritura midis kornizave të qelizave

8. Si të fshehni qelizat e tavolinës së zbrazët

Prona e qelizave boshe fsheh ose tregon qelizat boshe. Ndikon vetëm në qelizat që nuk përmbajnë ndonjë përmbajtje. Nëse një sfond është specifikuar për një qelizë, dhe tabela (kufiri-shembja: shembja;) është e specifikuar për një tabelë, atëherë qeliza nuk do të fshihet. I trashëguar.

Kompania	P1	P2	P3
Microsoft-i	20.3	30.5
Google	50.2	40.63	45.23

tabela (kufiri: 1px solide # 69c; shembja e kufijve: veç; qelizat boshe: fsheh;) th, td (kufiri: 2px solid # 69c;) Figura: 5. Një shembull i fshehjes së një qelize të tavolinës bosh

9. Paraqitja e tryezës së faqosjes duke përdorur vetinë e paraqitjes së tabelës

Shtrirja e një paraqitje të tryezës përcaktohet nga një nga dy qasjet: paraqitja fikse ose paraqitja automatike. Paraqitja në këtë rast nënkupton mënyrën e shpërndarjes së gjerësisë së tryezës midis gjerësisë së qelizave. Prona nuk është e trashëguar.

Sintaksë

Tabela (paraqitja e tryezës: fikse;)

10. Renditjet më të mira të tryezës

1. Minimalizmi horizontal

Tabelat horizontale janë tabela në të cilat teksti lexohet horizontalisht. Çdo entitet është një linjë e veçantë. Ju mund të stiloni tavolina si kjo në një stil minimalist duke vendosur një kufi me dy pixel nën titullin e th.

Punonjës	Paga	Bonus	Mbikëqyrës
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andi
James A. Pentel	$175	$25	Annie

tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14px; sfondi: i bardhë; gjerësia maksimale: 70%; gjerësia: 70%; shembja e kufijve: shembja; teksti -align: majtas;) th (pesha e shkronjave: normale; ngjyra: # 039; fundi i kufirit: 2px solide # 6678b1; mbushja: 10px 8px;) td (ngjyra: # 669; mbushja: 9px 8px; tranzicioni: .3s lineare;) tr: hover td (ngjyra: # 6699ff;)

Me një numër të madh rreshtash, ky model i tabelave i bën ata të vështirë për tu lexuar. Për të zgjidhur këtë problem, mund të shtoni një kufi me një pixel nën të gjithë elementët td.

Td (fundi i kufirit: 1px solide #ccc; ngjyra: # 669; mbushje: 9px 8px; tranzicion: .3s linear;) / * pjesa tjetër e kodit - si në shembullin e mësipërm * /

Shtimi i një efekti: hover në elementin tr i bën më të lehta për tu lexuar tabelat me stil minimalist. Kur vendosni kursorin e miut mbi një qelizë, pjesa tjetër e qelizave të së njëjtës rresht nënvizohen në të njëjtën kohë, gjë që e bën më të lehtë mbajtjen e informacionit nëse tabelat kanë kolona të shumta.

Th (pesha e shkronjave: normale; ngjyra: # 039; mbushja: 10px 15px;) td (ngjyra: # 669; bordura e sipërme: 1px solide # e8edff; mbushja: 10px 15px;) tr: hover td (sfond: # e8edff ;)

2. Minimalizmi vertikal

Megjithëse tabela të tilla përdoren rrallë, tabelat e orientuara vertikalisht janë të dobishme për kategorizimin ose krahasimin e përshkrimeve të objekteve të përfaqësuara nga një kolonë. Ju mund t'i stiloni ato në një stil minimalist duke shtuar një hapësirë \u200b\u200bqë ndan kolonat.

Th (pesha e shkronjave: normale; fundi i kufirit: 2px solid # 6678b1; kufiri-djathtas: 30px solid #fff; kufiri majtas: 30px solid #fff; ngjyra: # 039; mbushja: 8px 2px;) td (kufiri- djathtas: 30px solid #fff; majtas kufirit: 30px solid #fff; ngjyra: # 669; mbushje: 12px 2px;)

3. Stili "Kutia"

Stili më i besueshëm për zbukurimin e tryezave të të gjitha llojeve është stili i ashtuquajtur "kuti". Mjafton të zgjidhni një skemë të mirë ngjyrash dhe pastaj të vendosni ngjyrën e sfondit për të gjitha qelizat. Mos harroni të theksoni ndryshimin midis linjave duke vendosur kufijtë si ndarës.

Th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: # b9c9fe; bordura e sipërme: 4px solide #aabcfe; fundi i bordurave: 1px solide #fff; ngjyra: # 039; mbushja: 8px;) td (sfond : # e8edff; fundi i kufirit: 1px solide #fff; ngjyra: # 669; bordura e sipërme: 1px solide transparente; mbushja: 8px;) tr: hover td (sfond: #ccddff;)

Gjëja më e vështirë është të gjesh skemën e ngjyrave që do të bashkohet në mënyrë harmonike me faqen tuaj. Nëse faqja është e ngarkuar me grafikë dhe dizajn, atëherë do të jetë mjaft e vështirë për ju të përdorni këtë stil.

Tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14px; gjerësia maksimale: 70%; gjerësia: 70%; rreshtimi i tekstit: qendra; shembja e kufirit: shembja ; bordura-maja: 7px solid # 9baff1; kufiri-fund: 7px solid # 9baff1;) th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: # e8edff; kufiri djathtas: 1px solid # 9baff1; kufiri- majtas: 1px solid # 9baff1; ngjyra: # 039; mbushje: 8px;) td (sfond: # e8edff; kufiri-djathtas: 1px solid #aabcfe; kufiri-majtas: 1px solid #aabcfe; ngjyra: # 669; mbushje: 8px ;)

4. Zebra horizontale

Tabela Zebra duket mjaft tërheqëse dhe e dobishme. Ngjyra plotësuese e sfondit mund të shërbejë si një sugjerim vizual për njerëzit që të lexojnë tryezën.

Th (pesha e shkronjave: normale; ngjyra: # 039; mbushje: 10px 15px;) td (ngjyra: # 669; bordura e sipërme: 1px e ngurtë # e8edff; mbushja: 10px 15px;) tr: fëmija i nëntë (2n) ( sfondi: # e8edff;)

5. Stili i gazetës

Për të arritur të ashtuquajturin efekt gazete, mund të aplikoni kufij në elementët e tryezës dhe të luani me qelizat brenda. Një stil i lehtë dhe minimal i gazetës mund të duket kështu: luani me skemën e ngjyrave, shtoni kufij, mbushje, sfonde të ndryshme dhe një efekt: rri pezull mbi një linjë.

Tabela (bordura: 1px solide # 69c;) e th (pesha e shkronjave: normale; ngjyra: # 039; fundi i kufijve: 1px thyer # 69c; mbushja: 12px 17px;) td (ngjyra: # 669; mbushja: 7px 17px; ) tr: rri pezull td (sfondi: #ccddff;)

Tabela (bordura: 1px solide # 69c;) e th (pesha e shkronjave: normale; ngjyra: # 039; mbushja: 10px;) td (ngjyra: # 669; bordura e sipërme: 1px ndërprerë #fff; mbushja: 10px; sfondi: #ccddff;) tr: hover td (sfond: # 99bcff;)

Tabela (kufiri: 1px i ngurtë # 6cf;) i (pesha e shkronjave: normale; madhësia e shkronjave: 13px; ngjyra: # 039; transformimi i tekstit: i madh; kufiri i djathtë: 1px i ngurtë # 0865c2; maja e kufirit: 1px i ngurtë # 0865c2; kufiri majtas: 1px solid # 0865c2; fundi i kufirit: 1px solid #fff; mbushje: 20px;) td (ngjyra: # 669; kufiri djathtas: 1px ndërprerë # 6cf; mbushja: 10px 20px;)

6. Sfondi i tryezës

Nëse po kërkoni një mënyrë të shpejtë dhe unike për të stiluar tryezën tuaj, zgjidhni një imazh tërheqës ose foto në lidhje me temën e tryezës dhe vendoseni atë si sfondin e tryezës.

Png ") 98% 86% pa përsëritje;) th (pesha e shkronjave: normale; madhësia e shkronjave: 14px; ngjyra: # 339; mbushja: 10px 12px; sfondi: e bardha;) td (ngjyra: # 669; kufiri - maja: 1px e bardhë e fortë; mbushja: 10px 12px; sfondi: rgba (51, 51, 153, .2); tranzicioni: .3s;) tr: hover td (sfondi: rgba (51, 51, 153, .1); )

Në vetvete, tabelat duken mjaft të "dobëta", përveç kësaj, shfletuesit shfaqin disa karakteristika të tabelave në mënyrën e tyre, në veçanti, kornizat. Sidoqoftë, këto mangësi mund të korrigjohen lehtësisht duke përdorur fuqinë e stileve. Në të njëjtën kohë, mjetet për hartimin e tabelave janë zgjeruar shumë, gjë që ju lejon të përshtatni me sukses tabelat në hartimin e faqes dhe të paraqisni më qartë të dhëna tabelare.

Ngjyra e sfondit të qelizës

Ngjyra e sfondit e të gjitha qelizave të tabelës në të njëjtën kohë përcaktohet përmes vetisë së sfondit, e cila zbatohet në zgjedhësin TABEL. Duke vepruar kështu, duhet të mbani mend rregullat për përdorimin e stileve, në veçanti, trashëgiminë e vetive të elementeve. Edhe pse vetia e sfondit nuk është e trashëguar, vlera e paracaktuar e sfondit për qelizat është transparente, d.m.th. transparenca, kështu që efekti i mbushjes së sfondit merret edhe për qelizat. Nëse në të njëjtën kohë me TABELA vendosni ngjyrën për zgjedhësin TD ose TH, atëherë kjo ngjyrë do të vendoset si sfond i qelizës (shembulli 2.3).

Shembulli 2.3. Ngjyrë e sfondit

Titulli 1	Titulli 2
Qeliza 3	Qeliza 4

Në këtë shembull, ne do të marrim një ngjyrë blu të sfondit për qelizat (etiketimi ) dhe e kuqe në titull (etiketë ) Kjo sepse stili për përzgjedhësin TH nuk është përcaktuar, kështu që sfondi i prindit, në këtë rast, përzgjedhësi TABEL, "skimohet". Dhe ngjyra për zgjedhësin TD specifikohet qartë, kështu që qelizat janë "mbushur" me blu.

Rezultati i këtij shembulli është treguar në Fig. 2.4.

Figura: 2.4. Ndrysho ngjyrën e sfondit

Marzhet brenda qelizave

Marzhi është distanca midis buzës së përmbajtjes së qelizës dhe kufirit të saj. Zakonisht për këtë qëllim përdoret atributi i shtresës celulare të etiketës.

... Ajo përcakton vlerën e margjinës në piksel në të gjitha anët e qelizës. Shtë e lejuar të përdoret vetia e stilit të mbushjes duke e shtuar atë në zgjedhësin TD, siç tregohet në Shembullin 2.4.

Shembulli 2.4. Fushat në tabela

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titulli 1	Titulli 2
Qeliza 3	Qeliza 4

Në këtë shembull, duke përdorur selektorët e grupimit, fushat vendosen njëkohësisht për selektorin TD dhe TH. Rezultati shembull është treguar në Fig. 2.5.

Figura: 2.5. Fushat në qeliza

Nëse vetia e stilit të mbushjes zbatohet në qelizat e tryezës, atëherë veprimi i atributit të shtresës celulare të etiketës

injoruar.

Distanca midis qelizave

Për të ndryshuar hapësirën midis qelizave, aplikoni atributin e hapësirës së qelizave të etiketës

... Efekti i kësaj atribute është qartë i dukshëm kur përdorni kufij rreth qelizave ose kur mbushni qelizat me një ngjyrë që del nga sfondi i faqes. Karakteristika e stilit të ndarjes së kufijve vepron si një zëvendësim për hapësirën e qelizave, ajo vendos distancën midis kufijve të qelizave. Një vlerë vendos hapësirën vertikale dhe horizontale midis kufijve të qelizave. Nëse kjo veti ka dy vlera, atëherë e para përcakton distancën horizontale (d.m.th. në të majtë dhe në të djathtë të qelizës), dhe e dyta përcakton distancën vertikale (lart dhe poshtë).

Prona e ndarjes së kufirit është efektive vetëm nëse prona e shembjes së kufirit nuk është vendosur për zgjedhësin TABELA me vlerën e shembjes (shembulli 2.5).

Shembull 2.5. Distanca midis kufijve të qelizave

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Rafaeli	4	11
Mikelanxhelo	24	9
Donatello	2	13

Rezultati i këtij shembulli është treguar në Fig. 2.6.

Figura: 2.6. Pamja e tabelës kur përdorni ndarjen e kufijve

Internet Explorer deri dhe duke përfshirë versionin 7 nuk e mbështet pronën e ndarjes së kufijve, kështu që tabelat do të përdorin hapësirën e paracaktuar të qelizave (zakonisht 2px) për tabelat.

Kur shtoni një pronë të shembjes së kufirit me një vlerë shembjeje në përzgjedhësin TABEL, atributi i hapësirës qelizore shpërfillet dhe vlera e ndarjes së kufirit pastrohet.

Kufijtë dhe kornizat

Si parazgjedhje, fillimisht nuk ka kufi në tabelë dhe shtohet duke përdorur atributin kufitar të etiketës

... Shfletuesit shfaqin një kufi të tillë në mënyra të ndryshme, kështu që është më mirë të mos specifikoni fare këtë atribut, dhe vizatimin e kufijve t'ia lini stileve. Le të shohim dy metoda që lidhen drejtpërdrejt me stilet.

Përdorimi i atributit të hapësirës qelizore

Dihet që atributi i hapësirës celulare të etiketës

vendos distancën ndërmjet qelizave të tabelës. Nëse përdoret një ngjyrë tjetër sfondi e tabelës dhe qelizave, atëherë do të shfaqet një rrjet vijash midis qelizave, ngjyra e së cilës përputhet me ngjyrën e tabelës dhe trashësia është e barabartë me vlerën e atributit të hapësirës së qelizave në pixel. Shembulli 2.3 më lart tregon këtë efekt, kështu që unë nuk do ta përsëris atë.

Vini re se kjo nuk është një mënyrë shumë e përshtatshme për të krijuar kufij, pasi ajo ka një fushë të kufizuar. Në këtë mënyrë mund të merrni vetëm një rrjet me një ngjyrë, jo vija vertikale ose horizontale në vendet e duhura.

Zbatimi i pronës kufitare

Prona e stilit të kufirit vendos njëkohësisht ngjyrën, stilin dhe trashësinë e kufirit rreth elementit. Kur keni nevojë të krijoni linja të ndara në anë të ndryshme, është më mirë të përdorni derivatet - kufiri majtas, kufiri djathtas, kufiri lart dhe fund kufiri, këto veti përkatësisht përcaktojnë kufirin në të majtë, të djathtë, të sipërm dhe të poshtëm.

Duke aplikuar vetinë e kufirit në përzgjedhësin TABELA, ne shtojmë një kufi rreth tryezës si një e tërë, dhe në zgjedhësin TD ose TH, ne shtojmë një kufi rreth qelizave (Shembulli 2.6).

Shembulli 2.6. Shtimi i një kufiri të dyfishtë

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titulli 1	Titulli 2
Qeliza 3	Qeliza 4

Ky shembull përdor një kufi të zi të dyfishtë rreth vetë tryezës dhe një kufi të bardhë të fortë rreth secilës qelizë. Rezultati shembull është treguar në Fig. 2.7

Figura: 2.7 Kufiri rreth tryezës dhe qelizave

Ju lutem vini re se linjat e dyfishta formohen në vendin ku bashkohen qelizat. Ato merren përsëri për shkak të veprimit të atributit të hapësirës së qelizave të etiketës

... Megjithëse kjo atribut nuk shfaqet askund në kodin shembull, shfletuesi e përdor atë si parazgjedhje. Nëse pyet , atëherë marrim jo vija të dyfishta, por të vetme, por trashësi të dyfishuar. Për të ndryshuar këtë veçori, përdorni vetinë e stilit të shembjes së kufirit me vlerën e shembjes, e cila i shtohet zgjedhësit TABELA (shembulli 2.7).

Shembulli 2.7. Krijimi i një kornize të vetme

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titulli 1	Titulli 2
Qeliza 3	Qeliza 4

Ky shembull krijon një vijë të ngurtë jeshile midis qelizave dhe një vijë të zezë të ngurtë rreth tryezës. Të gjithë kufijtë brenda tabelës kanë të njëjtën trashësi. Rezultati shembull është treguar në Fig. 2.8.

Figura: 2.8. Kufiri rreth tavolinës

Rreshtimi i përmbajtjes së qelizave

Si parazgjedhje, teksti në një qelizë tabele është i rreshtuar në të majtë. Një përjashtim nga ky rregull është etiketa , ajo përcakton një titull në të cilin është përqendruar rreshtimi. Për të ndryshuar rreshtimin, përdorni vetinë e stilit të rreshtimit të tekstit (shembulli 2.8).

Shembulli 2.8. Rreshtimi i përmbajtjes së qelizave në mënyrë horizontale

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titulli 1	Qeliza 1	Qeliza 2
Titulli 2	Qeliza 3	Qeliza 4

Në këtë shembull, përmbajtja e etiketës është i rreshtuar në të majtë dhe përmbajtja e etiketës - ne qender. Rezultati i shembullit tregohet më poshtë (Fig. 2.9).

Figura: 2.9. Renditni tekstin në qeliza

Rreshtimi vertikal në një qelizë është gjithmonë në qendër, përveç nëse shënohet ndryshe. Kjo nuk është gjithmonë e përshtatshme, veçanërisht për tabelat në të cilat përmbajtja e qelizave ndryshon në lartësi. Në këtë rast, shtrirja vendoset në skajin e sipërm të qelizës duke përdorur vetinë vertikale-align, siç tregohet në Shembullin 2.9.

Shembulli 2.9. Rreshtimi i përmbajtjes së qelizave vertikalisht

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Titulli 1	Titulli 2
Qeliza 1	Qeliza 2

Ky shembull vendos lartësinë e kokës si 40 piksele dhe teksti është rreshtuar në fund. Rezultati shembull është treguar në Fig. 2.10.

Figura: 2.10. Renditni tekstin në qeliza

Qelizat boshe

Shfletuesit shfaqin një qelizë ndryshe, pa asgjë brenda. "Asgjë" në këtë rast do të thotë se nuk është shtuar asnjë fotografi ose tekst brenda qelisë, dhe hapësira nuk merret parasysh. Natyrisht, pamja e qelizave ndryshon vetëm nëse vendoset një kufi rreth tyre. Kur përdorni një kufi të padukshëm, pamja e qelizave, pavarësisht nëse ka diçka në to ose jo, është e njëjtë.

Shfletuesit më të vjetër nuk shfaqën ngjyrën e sfondit të qelizave të pamjes së zbrazët , Prandaj, në rastin kur kërkohej të linte qelizën pa përmbajtje, por të shfaqte ngjyrën e sfondit, një hapësirë \u200b\u200be pandashme () u shtua brenda qelizës. Hapësira nuk është gjithmonë e përshtatshme, veçanërisht kur duhet të vendosni lartësinë e qelizës në 1-2 pikselë, prandaj imazhet transparente me një pixel përdoren gjerësisht. Në të vërtetë, një fotografi e tillë mund të shkallëzohet sipas gjykimit tuaj, por ajo nuk shfaqet në faqen e internetit në asnjë mënyrë.

Për fat të mirë, epoka e vizatimeve me një piksel dhe të gjitha llojet e ndarësve të bazuar në to ka kaluar. Shfletuesit punojnë mjaft mirë me tabela pa praninë e përmbajtjes së qelizave.

Prona e qelizave boshe përdoret për të kontrolluar pamjen e qelizave boshe; kur vendoset të fshihet, kufiri dhe sfondi në qelizat boshe nuk shfaqen. Nëse të gjitha qelizat në një rresht janë bosh, atëherë e gjithë rreshti është e fshehur. Një qelizë konsiderohet e zbrazët në rastet e mëposhtme:

• nuk ka fare simbole;
• qeliza përmban vetëm një burim linje, karakter tab ose hapësirë;
• dukshmëria është vendosur e fshehur.

Shtimi i një hapësire jo-thyer perceptohet si përmbajtje e dukshme, d.m.th. qeliza nuk do të jetë më bosh (shembulli 2.10).

Shembulli 2.10. Qelizat boshe

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Rafaeli		11
Mikelanxhelo	24
Donatello		13

Pamja e tabelës në shfletuesin Safari tregohet në Fig. 2.11a E njëjta tabelë në shfletuesin IE7 tregohet në Fig. 2.11b

dhe. Në shfletuesin Safari, Firefox, Opera, IE8, IE9

b Në shfletuesin IE7

Figura: 2.11. Pamja e tabelës me qelizat bosh