Distanca midis kolonave të tabelës html. Përdorimi i atributit të hapësirës qelizore

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 tabelës gjithashtu ka një kornizë të quajtur kufiri qelizor... Por kjo nuk është e gjitha, duke përdorur atributet speciale të etiketave

ju mund të ndryshoni hapësirën midis 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 që 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ë shfletuesin

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

Natyrisht, nuk është e nevojshme të vizatoni kufirin 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 sasinë 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. Në tabelën e parë, vendosni Header ose "header" të faqes (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, lini 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. Lëreni që përmbajtja e 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: shembja; / * hiqni hapësirat bosh midis qelizave * / bordura: 1px gri e fortë; / * vendosni një kufi të jashtëm 1px 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 specifikohet gjerësi, atëherë 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 përqendrohet kryesisht në vargjet (rreshtat) e formuar duke përdorur etiketën

... 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: fëmija i parë, tabela td: përzgjedhësi 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 tabelë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 me pronën nga ana e mbishkrimit 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 vetinë 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 tabelave boshe

Prona e qelizave bosh fsheh ose tregon qelizat boshe. Prek vetëm 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 tavoline të zbrazët

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

Shtrirja e një paraqitjeje tryeze përcaktohet nga njëra nga dy mënyrat: 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ë stilizoni tabela 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 është 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; mbushje: 10px 15px;) td (ngjyra: # 669; bordura e sipërme: 1px solide # e8edff; mbushje: 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; kufiri majtas: 30px solid #fff; ngjyra: # 669; mbushje: 12px 2px;)

3. Stili "Kutia"

Stili më i besueshëm për zbukurimin e tavolinave 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ë shkrihet 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 solide # 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 në pezull mbi një vijë.

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: rri pezull td (sfondi: # 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); )

Përshëndetje! Pra, tani ju jeni në gjendje të krijoni tabela elementare, të përbërë nga aq rreshta dhe kolona sa ju nevojiten. Jo keq, jo keq. Tani le të flasim për hartimin e këtyre tabelave.

Në mësimin e fundit, tabelat u shfaqën pa kufij. Dhe, e shihni, duket kaq shumë, madje as nuk mund ta quani një shenjë. Për të bërë kufijtë e tryezës në HTML, shtoni në etiketë

atribut kufiriduke i dhënë asaj një vlerë tjetër nga zero.

Pra, le të krijojmë kufij për tryezën. Për shembull, për atë që kemi tashmë:

Qeliza lart majtas	Qeliza lart e djathtë
Në fund të qelizës së majtë	Qeli poshtë

Rezultati në shfletuesin:

Si të hiqni kufijtë e tryezës

Nga ana tjetër, për të hequr kufijtë e tabelës HTML, ose mund të thuash gjithashtu për t'i bërë ato të padukshme, të duhet atributi kufiri vlera e caktuar 0 ... Pas këtyre veprimeve të thjeshta, korniza do të hiqet.

Atributi ju lejon të krijoni, por jo të menaxhoni kufij. Vetëm ju lejon të ndryshoni trashësinë e tyre.

Prandaj, tani do të flasim për CSSvetitë e të cilit e bëjnë të mundur me kufirikrijoni kufij të ndryshëm, si brenda secilës qelizë ashtu edhe jashtë, rreth tryezës si një e tërë.

Le të shohim se si të aplikojmë CSS për të krijuar kufijtë e jashtëm dhe të brendshëm të një tabele.
Për ta bërë këtë, hiqni atributin e kufirit nga tabela jonë dhe shtoni stile:

Qeliza lart majtas	Qeliza lart e djathtë
Në fund të qelizës së majtë	Qeli poshtë

Rezultati në shfletuesin:

Tani le të shtojmë kufij për secilën qelizë. Për ta bërë këtë, thjesht shtoni stilet:

Rezultati në shfletuesin:

Si të hiqni mbushjen midis qelizave në tabelën HTML

Pajtohuni që një kufi i përcaktuar me CSS nuk ka të njëjtën pamje siç dëshironi. Padyshim, nga këndvështrimi i estetikës, ka punë për të bërë. Në faqen e shfletuesit, mund të shihni se në mënyrë të paracaktuar ajo tregon kufijtë e tabelave dhe qelizave veç e veç. Një shembull e tregon qartë këtë.

Sidoqoftë, është mjaft e mundur të heqim qafe kufij të tillë, të cilët quhen të dyfishtë, nëse përdorim pronën CSS të shembjes së kufirit. Në praktikë, duket kështu:

Tabela (kufiri: blu i ngurtë 1px; shembja e kufirit: shembje;) ...

Si rezultat, distanca midis qelizave hiqet:

Vlera e kolapsit e caktuar për atributin e kufirit heq kufijtë e dyfishtë. Siç mund ta shihni, rezultati është një shembje e kufijve të qelizave ngjitur, si dhe kufijve të qelizave dhe kufirit të jashtëm të tabelës. Sa i përket kësaj të fundit, ajo mund të hiqet krejtësisht. Dhe nëse ka nevojë për ta shfaqur, duhet të rrisni gjerësinë e saj. Kështu, ne shpëtuam nga ndarësit në tabelë. Dhe në mësimin tjetër do të flasim për mënyrën se si mund të vendosni kufij vertikalë dhe horizontalë. Suksese te gjitheve!

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 ngjitur, 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ër më tepër, ne vendosim një diferencë të djathtë 30px për tabelat dhe vendosim shtrirjen vertikale të tabelave (pjesa e sipërme e elementit është e rreshtuar me majën e 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 # 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 shembjes ë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 me një vlerë 0 dhe pronën e shembjes së kufirit me një vlerë të shembjes:

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 tabelë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ë tabelë apo jo. Prona e qelizave bosh ë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 vendoset të shfaqet (i paracaktuar), 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 - në pjesën 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, lart-teksti, fund-teksti, gjatësia dhe% e aplikuar 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 klasa, të cilat vendosin shtrirje vertikale të ndryshme në qeliza dhe i zbatuan ato në mënyrë që të rendisin rreshtat. Vlera në qelizë përputhet me vlerën e pronës 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ë pseudo-klasë grupi 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 prind 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ë header të 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ë. Punë me gërvishtjet 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 në pezull (pseudo-klasë: rri pezull) mbi qelizë header, ajo merr sfond 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 pixel, titrat dhe qelizat e të dhënave janë të larta 45px. 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 :: pas, 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 fusim një element bllok që ka një ngjyrë sfondi jeshile e pyllit 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ë pozicionimi përveç statikës së paracaktuar, përndryshe numërimi do të jetë relativ me skajin e specifikuar të dritares së shfletuesit, për këtë arsye ne kemi vendosur pozicionimi relativ (relativ)
• Ne vendosim për bllokun tonë të gjeneruar pronën e sipërme, e cila tregon drejtimin e kompensimit të 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 elementeve të pozicionimit, 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]