Td mbushje. Shfaqja e pjesshme e kufirit

Shtëpi / Sistemet operative

Një tabelë është një nga mjetet kryesore për krijimin e faqeve në internet.

pa duke përdorur CSS, vetëm me ndihmën e tabelave mund të krijoni faqe me dizajne komplekse. Nëse keni përfunduar serinë e mësimeve Krijimi i një faqe interneti - hapat e parë, atëherë e kuptoni se për çfarë po flasim.

Çdo tabelë është një grup rreshtash dhe kolonash, në kryqëzimin e të cilave ka qeliza. Për shembull:

Le të shohim tabelën tonë nga një këndvështrim HTML:

  • vetë tabela specifikohet duke përdorur etiketat
    ,
  • tabela ka një emër - etiketa ,
  • tabela përbëhet nga rreshta - etiketa ,
  • çdo rresht përbëhet nga kolona - etiketa ,
  • kolonat kanë emra të vendosur në rreshtin e parë - etiketat .
Le të krijojmë një tabelë ku ne tregojmë kryqëzimin e numrave të rreshtave dhe kolonave si përmbajtje:

Rezultati:

Siç mund ta shihni, nuk doli shumë bukur, do ta dekorojmë.

Parametrat e tabelës HTML: dhëmbëzimi, gjerësia, ngjyra e sfondit, korniza

Për këtë qëllim etiketa

Ka një numër parametrash:

  • gjerësia- vendos gjerësinë e tabelës (në piksel ose % e gjerësisë së ekranit),
  • bgcolor- vendos ngjyrën e sfondit të qelizave të tabelës,
  • sfond- mbush sfondin e tabelës me një model,
  • kufiri- vendos një kufi të gjerësisë së specifikuar (në piksel) rreth të gjithë tabelës,
  • mbushje celulare- vendos kufirin në pixel midis kufirit të qelizës dhe përmbajtjes së tij.
Le të zbatojmë këto parametra:

Rezultati:

Kjo është më mirë, por tabela jonë shtypet në skajin e majtë të dritares, siç është teksti në të. Le ta rregullojmë këtë duke shtuar tre parametra të tjerë:

  • rreshtoj- vendos shtrirjen e tabelës: majtas (djathtas), djathtas (majtas), qendër (qendër),
  • hapësira e qelizave- vendos distancën midis qelizave të tabelës (në pixel),
  • mbushje celulare- vendos distancën midis tekstit dhe kufirit të brendshëm të qelizës së tabelës (në pixel).
Le të zbatojmë këto parametra:

Rezultati:

Ju lutemi vini re se tabela ka kufij të dyfishtë. Nëse specifikoni hapësira e qelizave = "0", atëherë kufijtë do të marrin formën e zakonshme:

Rezultati:


Në përgjithësi, dy parametra janë përgjegjës për kufijtë:

  • kornizë- vendos llojin e kornizës rreth tryezës dhe mund të marrë vlerat e mëposhtme:
    • i pavlefshëm- pa kornizë,
    • sipër- vetëm korniza e sipërme,
    • më poshtë- vetëm korniza e poshtme,
    • hside- vetëm kornizat e sipërme dhe të poshtme,
    • vsides- vetëm korniza majtas dhe djathtas,
    • lhs- vetëm korniza e majtë,
    • rhs- vetëm korniza e djathtë,
    • kuti- të katër pjesët e kornizës.
  • rregullat- vendos llojin e kufijve të brendshëm të tabelës dhe mund të marrë vlerat e mëposhtme:
    • asnjë- nuk ka kufij midis qelizave,
    • grupe- kufijtë vetëm midis grupeve të rreshtave dhe grupeve të kolonave (do të diskutohet pak më vonë),
    • rreshtave- kufijtë vetëm ndërmjet vijave,
    • cols- kufijtë janë vetëm ndërmjet kolonave,
    • të gjitha- shfaq të gjitha kufijtë.
Duke përdorur këto parametra, ju mund të vendosni kufijtë ashtu siç dëshironi. Këtu do të japim vetëm një shembull, eksperimentoni me të gjithë vetë.

Rezultati:


Duhet theksuar se kufijtë në shfletues të ndryshëm shfaqen pak më ndryshe.

Etiketat HTML tr dhe td

Tabelat formohen rresht pas rreshti. Prandaj, parametrat e specifikuar në rreshtin (tr) shtrijnë efektin e tyre në të gjitha qelizat (td) të rreshtit. Vargjet mund të kenë tre parametra:

  • rreshtoj- rreshton tekstin në qeliza horizontalisht, mund të marrë vlerat: majtas (djathtas), djathtas (majtas), qendër (në qendër),
  • valign- rreshton tekstin në qeliza vertikalisht, mund të marrë vlerat: lart (lart), poshtë (poshtë), në qendër (në mes),
  • bgcolor- vendos ngjyrën e vijës.
Le të shohim një shembull:
  • gjerësia- vendos gjerësinë e kolonës (në piksel ose në përqindje, ku 100% është gjerësia e tabelës),
  • lartësia- vendos lartësinë e qelizës dhe të gjitha qelizat në të njëjtin rresht do të bëhen të kësaj lartësie.
Për shembull, le të shtojmë në kodin tonë, në etiketat

Rezultati:


Duhet të theksohet se nëse nuk vendosni gjerësinë dhe lartësinë, tabela do të formohet sipas përmbajtjes (kështu ishte në shembujt e mëparshëm).

Ky mësim ka mbaruar, praktikoni krijimin dhe dizajnimin e tabelave, këto aftësi do t'ju duhen në mësimin e ardhshëm, ku do të krijojmë tabela me struktura komplekse.

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

këto parametra
1 2 3
, e cila është një enë me përmbajtjen e tabelës. Përmbajtja e një tabele HTML përshkruhet rresht pas rreshti, çdo rresht fillon me një etiketë hapëse dhe përfundon me një etiketë mbyllëse .

Brenda një etikete

