Qeliza e tabelës CSS. Rreshtimi i përmbajtjes së qelizës

Përndryshe, mund ta hiqni fare kornizën rreth tryezës, duke lënë vetëm vijat brenda saj (Fig. 2).

Në këtë rast, do të jetë më e përshtatshme të mos hiqni kornizën, por ta fshehni atë duke vendosur ngjyrën e saj që të përputhet me ngjyrën e sfondit të faqes së internetit. Pra, në shembullin 2, sfondi i faqes vendoset në të bardhë dhe e njëjta ngjyrë përdoret për kufirin që i shtohet përzgjedhësit TABLE.

Shembulli 2: Tabela pa kufi të jashtëm

Në këtë shembull, trashësia e vijave midis qelizave është një piksel, dhe kufiri i bardhë rreth tij është dy piksel, d.m.th. një pixel më shumë. Kjo kërkohet për të fshehur me siguri kufirin e jashtëm rreth tryezës.

Shumë webmasterë me siguri do të përdorin tabelat HTML në shabllone është praktikë e keqe. Por në këtë mësim ne do të shohim vetëm tabelat CSS. Cili është ndryshimi midis tabelave HTML dhe CSS? A duhet të përdor tabelat CSS? Nëse po, si?

Si të krijoni një tabelë CSS

Modeli i tabelës CSS bazohet në modelin e tabelës HTML4 dhe mbështetet mirë nga shfletuesit. Në të dy modelet, struktura e tabelës ekziston paralelisht me paraqitjen vizuale.

Elementet kryesore të strukturës janë vargjet. Rreshti përcaktohet në mënyrë eksplicite, ndërsa kolonat varen nga mënyra se si përcaktohen rreshtat dhe qelizat.

Ju ndoshta keni punuar më parë me tabela HTML. Nëse po, atëherë nuk do të keni asnjë problem në krijimin e tabelave CSS.

Çdo element i tabelës HTML ka një ekuivalent CSS. Dallimi i vetëm është se nuk ka asnjë ndryshim midis td dhe th në variantin CSS.

Më poshtë është një listë e elementeve të tabelës HTML dhe vlerat e tyre përkatëse CSS.

Tabela ( shfaqja: tabela ) tr ( shfaqja: rreshti i tabelës ) thead ( shfaqja: grupi i kokës së tabelës ) tbody ( shfaqja: grupi i rreshtit të tabelës ) tfoot ( shfaqja: grupi-tabela-footer ) col ( shfaqja: tabela- kolona ) colgroup ( shfaqja: grupi i tabelës - kolona ) td, th ( shfaqja: qeliza e tabelës ) titulli ( shfaqja: titulli i tabelës )

Titrat mund të vendosen në krye ose në fund të tabelës duke përdorur veçorinë në anën e titullit:

#caption (caption-side: lart) #caption (caption-side: fund)

Është e lehtë të merret me mend se si të krijoni një tabelë CSS bazuar në listën e mësipërme. Këtu është një tabelë shembull.

#table (ekrani: tabela;) .rresht (ekrani: rreshti i tabelës;) .qeliza (ekrani: qeliza e tabelës;)

Nëse shikoni kodin Shembull HTML, mund ta dalloni lehtësisht strukturën e tabelës (duke përdorur elemente div dhe span me klasa dhe ID në vend të tabelës , td dhe tr).

Shumë pak kod CSS paraqet elementet div dhe span si një tabelë.

Përveç vetive të mësipërme, modeli i tabelës CSS përfshin një vlerë të tabelës inline që përcakton tavoline e re si ekrani: tabela, por brenda kontekstit të formatit të ngulitur në kodin HTML.

Kolonat dhe grupimi i tyre

Meqenëse qelizat e tabelës janë pasardhës të rreshtave të tabelës, ka kuptim të përdoren disa veti për të formuar kolona. Modeli i tabelës CSS ju lejon të aplikoni vetitë e mëposhtme për kolonat dhe grupimin e tyre:

• kufiriështë një veti e rregullt, përveç nëse vetia e kolapsit kufitar përdoret në një element tabele;
• sfond- një veti normale, për sa kohë që rreshti dhe qeliza kanë një sfond transparent;
• gjerësia- vendosja e gjerësisë së kolonës;
• dukshmëria- nëse vendoset në kolaps (e vetmja vlerë e disponueshme), atëherë qeliza e kolonës nuk do të shfaqet (ajo është bashkuar me kolonat e tjera dhe gjerësia e tabelës është rreshtuar).

