Distanca midis kolonave në tabelën css. Mbushje midis qelizave

Pra, ne kemi studiuar me ju veprimet më të thjeshta që mund të kryhen me kufijtë e tabelës. Dhe tani tabela duket shumë më e këndshme estetikisht. Megjithatë, mbushja e qelizave qëndron drejtpërdrejt në kufijtë. Kjo mund të rregullohet lehtësisht duke futur thjesht qelizat në tabelën HTML. Dhe pastaj teksti brenda kornizës, në qelizë, do të jetë më i lexueshëm.

Për të futur një qelizë, përdorni atributin mbushja e qelizave për etiketë

Në këtë rast, pikat vendosen duke përdorur pronën mbushje. Me ndihmën e tij, nuk do të jetë e vështirë të futet aty ku është e nevojshme, domethënë nga lart, djathtas, nga poshtë ose majtas, duke përdorur, përkatësisht, një nga këto veti: mbushje e sipërme, mbushje djathtas, mbushje-fund dhe mbushje-majtas.

Ju mund të vendosni saktësisht se sa pikselë duhet të futen. Le të japim një shembull në të cilin do të jetë pika e poshtme 20 piksele, dhe të gjitha të tjerat do të jenë 10 . Të tillë css-kodi do të duket si ky:

Td (mbushje: 10 px; mbushje-fund: 20 px; )

Dhe kodi i plotë i stilit në këtë fazë:

Tabela (kufi: i ngurtë 1 px blu; kufiri-palosje: palos; ) td (kufiri: i ngurtë 1 px blu; mbushja: 10 px; mbushje-fund: 20 px; )

Rezultati në shfletues:

Mbushje midis qelizave

Si rregull, detyrat që lidhen me krijimin e tabelave mund të zgjidhen duke përdorur etiketat, atributet dhe vetitë për këtë, të cilat ju lejojnë të krijoni korniza, dhëmbëzime në qeliza dhe gjithashtu të vendosni sfondin e ngjyrave të vetë qelizave.

Indencat në tabela nuk janë vetëm brenda qelizave. Ato gjithashtu mund të jenë të pranishme midis vetë qelizave.

Ekzistojnë dy mundësi për futjen e qelizave:

1. duke përdorur atributin hapësira e qelizave për etiketë

Duhet theksuar se ndarje kufitare shkruhet për tabelën në tërësi, ndërsa vetia mbushje shkruhet direkt në qeliza.

Le të shohim një shembull:

Tabela (kufi: i ngurtë 1 pikselë blu; kolapsi i kufirit: i veçantë; hapësira kufitare: 5 pikselë; ) td (kufiri: i ngurtë 1 px blu; mbushje: 10 px; mbushje-fund: 20 px; )

Dhe për rezultatin që rezulton:

Ne do të përcaktojmë menjëherë se nuk është e nevojshme të përpiqemi të bëjmë dhëmbëza të tilla duke përdorur border-collapse: shembje. Në të vërtetë, kur përdorni këtë opsion, qelizat "ngjiten" me njëra-tjetrën.

Dhe për t'i mbajtur ato të ndara nga njëra-tjetra, duhet t'i përdorni kufiri-kolapsi: i ndarë. Është e rëndësishme të kuptohet se kjo vlerë është vlera e paracaktuar. Dhe përdoret vetëm për të treguar vizualisht se si zgjidhet ky problem. Nëse e fshijmë këtë rresht, atëherë rezultati në formën e qelizave të vendosura veçmas nga njëra-tjetra do të ruhet.

Ne kemi zbuluar tashmë me ju se tabelat HTML kanë kornizë, megjithëse shfletuesit nuk i shfaqin ato si parazgjedhje. Por kjo nuk është e gjitha, çdo qelizë e tabelës ka gjithashtu një kornizë të quajtur kufiri i qelizave. Por kjo nuk është e gjitha, duke përdorur atribute të veçanta të etiketës

Korniza e tabelës HTML, kufijtë e qelizave, hapësira e qelizave dhe mbushja.

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

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