ndodhen qelizat e tabelës të përfaqësuara nga etiketat
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 interneti shfaqet pa kufi për të shtuar një kufi në tabelë, si dhe në të gjithë elementët e tjerë, të përdorur; Vetia CSS kufiri . Por ia vlen t'i kushtohet vëmendje faktit që nëse shtoni një kornizë vetëm në një element

, atëherë do të shfaqet në të gjithë tabelën. Në mënyrë që qelizat e tabelës të kenë gjithashtu një kufi, do t'ju duhet të vendosni vetinë e kufirit për elementët krijon një linjë të re. Më tej në fole
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, u shfaq hapësira boshe midis kornizave, madhësia e kësaj hapësire mund të kontrollohet nga vetia kufitare, e cila është vendosur për të gjithë tabelën. Me fjalë të tjera, ju nuk mund të kontrolloni ndarjen midis qelizave të ndryshme individualisht.

Edhe nëse hiqni hapësirat midis qelizave duke përdorur vlerën e vetive të ndarjes kufitare 0, kufijtë e qelizave do të prekin njëri-tjetrin, duke dyfishuar madhësinë. Për të kombinuar kufijtë e qelizave, përdorni veçorinë e kolapsit të kufirit. Mund të ketë dy kuptime:

  • veç: është e paracaktuar. Qelizat shfaqen në një distancë të shkurtër nga njëra-tjetra, çdo qelizë ka kufirin e vet.
  • kolaps: bashkon kornizat ngjitur në një, të gjitha hapësirat midis qelizave, si dhe midis qelizave dhe kornizës së tabelës, shpërfillen.
Titulli i dokumentit
EmriMbiemri
HomeriSimpson
MargeSimpson

EmriMbiemri
HomeriSimpson
MargeSimpson
Provoni »

Madhësia e tryezës

Pasi shtova kufijtë në qelizat e tabelës, vura re se përmbajtja e qelizave ishte shumë afër skajeve. Për të shtuar hapësirë ​​të lirë Ju mund të përdorni veçorinë e mbushjes midis skajeve të qelizave dhe përmbajtjes së tyre:

Th, td (mbushje: 7px; ) Provoni »

Madhësia e një tabele varet nga përmbajtja e saj, por shpesh lindin 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ë e gjerësisë dhe lartësisë duke specifikuar madhësive të kërkuara 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ë i rreshtuar në qendër, ndërsa teksti në qelizat e rregullta lihet i rreshtuar duke përdorur veçorinë e rreshtimit të tekstit, ju 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 duke përdorur një nga vlerat e vetive të rreshtimit vertikal:

  • krye: teksti është rreshtuar në kufirin e sipërm të qelizës
  • në mes: rreshton tekstin në qendër (e parazgjedhur)
  • fund: teksti është rreshtuar në kufirin e poshtëm të qelizës
Titulli i dokumentit
EmriMbiemri
HomeriSimpson
MargeSimpson
Provoni »

Alternimi i ngjyrës së sfondit të rreshtave 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ë gjejnë rrugën e tyre, 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ësin e klasës, duke e shtuar atë në çdo rresht të dytë të tabelës:

Titulli i dokumentit

EmriMbiemriPozicioni
HomeriSimpsonbabai
MargeSimpsonnënë
BartSimpsondjalin
LisaSimpsonvajza
Provoni »

Shtimi i një atributi të klasës në çdo rresht tjetër është mjaft i lodhshëm. Pseudo-class:nth-child u shtua në CSS3 për të ofruar një zgjidhje alternative për këtë problem. Tani efekti i ndërthurjes mund të arrihet vetëm duke përdorur CSS, pa përdorur ndryshimin e shënimit HTML të dokumentit. Duke përdorur pseudo-class:nth-child, ju 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 vendosni miun mbi të. 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ë për ta bërë këtë, duhet të shtoni një pseudo-klasë: rri pezull në përzgjedhësin e rreshtit të tabelës dhe vendosni ngjyrën e dëshiruar të sfondit:

Tr:hover (ngjyra e sfondit: #E0E0FF; ) Provoni »

Rreshtimi i një tavoline në qendër

Vendosja në qendër e një tabele HTML është e 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 vetinë e marzhit, duke i dhënë asaj të paktën dy vlera: vlera e parë do të jetë përgjegjëse për diferencë tabelat sipër 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, mund ta vendosni veçorinë marzh 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: 10px automatik 30px; )

ndodhet trupi i tabelës. Trupi përbëhet nga rreshta dhe kolona. Tabela plotësohet rresht pas rreshti.

Çdo etiketë

krijohen kolona. Ju mund të krijoni kolona të shumta. Në këtë rast, duhet të monitoroni numrin e kolonave në çdo rresht. Për shembull, nëse rreshti i parë kishte 5 kolona, ​​atëherë rreshtat e mëposhtëm duhet të kenë gjithashtu 5 kolona. Përndryshe, tabela do të notojë. Është e mundur të bashkohen qelizat.

Si të bëni një tabelë në html

Këtu është një shembull, kodi html:

Tabela shembull
Kolona 1 Kolona 2

Kushtojini vëmendje qelizës

. Ne përdorim atributin special colspan për të shtrirë qelizat horizontalisht. Vlera e saj numerike tregon numrin e kolonave që do të bashkohen. Ekziston edhe një analog i këtij atributi: etiketa (titulli i tabelës), ku duhet të futni edhe colspan. Rezultati do të jetë i njëjtë. Por shpesh ata përdorin td të rregullt.

Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës

.

Etiketoni Atributet dhe Vetitë

Për hapjen e etiketës

Ju mund të specifikoni atribute të ndryshme.

1. Property align="parameter" - vendos shtrirjen e tabelës. Mund të marrë vlerat e mëposhtme:

Në shembullin e mësipërm, ne e rreshtuam tabelën në qendër align="center" .

Ky atribut mund të aplikohet jo vetëm në tabelë, por edhe në qelizat individuale të tabelës

. Kështu, shtrirja do të jetë e ndryshme në qeliza të ndryshme.

Për shembull