Stafi i tabelave CSS

Elemente të ndryshme të tabelës kanë nivel të ndryshëm në një pirg për të lejuar që sfonde të ndryshme të përdoren në shtresa të ndryshme.

Këto shtresa mund të shihen në figurën më poshtë.

1. tavolinë - shtresa e poshtme
2. grup kolonash
3. kolonat
4. grup rreshtash
5. linjat
6. qelizat - shtresa më e lartë

Sfondi i shtresës do të jetë i dukshëm vetëm nëse shtresa e poshtme ka një sfond transparent.

Kjo mënyrë e shkëlqyer për dalje qeliza boshe me të vërtetë bosh duke përdorur sfond transparent për ta, përmes së cilës do të jetë e dukshme një rresht, kolonë ose tabelë.

Algoritmi i modelit të tabelës

Gjerësia e tabelës CSS mund të llogaritet duke përdorur një nga dy algoritmet. Algoritmi zgjidhet duke përdorur veçorinë e paraqitjes së tabelës dhe dy vlera:

• fikse(fikse) - gjerësia e shabllonit përcaktohet jo nga përmbajtja, por duke vendosur gjerësinë e tabelës, qelizave, kornizave dhe distancën midis qelizave;
• auto(automatike) - Gjerësia e tabelës vendoset bazuar në gjerësinë e kolonave dhe kufijve.

Modeli i modelit fiks llogaritet një herë dhe është shumë i shpejtë. POR modaliteti automatik(e parazgjedhur) kërkon kalime të shumta nëpër tabelën HTML.

Nëse përcaktoni në mënyrë eksplicite gjerësinë e tabelës, atëherë duhet të përdorni modelin e llogaritjes së gjerësisë fikse.

Si parazgjedhje, lartësia e qelizës është vendosur në minimumin e kërkuar për të shfaqur përmbajtjen. Por ju mund të përcaktoni qartë lartësinë e qelizës. Të gjitha qelizat në rresht do të kenë lartësinë e qelizës me vlerën maksimale.

Vetia vertikale-linjë përcakton shtrirjen e përmbajtjes në një rresht

• bazë
• fund
• e mesme
• nën, super, tekst-lart, tekst-fund,<длина>, <процент>

Grupi i fundit vlerat nuk aplikohen në qeliza, por në tekstin në to. Qelizat në këtë rast do të përafrohet sipas vlerës së bazës .

Kufijtë e tabelës CSS

Ekzistojnë tre veti interesante për kufijtë e tabelës:

• kufiri-kolapsi- mund të jetë kolaps, i ndarë ose i trashëguar
• ndarje kufitare- mund të ketë rëndësi<расстояние_по_горизонтали>, <расстояние_по_вертикали>, ose trashëgojnë . Përcakton distancën midis kufijve të qelizave.
• qeliza boshe- mund të shfaqet, fshihet ose trashëgohet. Nëse qeliza është bosh ose ka veçorinë e dukshmërisë: fshehur, atëherë përmbajtja nuk do të shfaqet si parazgjedhje. Vendosja e vetive të qelizave boshe: shfaqja do të shfaqë sfondin dhe kufirin për qelizën boshe.

A duhet të përdor tabelat CSS?

A janë tabelat CSS më të mira se tabelat HTML? Nëse po, cilat janë përfitimet e tyre? Nëse jo, pse nuk duhet të përdoren? pyetje të mira për të cilat nuk ka një përgjigje të qartë.

Kur merret parasysh përdorimi i tabelave HTML kundrejt një kombinimi të divs dhe kodit CSS, disavantazhet e tabelave janë si më poshtë:

• Kodimi shtesë- Tabelat HTML kërkojnë kodim shtesë të strukturës në krahasim me elementet div. Por tabelat CSS gjithashtu kërkojnë përdorimin e klasave dhe identifikuesve shtesë.
• Struktura e ngurtë- Tabelat HTML janë shumë të lidhura ngushtë me përmbajtjen. Rendi i qelizave duhet të jetë ashtu siç do të shfaqet. Por i njëjti kufizim vlen për tabelat CSS/
• Prodhimi në shfletues— shfletuesit kryejnë kalime të shumta Struktura HTML tabelat. Por për tabelat CSS, situata do të jetë e ngjashme.

Siç u tha më lart, tabelat CSS nuk kanë avantazhe të rëndësishme mbi tabelat HTML kur përdoren në shabllone.