Për të instaluar të brendshme mbushja nga kufijtë e qelizave në përmbajtjen e tyre kërkohet në etiketë

Vini re se shfletuesit e paracaktuar për hapësirën e vogël (dy piksel) të qelizave dhe mbushjen e qelizave , kështu që për të hequr ndarjen krejtësisht, vendosni atributet në zero (0).

Një shembull i kufijve, kufijve dhe mbushjes për tabelat HTML

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

Rezultati në shfletues

Tabela me mbushje dhe ndarje të modifikuar:

Natyrisht, nuk është e nevojshme të vizatoni një kornizë tabele dhe kufij qelizash në mënyrë që të ndryshoni hapjet e brendshme dhe distancat midis qelizave.

Sipas sintaksës HTML, shfletuesit shtojnë hapësirat e qelizave dhe vlerat e mbushjes së qelizave në madhësinë e tabelës dhe qelizave të saj. Për shembull, nëse vendosni gjerësinë e qelizës në 100px dhe cellpadding="10" - shfletuesit do të shtojnë 20px gjerësinë (10px majtas dhe djathtas) për ta bërë atë 120px. Në përgjithësi, do ta kuptoni gjatë rrugës.

Largimi nga tema ose si të hiqni dhëmbëzimin në skajet e faqes

Fillimisht, të gjithë shfletuesit vendosin kufij të vegjël rreth skajeve të faqes HTML, të cilat shpesh nuk janë të nevojshme, 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ë tekstit shkollor, por vështirë se do të ishte i dobishëm për ju atje.

Në kohën e duhur në etiketë kishte katër atribute që përcaktonin madhësinë e këtyre margjinave për secilën anë të faqes: margjina e sipërme (lart), margjina e djathtë (djathtas), marzhi i poshtëm (poshtë) dhe margjina e majtë (majtas). Tani këto atribute janë të vjetruara, kështu që ne do të aplikojmë stile (CSS). Pra, ka disa mënyra për të ndryshuar kufijtë 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="margin:0" >...

- heq indencat nga të gjitha anët e faqes HTML menjëherë.

stil= "margin: lart djathtas poshtë majtas">...

- rregullon madhësinë e hapjeve për secilën anë në drejtim të akrepave të orës. Si rregull, përdoren dimensionet në piksel, për shembull: style="margin:5px 3px 4px 5px" >...

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

Detyre shtepie.

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

1. Krijoni tre tabela, secila me një rresht dhe tre kolona (kolona).
2. Në tabelën e parë, vendosni titullin ose "titullin" e faqes (të mos ngatërrohet me "titullin" e dokumentit HTML), në të dytën - menutë e majtë dhe të djathtë, si dhe përmbajtjen kryesore (përmbajtjen) , në të tretën - Footer ose "footer" i faqes.
3. Le të fiksohet gjerësia e kolonës së parë dhe të fundit të secilës tabelë.
4. E rëndësishme. Përdorni etiketën vetëm për të krijuar katër butona horizontale të menusë në "header" të faqes. Në raste të tjera, lërini imazhet në sfond, dhe në qelizat e dyta të tabelave përdoren vetëm ngjyrat në përgjithësi, dhe në tabelën e parë dhe të fundit është #99FF99.
5. Lëreni tekstin e përmbajtjes së faqes të rreshtohet në të dy anët e qelizës së tabelës, me titullin në qendër.
6. Sa i përket distancave midis qelizave të tabelave, si dhe dhëmbëzimit të qelizave, atëherë mendoni vetë se ku duhet të hiqen plotësisht dhe ku duhet të rriten.

Ne kemi shqyrtuar shumë metoda për stilimin e elementeve të tillë në faqe si informacione teksti, lidhje, imazhe, tituj, por e gjithë kjo ende nuk është e mjaftueshme. Në artikujt e mi, unë shpesh përdor elemente HTML si tabelat, sepse ato janë në shumicën e rasteve ndihmojnë në organizimin e informacionit të rëndësishëm dhe për ta bërë më të lehtë prezantimin.

Në këtë artikull, unë do t'ju tregoj në detajet e formimit të tabelave HTML dhe do të mësoni vetitë e reja të CSS të krijuara për të arritur këto qëllime.