, , , ose
  • cols - vija shfaqet midis kolonave
  • asnjë - të gjithë kufijtë janë të fshehur
  • rreshta - vizatohet një kufi midis rreshtave të tabelës të krijuara përmes etiketës
  • 12. Vetia width="number" - përcakton gjerësinë e tabelës: qoftë në pixel ose në përqindje.

    13. Property class="class_name" - mund të specifikoni emrin e klasës së cilës i përket tabela.

    14. Property style="styles" - stilet mund të vendosen individualisht për secilën tabelë.

    Tani është koha për të zhytur brenda tabelës dhe për të parë atributet e qelizave të tabelës. Këto atribute duhet të shkruhen në etiketën hapëse

    Dhe Të njëjtat opsione janë në dispozicion si për do të zbatohet në mënyrë hierarkike për të gjithë , kështu që kur ishte e nevojshme të lihej një qelizë pa përmbajtje, por të shfaqej ngjyra e sfondit, një hapësirë ​​jo e ndarë () 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, kjo është arsyeja pse dizajni transparent me një piksel është bërë i përhapur. Në të vërtetë, një fotografi e tillë mund të shkallëzohet sipas gjykimit tuaj, por nuk shfaqet në asnjë mënyrë në faqen e internetit.

    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 funksionojnë mjaft saktë me tabelat edhe pa praninë e përmbajtjes së qelizës.

    Për të kontrolluar pamjen e qelizave boshe, përdorni veçorinë boshe-qeliza kur vendoset të fshihet, kufiri dhe sfondi nuk shfaqen në qeliza boshe. Nëse të gjitha qelizat në një rresht janë bosh, atëherë i gjithë rreshti fshihet. Qeliza konsiderohet e zbrazët në rastet e mëposhtme:

    • nuk ka fare simbole;
    • qeliza përmban vetëm një rresht të ri, skedë ose hapësirë;
    • dukshmëria është caktuar si e fshehur.

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

    Shembulli 2.10. Qeliza boshe

    Shembulli 2.4. Fushat në tabela

    Përdorimi i qelizave boshe

    ose linjat
    ... ... ...

    2. Property background="URL" - vendos imazhin e sfondit. Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit.

    Shembull

    Tabela shembull
    Kolona 1 Kolona 2

    Konvertohet në sa vijon në faqe:

    Në shembullin e konsideruar, tonë imazhi i sfondit ndodhet në dosjen img (e cila është në të njëjtin direktori me faqen html), dhe imazhi quhet fon.gif . Ju lutemi vini re se në etiketën kemi shtuar style="color:white;" . Meqenëse sfondi është pothuajse i zi, për të parandaluar përzierjen e tekstit në sfond, ne e bëmë tekstin të bardhë.

    3. Vetia bgcolor="color" - vendos ngjyrën e sfondit të tabelës. Ju mund të zgjidhni çdo ngjyrë nga e gjithë paleta (shih kodet dhe emrat e ngjyrave html)

    4. Property border="number" - vendos trashësinë e kufirit të tabelës. Në shembujt e mëparshëm, ne specifikuam border="1" , që do të thotë se trashësia e kufirit është 1 pixel.

    5. Vetia bordercolor="color" - vendos ngjyrën e kufirit. Nëse border="0" atëherë nuk do të ketë kufi dhe ngjyra e kufirit nuk do të ketë asnjë kuptim.

    6. Vetia e cellpadding="number" - futja nga korniza në përmbajtjen e qelizës në pixel.

    7. Vetia e qelizavepacing="numri" - distanca ndërmjet qelizave në piksel.

    8. Vetia cols="number" - numri i kolonave. Nëse nuk e vendosni, vetë shfletuesi do të përcaktojë numrin e kolonave. I vetmi ndryshim është se specifikimi i këtij parametri ka shumë të ngjarë të shpejtojë ngarkimin e tabelës.

    9. Property frame="parameter" - si të shfaqen kufijtë rreth tabelës. Mund të marrë vlerat e mëposhtme:

    • i pavlefshëm - mos vizatoni kufij
    • kufi - kufi rreth tryezës
    • sipër - kufiri përgjatë skajit të sipërm të tabelës
    • më poshtë - kufiri në fund të tabelës
    • hsides - shtoni vetëm kufijtë horizontalë (lart dhe fund të tabelës)
    • vsides - vizatoni vetëm kufijtë vertikalë (në të majtë dhe në të djathtë të tabelës)
    • rhs - vetëm në kufi anën e djathtë tabelat
    • lhs - kufiri vetëm në anën e majtë të tabelës

    10. Vetia height="number" - vendos lartësinë e tabelës: qoftë në pixel ose në përqindje.

    11. Rregullat e vetive = "parametër" - ku të shfaqen kufijtë midis qelizave. Mund të marrë vlerat e mëposhtme:

    • të gjitha - një vijë është tërhequr rreth çdo qelize të tabelës
    • grupe - shfaqet një rresht midis grupeve të formuara nga etiketat
    .

    Atributet dhe Vetitë

    1. Property align="parameter" - vendos shtrirjen e një qelize të tabelës individuale. Mund të marrë vlerat e mëposhtme:

    • shtrirje majtas - majtas
    • shtrirje qendër - qendër
    • shtrirje djathtas - djathtas

    2. Property background="URL" - vendos imazhin e sfondit të qelizës. Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit.

    3. Vetia bgcolor="color" - vendos ngjyrën e sfondit të qelizës.

    4. Vetia bordercolor="color" - vendos ngjyrën e kufirit të qelizës.

    5. Vetia char="letter" - specifikon shkronjën nga e cila duhet të bëhet rreshtimi. Vlera e atributit align duhet të vendoset në char.

    6. Vetia colspan="number" - cakton numrin e qelizave horizontale që do të bashkohen.

    7. Vetia height="number" - cakton lartësinë e tabelës: qoftë në pixel ose në përqindje.

    8. Property width="number" - vendos gjerësinë e tabelës: qoftë në pixel ose në përqindje.

    9. Property rowspan="number" - cakton numrin e qelizave vertikale që do të bashkohen.

    10. Vetia valign="parametër" - shtrirje vertikale e përmbajtjes së qelizës.

    • lart - rreshtoni përmbajtjen e qelizës në skajin e sipërm të rreshtit
    • shtrirje mes - mes
    • fund - shtrirje në skajin e poshtëm
    • bazë - shtrirje me vijën bazë
    Shënim 1

    Për tag

    . Parametrat për një etiketë
    brenda tij

    Si të parandaloni që kufijtë e qelizave në një tabelë të mos ngjiten së bashku

    Nëse përdorni kufirin (kufirin e qelizës) dhe mbushjen zero midis qelizave, ato janë ende të ngjitura së bashku dhe ju merrni një kufi të dyfishtë. Për të shmangur këtë, duhet të specifikoni kolapsin e kufirit: kolaps në stilet e tabelës:

    ...

    I nderuar lexues, tani keni mësuar shumë më tepër rreth etiketa html tabela. Tani ju këshilloj të kaloni në mësimin tjetër.

    Kufijtë e tabelës HTML mund të ndryshohen lehtësisht duke përdorur mjetet CSS. Shfaqja e tyre është konfiguruar duke përdorur veçoritë: kolaps dhe ndarje.

    Për të modifikuar pamjen e tabelës, përdorni grupin e vetive kufitare. Kjo ju lejon të personalizoni gjerësinë, ngjyrën, praninë/mungesën e kufijve, stilin e tyre dhe veçoritë e tjera të ekranit.

    Bazat

    Një tabelë pa stilim do të shfaqet si tekst i strukturuar pa kufij. Tabela në html është ndërtuar duke përdorur etiketat:

    • tr për vargje;
    • th për titujt;
    • td për kolonat.
    kokë kokë kokë
    Qelizë Qelizë Qelizë
    Qelizë Qelizë Qelizë

    Madhësia e tekstit dhe fonti, sfondi, dhëmbëzimi nga skaji i dritares së shfletuesit vendosen në css në kutinë e trupit.

    Trupi ( font-familja: Helvetica, Sans-serif; madhësia e shkronjave: 5vw; ngjyra: e zezë; ngjyra e sfondit: rgba(228, 228, 245); mbushja: 20vh; )

    Stilet përdoren për të dizajnuar pamjen e matricës. Vetia border ju lejon të specifikoni trashësinë, llojin dhe ngjyrën e kufirit të një tabele html.

    (gjerësia e kufirit: 2vw; stili i kufirit: me pika; ngjyra e kufirit: bojëqielli;)

    Shkurtuar si kufi: ngjyra e stilit të gjerësisë.

    (kufi: 1px solid #4c6ea1; )

    Për një anë të caktuar, ai vendoset duke përdorur modelin border-top(/right/bottom/left)-style(/color/width/radius).

    (Ngjyra e sipërme e kufirit: blu e errët;)

    Padding vendos mbushjen brenda qelizës nga teksti në kornizë, text-align vendos shtrirjen.

    Stilet përdoren për të dizajnuar pamjen e një tavoline. Vetia e kufirit ju lejon të specifikoni trashësinë, stilin dhe ngjyrën e kufirit. Padding vendos dhëmbëzimin nga teksti, text-align vendos shtrirjen.

    Th, td (kufi: 1vw solid #4c6ea1; mbushje: 1vw; rreshtimi i tekstit: majtas; )

    Nuk ka korniza

    Nuk është e nevojshme të përdorni kufirin ose të specifikoni veçmas ngjyrën e kufirit, gjerësinë dhe stilin, pasi mund të bëni një tabelë HTML pa kufij me një dizajn të plotë. Për shembull, kodi i mëposhtëm vendos sfondin, mbushjen dhe qoshet e rrumbullakosura (matrica e fundit pa vija të brendshme ose të jashtme).

    Tabela ( rreshtimi i tekstit: majtas; ngjyra e sfondit: rgba(228, 228, 245); rrezja e kufirit lart-majtas: 15em 1em; kufiri-poshtë-djathtas-rreze: 15em 1em; ) td, th ( mbushje: 1,5 vw)

    Duke qenë në gjendje të vendosni një sfond për secilën qelizë, një tabelë pa kufij mund të duket sikur ka një të tillë.

    Tabela ( rreshtimi i tekstit: majtas; ngjyra e sfondit: rgba (228, 228, 245); gjerësia: 70 vw; hapësira e kufirit: 2vh 2vh; ) td, th ( mbushja: 1,5vh; ) td ( ngjyra e sfondit: rgba (247, 247, 255);

    Ju mund të hiqni kufijtë e tabelës html, duke lënë ato të brendshme. Për ta bërë këtë, për shembull, ata vendosin veçorinë kufitare për qelizat (tr), vendosin korniza të zakonshme në anët ngjitur (kolaps) dhe ndalojnë vizatimin e vijave rreth matricës (të fshehura). Veprimi i fundit do të fshehë linjat e qelizave, të cilat, kur aktivizohet kolapsi, shfaqen në të njëjtin vend me skajet e jashtme të tabelës.

    Tabela ( rreshtimi i tekstit: në qendër; kolapsi i kufirit: kolaps; ngjyra e sfondit: rgba(228, 228, 245); rrezja e kufirit: 50%; gjerësia: 29vh; lartësia: 10vh; stili i kufirit: i fshehur; ) td (mbushje: 1,5vh; kufiri: 0,5vh e zezë e fortë; )

    Rri dhe ndahu

    Një nga vetitë kryesore të tabelës në html, border-collapse, përcakton se si do të shfaqen kufijtë e qelizave. Prona mund të ketë një nga tre vlerat: kolaps, ndarë, trashëgim.

    tabelë (kufi-kollaps: kolaps;)

    Parazgjedhja është vendosur të ndahet, kështu që çdo qelizë do të ketë kufirin e vet. Falë kolapsit, ju mund të bashkoni linjat e qelizave në mënyrë që përmbajtja e tyre të ndahet nga një kornizë e vetme. Fotografia tregon tre shtetet kufitare të përshkruara më sipër: pa stile; me kolapsin e kufirit të vendosur në parazgjedhje; me vlerën kufi-kollaps, duke lënë një vijë të përbashkët midis qelizave.

    Korniza të dyfishta

    Vetia e kolapsit ju lejon të bëni kufijtë e qelizave në një tabelë html, të pavarur nga njëra-tjetra dhe të përbashkëta. Vetia e ndarjes kufitare përdoret shpesh me të, e cila rregullon distancën midis kornizave të qelizave. Ju mund të specifikoni hapësirën horizontale dhe vertikale.

    Tabela (hapësira kufitare: 0,5 vw 1vw; )

    Vlera e parë tregon distancën midis qelizave horizontalisht, e dyta - vertikalisht. Nëse një kornizë është specifikuar për vetë tabelën, atëherë distanca prej saj deri te qelizat formohet gjithashtu nga vetia spasing, por mund të ndikohet edhe nga mbushja e matricës. Në rastet kur matrica ka një sfond, hapësira e lirë midis qelizave do të mbushet me të.

    Tabela ( hapësira në kufi: 0,5vw 1vw; kufi: 1vw solid #4c6ea1; mbushje: 1vw; ngjyra e sfondit: e zezë; ) td, th (kufi: 1vw solid #4c6ea1; mbushje: 0,3vw; rreshtimi i tekstit: majtas; ngjyra e sfondit: e bardhë)

    Qeliza boshe

    Nëse një tabelë nuk ka kufij qelizash të bashkuara, vetia boshe-cells lejon që linjat e qelizave dhe sfondi të shfaqen, të cilat konsiderohen bosh (të shënuara si të dukshme ose nuk kanë karaktere). Nëse dëshironi të tregoni kufijtë dhe sfondin e secilës qelizë, vendosni veçorinë të shfaqet.

    tabelë (qeliza boshe: trego;)

    Vlera hide fsheh kufijtë dhe sfondet e blloqeve boshe. Nëse të gjitha qelizat në një rresht janë bosh, atëherë rreshti ka zero lartësi dhe vetëm një vijë vertikale.

    Tabela ( hapësira në kufi: 0.5vw 1vw; kufi: 0.1vw solid #4c6ea1; mbushje: 0.5vw; ngjyra e sfondit: rgba(33, 31, 171, 0.12); qeliza boshe: fshih; ) td, th (kufiri : 0.3vw solid #4c6ea1;

    atribut

    Për të caktuar kufijtë për grupet e elementeve (qeliza, kolona, ​​rreshta, grupe rreshtash ose kolonash), ekziston atributi i rregullave. Vlera e tij shkruhet direkt në html në etiketën e tabelës.

    Kjo ju lejon të vizatoni në mënyrë selektive kornizat e elementeve. Mjafton të specifikoni atributin në html, kjo do të krijojë linja të brendshme midis qelizave. Kufiri i tabelës html do të duhet të specifikohet manualisht në css.

    kokë kokë kokë
    Qelizë Qelizë Qelizë
    Qelizë Qelizë Qelizë
    tabela ( në krye: 1vw solid #486743; madhësia e shkronjave: 5vw; ) th, td (mbushje: 2vw; )

    Pra, fotografia e parë tregon funksionimin e pastër të atributit pa dizajn shtesë të kornizës përmes tabelës. Në foton e dytë, është përfunduar linja e sipërme, e cila është instaluar duke përdorur udhëzimet.

    Tabela (kufiri në krye: 1vw me pika #486743; )

    Një atribut mund të ketë vlera të shumta. Të gjitha krijojnë kufij midis qelizave me një trashësi kufiri prej 1 px. Cols krijon linja midis kolonave, rreshtave - midis rreshtave, asnjë nuk i fshin skajet. Fotografia tregon shembuj të një tabele me vlerat të gjitha dhe rreshtat.

    Ju mund të ndryshoni ngjyrën e kufijve të qelizave dhe gjerësinë e kornizës kur përdorni atributin e rregullave duke përdorur kufirin dhe ngjyrën e kufirit.

    Konfliktet e stileve

    Qelizave, rreshtave, kolonave dhe grupeve të elementeve mund t'u jepen vlerat e tyre kufitare. Sidoqoftë, ato mund të ndryshojnë në tre parametra: stili, trashësia dhe ngjyra.

    Në modalitetin e kolapsit, lindin konflikte stilimi. Për shkak të faktit se një kufi mund t'i nënshtrohet rregullit të dy qelizave të ndryshme, lind problemi i zgjedhjes së një stili që do të ketë përparësi. Siç shkruan E. Malchuk, fiton më "të mbetet në mendje" (përveç të fshehurit).

    1. Nëse një nga elementët e ka të fshehur veçorinë e stilit kufitar të kufirit të diskutueshëm, ai stil fiton. Hidden ka përparësinë më të lartë.
    2. Pesha më e vogël është asnjë. Ai gjithashtu dikton që rreshti të mos shfaqet, por që instruksioni të ekzekutohet, të gjithë elementët për atë rresht duhet të kenë këtë rregull (asnjë).
    3. Midis kufijve të hollë dhe të trashë, ato të trasha kanë përparësi më të madhe.
    4. Me të njëjtat korniza, por stile të ndryshme, fiton gjithmonë dyfishi, i ndjekur nga i ngurtë, i ndërprerë, me pika.
    5. Nëse dallimet e vetme janë ngjyrat, atëherë pamja e komponentit më të vogël është gjithmonë më e lartë (dekorimi i qelizave ka përparësi më të lartë se rreshtat, dhe rreshtat janë më të larta se tabelat).

    Ilustrimi i konfliktit

    Është e lehtë të ilustrohet konflikti i stileve duke përdorur tabelën e diskutuar tashmë. Mjafton të shtoni disa klasa në qeliza dhe të specifikoni modelin për to. Html merr formën:

    kokë kokë kokë
    Qelizë Qelizë Qelizë
    Qelizë Qelizë Qelizë

    Css-ja përkatëse.

    Trupi ( font-familja: Helvetica, Sans-serif; madhësia e shkronjave: 5vw; ngjyra: e zezë; margjina: 0; gjerësia: 80vw; ngjyra e sfondit: e bardhë; mbushja: 3vw; ) tabela (ngjyra e sfondit: rgba(33 , 31, 171, 0,12 mbytje: 0,5vw-kollapsi: 0,5vw-style: të ngurta #4c6ea1 ) td (mbushje: 1vw; .qeliza_e dytë (kufiri: 0,01vw solid #4c6ea1; ) .qeliza e_tretë (kufia: 0,01vw e kuqe e dyfishtë; )

    Stilet e kornizës

    Dizajni i kufirit mund të vendoset për secilën anë të qelizës veç e veç. Për ta bërë këtë, mjafton të specifikoni jo një vlerë në stilin e kufirit, por të listoni katër, që korrespondojnë me anët e qelizës.

    Th, td ( mbushje: 1vw; rreshtimi i tekstit: majtas; gjerësia e kufirit: 0,5 vw; ngjyra e kufirit: e errët; stili i kufirit: me pika; ) .shtatë (ngjyra e sipërme e kufirit: bojëqielli; stili i kufirit në krye : i ngurtë-kufitar-gjerësi: 2vw-style-bord: i ndarë në të majtë;

    Ju mund të specifikoni të dhënat në një rresht duke specifikuar nga një deri në katër vlera të ndryshme. Secili tradicionalisht bëhet një udhëzim për njërën nga palët.

    • Nëse vendosni dy vlera, e para do të jetë përgjegjëse për kufijtë e poshtëm dhe të sipërm, e dyta - për të majtën dhe të djathtën.
    • Nga të tre, e para është përgjegjëse për pjesën e sipërme, e dyta për të majtën dhe të djathtën dhe e treta për vijën e poshtme.
    • Katër vlera përcaktojnë në mënyrë unike secilën prej rreshtave, duke filluar nga lart në drejtim të akrepave të orës në të majtë.

    Ju gjithashtu mund të specifikoni modelin e kufijve të qelizave duke përcaktuar thjesht të dhëna për secilën anë, siç tregohet më sipër.

    Gjithsej janë dhjetë stile kornizash. Ata të gjithë ndryshojnë rreshtin ose e heqin atë:

    • asnjë - pa kufi;
    • i fshehur - asnjë më i rreptë, bllokon shfaqjen e tiparit (në një situatë konflikti);
    • me pika - e bërë me pika;
    • i ndërprerë - me pika;
    • solid - solid;
    • i dyfishtë - i ngurtë i dyfishtë;
    • brazdë - korniza duket se është e shtypur në sipërfaqe;
    • kurriz - vijë konveks;
    • inset - në fakt, për njërën anë të elementit ai sillet si një kreshtë, nëse aplikohet në të gjithë elementin, atëherë pjesa e sipërme dhe e majta janë të hijezuara, dhe pjesa e poshtme dhe e djathta janë të theksuara;
    • fillimi - sillet si brazdë kur aplikohet në njërën anë të një elementi, errëson pjesën e poshtme dhe të djathtë, duke e bërë pjesën e sipërme dhe të majtë më të lehtë.

    Një nga stilet zbatohet në secilën prej qelizave (në anët e sipërme dhe të majta). Për të siguruar që ata të mos konkurrojnë me njëri-tjetrin, "më të dobëtve" u jepen vlerat më të larta.

    Tabela ( ngjyra e sfondit: rgba(33, 31, 171, 0.12); mbushja: 0.5vw; palosja e kufirit: kolaps; kufiri: 0.3vw e zezë; ) th, td (mbushja: 1vw; rreshtimi i tekstit: majtas; ) .one (kufitar-lart: i fshehur; kufiri-majtas: i fshehur;) .dy (kufiri-lart: 0.4vw dyfishtë #4c6ea1; kufiri-majtas: 0.4vw dyfishtë #4c6ea1;) .tre (kufitar-lart: 0.5vw solid #4c6ea1: 0.5vw solid #4c6ea1 .katër (kufiri-lart: 0.7vw i ndërprerë #4c6ea1; kufiri-majtas: 0.7vw i ndërprerë #4c6ea1;) kufiri-majtas: 0.8vw me pika #4c6ea1.gjashtë (kufitar-lart: 0.9vw kurriz #4c6ea1; kufiri-majtas: 0.9vw kreshtë #4c6ea1; ) .shtatë (kufitar-lart: 1vw fillimi #4c6ea1; : 1vw fillimi #4c6ea1; futja #4c6ea1;

    Strukturimi i materialit

    Natyra e të dhënave të paraqitura në një matricë shpesh kërkon modifikim të kufijve të tabelës, kornizave të qelizave, rreshtave ose kolonave. Për këtë ju mund të përdorni:

    • linja zero (për gjerësinë e kufirit specifikoni një vlerë prej 0px);
    • të fshehura.

    Avantazhi i fshehur është prioriteti i tij. Nëse rregulli i dy elementeve njëherësh zbatohet për kufirin dhe njëri prej tyre ka vlerën e fshehur në stilin e kufirit, rreshti nuk do të shfaqet. Kjo do të thotë, ju lehtë mund të krijoni të gjithë tabelën dhe më pas të hiqni në mënyrë selektive kornizat e panevojshme.

    Përdorimi i fshehur në qeliza e bën të pamundur rivendosjen e kufirit duke përdorur metoda të tjera (përveç peshës së rëndë! e rëndësishme). Prandaj, nëse keni nevojë të hiqni disa nga anët e qelizave, është më mirë të mos përdorni asnjë.

    Le të themi se ka një tryezë. Qëllimi është të hiqni kufijtë vertikalë brenda vijës së parë. Është shënuar me një etiketë (titull) të veçantë, kështu që nuk ka nevojë të futni një klasë shtesë. Nëse aplikoni të fshehura në të gjithë etiketën, duke specifikuar kufirin majtas, atëherë së bashku me kufijtë e brendshëm, një pjesë e kornizës anësore të tabelës do të hiqet, gjë që nuk kërkohej nga kushti. Nëse përdorni asnjë dhe një linjë matrice, atëherë për linjat e brendshme do të ketë dy rregulla jo konfliktuale, dhe për skajin e jashtëm asnjë nuk do të bie ndesh me rregullin që i është dhënë në tabelë, dhe ana do të mbetet në vend .

    Heqja e linjave individuale të qelizave bëhet duke përdorur klasa që u caktohen elementëve përkatës, siç u tregua për vendosjen individuale të stilit, gjerësisë dhe ngjyrës.

    Ndërsa është më e lehtë të hiqet kufiri anësor në një tabelë html duke iu referuar kornizave të jashtme të matricës, të cilat tregohen në tabelë. Mjafton të tregoni një linjë specifike në css.

    Tabela (kufitare-majtas-stili: e fshehur;)

    Heqja e kufijve në rreshta është e lehtë për t'u zbatuar duke përdorur veçorinë border me vlerën e fshehur në tr. Jo vetëm që zhduken vija horizontale tavolina, por edhe tavolina anësore. Matrica degjeneron në kolona vertikale.

    Tr (stili i kufirit: i fshehur; )

    Si mjet i fundit, kthehuni te!e rëndësishme. Nëse e shtoni atë pas udhëzimit, do të ketë përparësi shtesë.

    Kufijtë e tabelës HTML janë fleksibël dhe të lehtë për t'u përshtatur. Grupi i vetive kufitare ju lejon të fshehni elementë, të ndryshoni ngjyrën, gjerësinë ose stilin. Disavantazhi i tabelave është se rezultati i një kombinimi rregullash të aplikuara në tabelë nuk është gjithmonë i parashikueshëm qartë. element individual. Në funksion të kësaj, rekomandohet që ose të zvogëlohet numri i stileve të mundshme për kufijtë, ose të zbatohen ato në mënyrë selektive.

    Vetë tabelat duken mjaft të dobëta dhe shfletuesit shfaqin disa karakteristika të tabelës, në veçanti, kornizat, në mënyrën e tyre. Në të njëjtën kohë, 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 zgjerohen shumë, gjë që ju lejon të përshtatni me sukses tabelat në dizajnin e faqes dhe të paraqisni të dhënat tabelare më qartë.

    Ngjyra e sfondit të qelizës

    Ngjyra e sfondit të të gjitha qelizave të tabelës në të njëjtën kohë vendoset përmes veçorisë së sfondit, e cila aplikohet në përzgjedhësin TABLE. Në këtë rast, 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 trashëgohet, vlera e paracaktuar e sfondit për qelizat është transparente, d.m.th. transparencë, kështu që efekti i mbushjes së sfondit fitohet edhe për qelizat. Nëse, njëkohësisht me TABLE, vendosni një ngjyrë për përzgjedhësin TD ose TH, atëherë kjo ngjyrë do të vendoset si sfond i qelizës (shembulli 2.3).

    Shembulli 2.3. Ngjyra e sfondit

    Tabelat

    Kreu 1Kreu 2
    Qeliza 3Qeliza 4

    Në këtë shembull, marrim një ngjyrë blu të sfondit për qelizat (etiketa

    ) dhe të kuqe në titull (etiketë ). Kjo për faktin se stili për përzgjedhësin TH nuk është i përcaktuar, kështu që sfondi i prindit "tregohet përmes", në në këtë rast, Zgjedhës TABELA.

    Dhe ngjyra për përzgjedhësin TD është specifikuar në mënyrë eksplicite, kështu që qelizat janë "mbushur" me blu.

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

    Oriz. 2.4. Ndryshimi i ngjyrës së sfondit

    Margjinat brenda qelizave

    Marzhi është distanca midis skajit të përmbajtjes së një qelize dhe kufirit të saj. Zakonisht atributi cellpadding i një etikete përdoret për këtë qëllim.

    . Ai përcakton vlerën e marzhit në pixel në të gjitha anët e qelizës. Është e mundur të përdoret vetia e stilit të mbushjes duke e shtuar atë në përzgjedhësin TD, siç tregohet në shembullin 2.4.

    Shembulli 2.4. Fushat në tabela

    Tabelat

    Kreu 1Kreu 2
    Qeliza 3Qeliza 4

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Në këtë shembull, duke grupuar përzgjedhësit, fushat vendosen njëkohësisht për përzgjedhësit TD dhe TH. Rezultati i shembullit është paraqitur në Fig. 2.5.

    Oriz. 2.5. Fushat në qeliza

    Nëse vetia e stilit të mbushjes zbatohet në qelizat e tabelës, atëherë efekti i atributit cellpadding të etiketës

    injoruar.

    Distanca midis qelizave

    Për të ndryshuar distancën midis qelizave, përdorni atributin e hapësirës së qelizave të etiketës

    . Efekti i këtij atributi është qartë i dukshëm kur përdorni kufijtë rreth qelizave ose kur mbushni qelizat me një ngjyrë që dallon nga sfondi i faqes. Vetia e stilit kufiri-hapësira vepron si një zëvendësim për hapësirën e qelizave; Një vlerë përcakton distancën vertikale dhe horizontale midis kufijve të qelizave. Nëse kjo pronë ka dy vlera, atëherë e para përcakton distancën horizontale (d.m.th., majtas dhe djathtas të qelizës), dhe e dyta përcakton distancën vertikale (sipër dhe poshtë).

    Shembulli 2.5. Distanca midis kufijve të qelizave

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

    Zëvendësimi i hapësirës së qelizave

    Leonardo58
    Rafaeli411
    Mikelanxhelo249
    Donatello213

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

    Oriz. 2.6. Pamja e tabelës kur përdorni ndarjen kufitare

    Shfletuesi Internet Explorer Versionet deri dhe duke përfshirë versionin 7 nuk e mbështesin veçorinë e ndarjes kufitare, kështu që në këtë shfletues vlera e parazgjedhur e hapësirës së qelizave (zakonisht 2 px) do të përdoret për tabelat.

    Kur shtohet një veçori e kolapsit të kufirit me një vlerë kolapsi në një përzgjedhës TABLE, atributi i hapësirës së qelizave shpërfillet dhe vlera e ndarjes kufitare rivendoset në zero.

    Kufijtë dhe kornizat

    Si parazgjedhje, fillimisht nuk ka kufi në tabelë dhe shtimi i tij ndodh duke përdorur atributin kufitar të etiketës

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

    Duke përdorur atributin e hapësirës së qelizave

    Dihet se atributi i hapësirës së qelizave të etiketës

    vendos distancën midis qelizave të tabelës. Nëse përdorni ngjyra të ndryshme të sfondit për tabelën dhe qelizat, atëherë midis qelizave do të shfaqet një rrjet vijash, 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ë piksel. Shembulli 2.3 më sipër tregon këtë efekt, kështu që nuk do ta përsëris.

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

    Përdorimi i pronës kufitare

    Vetia e stilit kufitar vendos njëkohësisht ngjyrën, stilin dhe trashësinë e kufirit rreth një elementi. Kur duhet të krijoni linja të veçanta në anët e ndryshme, është më mirë të përdorni derivatet - kufiri-majtë , kufiri-djathtas , kufiri-lart dhe kufiri-poshtë , këto veti përkatësisht përcaktojnë kufirin majtas, djathtas, lart dhe poshtë. .

    Duke aplikuar veçorinë kufi në një përzgjedhës TABLE, ne shtojmë një kufi rreth tabelës në tërësi, dhe një përzgjedhësi TD ose TH shtojmë një kufi rreth qelizave (Shembulli 2.6).

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

    Shembulli 2.4. Fushat në tabela

    Tabelat

    Kreu 1Kreu 2
    Qeliza 3Qeliza 4

    Ky shembull përdor një kufi të dyfishtë të zi rreth vetë tabelës dhe një kufi të bardhë të fortë rreth çdo qelize. Rezultati i shembullit është paraqitur në Fig. 2.7.

    Oriz. 2.7. Kufiri rreth tabelës dhe qelizave

    Ju lutemi vini re se aty ku bashkohen qelizat formohen vija të dyfishta. Ato merren sërish për shkak të veprimit të atributit të hapësirës së qelizave të etiketës

    . Megjithëse ky atribut nuk shfaqet askund në kodin e shembullit, shfletuesi e përdor atë si parazgjedhje. Nëse vendosni
    , atëherë nuk marrim vija të dyfishta, por të vetme, por me trashësi të dyfishtë. Për të ndryshuar këtë veçori, përdorni veçorinë e stilit të kolapsit të kufirit me vlerën kolaps , e cila i shtohet përzgjedhësit TABLE (shembulli 2.7).

    Shembulli 2.7. Krijimi i një kornize të vetme

    Shembulli 2.4. Fushat në tabela

    Tabelat

    Kreu 1Kreu 2
    Qeliza 3Qeliza 4

    Ky shembull krijon një vijë të gjelbër të fortë midis qelizave dhe një vijë të zezë rreth tryezës. Të gjithë kufijtë brenda tabelës kanë të njëjtën trashësi. Rezultati i shembullit është paraqitur në Fig. 2.8.

    Oriz. 2.8. Kufiri rreth tavolinës

    Përafrimi i përmbajtjes së qelizës

    Si parazgjedhje, teksti në një qelizë tabele është rreshtuar majtas. Përjashtim nga ky rregull është etiketa

    , ai përcakton një kokë që është në qendër. Për të ndryshuar metodën e shtrirjes, përdorni veçorinë e stilit të rreshtimit të tekstit (shembulli 2.8).

    Shembulli 2.8. Rreshtoni përmbajtjen e qelizës horizontalisht

    Shembulli 2.4. Fushat në tabela

    Tabelat

    Kreu 1Qeliza 1Qeliza 2
    Kreu 2Qeliza 3Qeliza 4

    Në këtë shembull, përmbajtja e etiketës

    është rreshtuar në të majtë, dhe përmbajtja e etiketës - në qendër. Rezultati i shembullit është paraqitur më poshtë (Figura 2.9).

    Oriz. 2.9. Përafrimi i tekstit në qeliza

    Rreshtimi vertikal në një qelizë është gjithmonë i përqendruar, përveç nëse shënohet ndryshe. Kjo nuk është gjithmonë e përshtatshme, veçanërisht për tabelat, përmbajtja e qelizave të të cilave ndryshon në lartësi. Në këtë rast, shtrirja vendoset në skajin e sipërm të qelizës duke përdorur veçorinë vertikale të rreshtimit, siç tregohet në shembullin 2.9.

    Shembulli 2.9. Rreshtoni përmbajtjen e qelizës vertikalisht

    Shembulli 2.4. Fushat në tabela

    Tabelat

    Kreu 1Kreu 2
    Qeliza 1Qeliza 2

    Ky shembull përcakton lartësinë e kokës

    si 40 piksele dhe teksti është rreshtuar në skajin e poshtëm. Rezultati i shembullit është paraqitur në Fig. 2.10.

    Oriz. 2.10. Përafrimi i tekstit në qeliza

    Qeliza boshe

    Shfletuesit shfaqin ndryshe një qelizë pa asgjë brenda saj. "Asgjë" në këtë rast do të thotë që as foto dhe as tekst nuk është shtuar brenda qelizës 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 ndonjë gjë në to apo jo, është e njëjtë.

    Shfletuesit e vjetër nuk shfaqnin ngjyrën e sfondit të qelizave të pamjes së zbrazët

    Leonardo58
    Rafaeli 11
    Mikelanxhelo24
    Donatello 13

    Pamje tabele në Shfletuesi Safari treguar në Fig. 2.11a. E njëjta tabelë në shfletuesin IE7 është paraqitur në Fig. 2.11b.

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

    b. Në shfletuesin IE7

    Oriz. 2.11. Pamje e një tabele me qeliza boshe

    © 2024 ermake.ru -- Rreth riparimit të PC - Portali informacioni