Tabelat CSS janë një zgjidhje më semantike pasi ka ndarje e qartë strukturat e të dhënave dhe paraqitjet e pamjes.

konkluzioni

Tabelat CSS janë të lehta për t'u mësuar dhe përdorur. Por ata nuk kanë përfitime të qarta para tabelave HTML me përjashtim të më shumë kodeve semantike.

Ndoshta praktika do të tregojë avantazhet ose disavantazhet e tabelave CSS. A keni përvojë në përdorimin e tabelave CSS në projekte reale?

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

Brenda etiketës

ose

. Janë qelizat që përmbajnë të gjithë përmbajtjen e tabelës së shfaqur në faqen e internetit. kornizë tavoline Nga html e paracaktuar tabela në faqen e internetit shfaqet pa kornizë, për të shtuar një kornizë në tabelë, si dhe në të gjithë elementët e tjerë, përdorni Vetia 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 veçorinë 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, midis kornizave u shfaq një hapësirë ​​boshe, vetia e ndarjes kufitare, e cila është vendosur për të gjithë tabelën, ju lejon të kontrolloni madhësinë e kësaj hapësire. 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ë vendosur në 0, kufijtë e qelizave do të prekin njëri-tjetrin, duke u dyfishuar. Vetia e kolapsit të kufirit përdoret për të bashkuar kufijtë e qelizave. Mund të marrë dy vlera: veç: është vlera e paracaktuar. Qelizat shfaqen në distancë e shkurtër veçmas, çdo 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 shtimin hapesire e lire midis skajeve të qelizave dhe përmbajtjes së tyre, mund të përdorni veçorinë e mbushjes: Th, td (mbushje: 7px; ) 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 një tabele mund të ndryshohen duke përdorur veçoritë e gjerësisë dhe lartësisë duke vendosur dimensionet e duhura ose vetë tabela 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ë në qendër, dhe në qelizat normale teksti lihet i rreshtuar, duke përdorur veçorinë text-align mund të kontrolloni shtrirjen horizontale të tekstit. Vetia CSS e rreshtimit vertikal 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 me një nga vlerat e vetive të rreshtimit vertikal: krye: teksti është rreshtuar në krye të qelizës mes: rreshton tekstin në qendër (parazgjedhja) 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 sasi e madhe 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 sfondi në mënyrë alternative. Për të krijuar efektin e përshkruar, mund të përdorni përzgjedhësin e 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 një djalë Liza Simpson vajza Provoni » Shtimi i një atributi të klasës në çdo rresht të dytë është një detyrë mjaft e lodhshme. Pseudo-klasa :nth-child është shtuar në CSS3 për të zgjidhur këtë problem në një mënyrë alternative. Tani efekti i alternimit mund të arrihet vetëm duke përdorur CSS pa ndryshuar shënjimin HTML të dokumentit. Me pseudo-klasën :nth-child, mund të zgjidhni të gjitha rreshtat çift ose tek në një tabelë duke përdorur një nga fjalë 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ë ndryshimi ngjyrë e sfondit vijë 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 këtij efekti është shumë i thjeshtë, gjithçka që duhet të bëni është të shtoni pseudo-klasën :hover në përzgjedhësin e rreshtit të tabelës dhe të vendosni ngjyra e dëshiruar sfond: Tr:hover (ngjyra e sfondit: #E0E0FF; ) Provoni » Tabela e rreshtimit në qendër Rreshtimi HTML përqendrimi i tabelave ë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ë rreshtuar tabelën në qendër, duhet të përdorni veçorinë margin, duke e vendosur atë në të paktën dy vlera: vlera e parë do të jetë përgjegjëse për diferencë tabelat lart dhe poshtë, dhe e dyta për shtrirjen automatike të qendrës: Tabela ( margjina: 10 px automatike; ) Provoni » Nëse keni nevojë për margjina të ndryshme në krye dhe në fund të tabelës, atëherë mund të vendosni veçorinë e marzhit në tre vlera: e para do të jetë përgjegjëse për margjinën e sipërme, e dyta për shtrirjen horizontale dhe e treta për margjinën e poshtme: Tabela ( margjina: 10 px automatike 30 px; ) Artikujt kryesorë të lidhur A duhet të duket një robot social si një njeri? Si të hiqni bllokimin e aktivizimit të Apple ID Viruset kanë një metabolizëm Kategoritë: Programet Siguria Windows 10 Hekuri Windows 8 Në kontakt me Gabimet © 2022 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.