Gjuha e shënjimit të hipertekstit HTML na ka dhënë shumë mundësi për të lidhur stilet CSS me dhjetë etiketa unike të krijuara për të punuar me tabela, unë propozoj t'i përsërisim ato përpara studimit të mëtejshëm:

Rezultati i shembullit tonë:

Oriz. 153 Shembull i stilimit të rreshtave në tabela

Shembulli i mëposhtëm shikon zbatimin e rrumbullakosjes së këndit në qelizat e tabelës (vetia).

Në këtë shembull, ne:

• Vendoseni tabelën në qendër me kufijtë e jashtëm, vendosni gjerësinë dhe lartësinë e qelizave të kokës në 50 px, specifikuar transparente kufiri 5 piksele.
• U zbulua se kur rri pezull (pseudo-class :hover) në qelizën e kokës, ajo merr një sfond blu ngjyrat, portokalli ngjyra e tekstit, kufiri portokalli ngjyrat 5 pixel dhe rrumbullakimi rrezja 100%.
• kufi transparentështë e nevojshme për të rezervuar një vend për kufirin, i cili do të shfaqet në hover, nëse kjo nuk bëhet, 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.

Në këtë shembull, ne:

Rezultati i shembullit tonë:

Dhe shembulli i fundit, i cili është mjaft i vështirë për t'u kuptuar dhe kërkon njohuri të avancuara të CSS, pasi prek temat e ardhshme të planifikuara për studim të detajuar brenda këtij kursi.

Në shembullin e mëparshëm, ne kuptuam se elementi HTML ju mund të aplikoni vetëm një veti CSS - ngjyrën e sfondit (ngjyra e sfondit), por në të njëjtën kohë nuk mund të vendosni ngjyrën e sfondit në hover (pseudo-class :hover) drejtpërdrejt në këtë element. Në këtë shembull, ne do të shikojmë se si të nënvizojmë një kolonë tabele duke përdorur vetëm CSS.

Në këtë shembull, ne:

• Ne vendosëm që tabela jonë të zërë 100% të elementit prind, qelizat e tabelës të zënë 25% të elementit prind dhe të kenë një kufi të fortë prej 1 piksel jeshil, lartësia e kokës dhe qelizave të të dhënave është 45px. Ne hoqëm hendekun midis qelizave duke përdorur veçorinë e kolapsit të kufirit me vlerën .
• Dhe kështu, duke përdorur pseudo-elementin ::after ne shtojmë përmbajtje pas çdo elementi në pezullim. Pseudo-elementi ::after duhet të përdoret së bashku me veçorinë e përmbajtjes, falë së cilës ne futim një element në nivel blloku që ka një ngjyrë sfondi pylltari dhe ka pozicionim absolut.
• Pozicionimi absolut këtu është i nevojshëm për të kompensuar elementin në lidhje me skajin e specifikuar të paraardhësit të tij, ndërsa paraardhësi duhet të ketë një vlerë pozicioni të ndryshme nga ajo e paracaktuar - statike, përndryshe numërimi do të jetë në lidhje me skajin e specifikuar të dritares së shfletuesit, për këtë arsyeja që shtruam për tryezë pozicionimi relativ(i afërm).
• Ne caktojmë vetinë e sipërme për bllokun tonë të gjeneruar, i cili specifikon drejtimin e zhvendosjes së elementit të pozicionuar nga buza e sipërme dhe vetinë e poshtme, e cila specifikon drejtimin e zhvendosjes së elementit të pozicionuar nga buza e poshtme. Të dy vetitë u vendosën në 0, kështu që blloku do të zërë plotësisht elementin nga fundi dhe nga lart i tabelës, gjerësia e këtij blloku u vendos në 25%, kjo vlerë korrespondon me vlerën e gjerësisë së vetë qelizës.
• Dhe vetia përfundimtare që vendosëm për këtë bllok: z-index me vlerë "-1" përcakton rendin e elementeve të pozicionuar në 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 të 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 t'u kuptuar, të cilën ne gjithashtu nuk e kemi marrë parasysh, por do ta konsiderojmë patjetër në artikullin tjetër të teksti "Pozicionimi i elementeve në CSS".

Pyetje dhe detyra mbi temën

Përpara se të kaloni në temën tjetër, plotësoni detyrën praktike:

Nëse keni vështirësi në përfundimin e një ushtrimi praktik, gjithmonë mund ta 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, mund të dërgoni komente dhe sugjerime në faqe në [email protected]

Të dhëna tabelare- informacion që mund të shfaqet në formën e një tabele dhe të ndahet logjikisht në kolona dhe rreshta. Etiketa HTML përdoret për të shfaqur të dhënat tabelare në faqet e internetit.

Brenda etiketës

ose

. Janë qelizat që përmbajnë të gjithë përmbajtjen e tabelës së shfaqur në faqen e internetit. kornizë tavoline Si parazgjedhje, një tabelë HTML në një faqe ueb shfaqet pa kufi, për të shtuar një kufi në tabelë, si dhe në të gjithë elementët e tjerë, përdorni veçorinë CSS kufiri. Por duhet t'i kushtoni vëmendje faktit që nëse i shtoni një kufi vetëm elementit , atëherë do të shfaqet në të gjithë tabelën. Në mënyrë që qelizat e tabelës të kenë gjithashtu një kornizë, do t'ju duhet të vendosni vetinë kufitare për elementët dhe . Tabela, th, td (kufi: 1px e zezë e fortë; ) Provoni » Tani si tabela ashtu edhe qelizat kanë kufij, dhe secila qelizë dhe tabelë kanë kufijtë e tyre. Si rezultat, një hapësirë ​​boshe u shfaq midis kornizave, madhësia e kësaj hapësire mund të kontrollohet nga prona ndarje kufitare, e cila është vendosur për të gjithë tryezën. Me fjalë të tjera, ju nuk mund të kontrolloni ndarjen midis qelizave të ndryshme individualisht. Edhe nëse hiqni hapësirën midis qelizave me veçorinë e ndarjes kufitare të caktuar në 0, kufijtë e qelizave do të prekin njëri-tjetrin, duke u dyfishuar. Për të bashkuar kornizat e qelizave, përdorni veçorinë kufiri-kolapsi. Mund të marrë dy vlera: veç: është vlera e paracaktuar. Qelizat shfaqen në një distancë të vogël nga njëra-tjetra, secila qelizë ka kufirin e vet. kolaps: bashkon kornizat ngjitur në një, të gjitha boshllëqet midis qelizave, si dhe midis qelizave dhe kornizës së tabelës, shpërfillen. Emri Mbiemri Homeri Simpson Marge Simpson Emri Mbiemri Homeri Simpson Marge Simpson Provoni » Madhësia e tryezës Pas shtimit të kufijve në qelizat e tabelës, u bë e dukshme që përmbajtja e qelizave ishte shumë afër skajeve. Për të shtuar hapësirë ​​të lirë midis skajeve të qelizave dhe përmbajtjes së tyre, mund të përdorni veçorinë mbushje : Th, td (mbushje: 7 px; ) Provoni » Madhësia e një tabele varet nga përmbajtja e saj, por shpesh ka situata kur tabela është shumë e ngushtë dhe bëhet e nevojshme ta zgjasni atë. Gjerësia dhe lartësia e tabelës mund të ndryshohen duke përdorur vetitë gjerësia dhe lartësia, duke vendosur dimensionet e dëshiruara ose vetë tabelën ose qelizat: Tabela ( gjerësia: 70%; ) th (lartësia: 50 px; ) Provoni » Rreshtimi i tekstit Si parazgjedhje, teksti në qelizat e kokës së tabelës është i rreshtuar në qendër dhe teksti në qelizat normale lihet i rreshtuar duke përdorur veçorinë rreshtimi i tekstit Ju mund të kontrolloni shtrirjen horizontale të tekstit. Vetia CSS vertikal-rreshtoj ju lejon të kontrolloni shtrirjen vertikale të përmbajtjes së tekstit. Si parazgjedhje, teksti është rreshtuar vertikalisht në qendër të qelizave. Rreshtimi vertikal mund të anashkalohet duke përdorur një nga vlerat e vetive të rreshtimit vertikal: krye: teksti është rreshtuar në krye të qelizës në mes: rreshton tekstin në qendër (e parazgjedhur) fund: teksti është rreshtuar në kufirin e poshtëm të qelizës Emri Mbiemri Homeri Simpson Marge Simpson Provoni » Alternimi i ngjyrave të sfondit të rreshtit të tabelës Kur shikoni tabela të mëdha që përmbajnë shumë rreshta me shumë informacion, mund të jetë e vështirë të mbash gjurmët se cilat të dhëna i përkasin një rreshti të caktuar. Për të ndihmuar përdoruesit të lundrojnë, mund të përdorni dy ngjyra të ndryshme të sfondit në mënyrë alternative. Për të krijuar efektin e përshkruar, mund të përdorni përzgjedhës i klasës, duke e shtuar atë në çdo rresht të dytë të tabelës: Emri Mbiemri Pozicioni Homeri Simpson babai Marge Simpson nënë Bart Simpson djalin Lisa Simpson vajza Provoni » Shtimi i një atributi të klasës në çdo rresht të dytë është një detyrë mjaft e lodhshme. Shtuar në CSS3 pseudo-klasa: n-të-fëmija, duke lejuar zgjidhjen e këtij problemi në një mënyrë alternative. Tani efekti i striping mund të arrihet vetëm me anë të CSS, pa përdorur ndryshimin e shënimit HTML të dokumentit. Duke përdorur pseudo-klasën :nth-child, mund të zgjidhni të gjitha rreshtat çift ose tek të një tabele duke përdorur një nga fjalët kyçe: çift (çift) ose tek (tek): Tr:nth-child(tek) (ngjyra e sfondit: #EAF2D3; ) Provoni » Ndrysho sfondin e rreshtit kur rri pezull Një mënyrë tjetër për të përmirësuar lexueshmërinë e të dhënave tabelare është të ndryshoni ngjyrën e sfondit të një rreshti kur rri pezull mbi të me miun. Kjo do të ndihmojë në nxjerrjen në pah të përmbajtjes së dëshiruar të tabelës dhe në rritjen e perceptimit vizual të të dhënave. Zbatimi i një efekti të tillë është shumë i thjeshtë, gjithçka që duhet të bëni është të shtoni :hover pseudo-class në përzgjedhësin e rreshtit të tabelës dhe të vendosni ngjyrën e dëshiruar të sfondit: Tr:hover (ngjyra e sfondit: #E0E0FF; ) Provoni » Tabela e rreshtimit në qendër Përafrimi i një tabele HTML në qendër është i mundur vetëm nëse gjerësia e tabelës është më e vogël se gjerësia e elementit të saj mëmë. Për të vendosur në qendër tabelën, duhet të përdorni veçorinë e marzhit, duke e vendosur atë në të paktën dy vlera: vlera e parë do të jetë përgjegjëse për kufirin e jashtëm të tabelës nga lart dhe poshtë, dhe e dyta - për shtrirjen automatike të qendrës: Tabela (diferenca: 10 px automatike; ) Provoni » Nëse keni nevojë për dhëmbëzime të ndryshme në krye dhe në fund të tabelës, atëherë mund të vendosni pronën diferencë tre vlera: e para do të jetë përgjegjëse për pikën e sipërme, e dyta për shtrirjen horizontale dhe e treta për pikën e poshtme: Tabela ( margjina: 10px automatik 30px; ) Ndani: 5,00 / 3 në shtëpi →Windows 10 →Distanca midis kolonave në tabelën css. Mbushje midis qelizave → Artikuj të ngjashëm: JavaScript - Operatorët e kushtëzuar dhe Boolean Rreshtimi i përmbajtjes së qelizës Distanca midis kolonave në tabelën css Si të shfaqni vlerat e të gjitha variablave të mjedisit në Windows Printimi i vlerës së një ndryshoreje në ekran