Korniza të bukura për tryezë html. Ndrysho sfondin e linjës në rri pezull

- 4.7 nga 5 bazuar në 6 vota

Kur krijoni faqe në internet, shpesh është e nevojshme të paraqitet një përmbajtje e faqes në formën e tabelave.

Ndonjëherë tabelat përdoren për të krijuar strukturën e faqes. Kjo qasje nuk është plotësisht e saktë, sepse tabelat nuk ishin krijuar fillimisht për të pozicionuar elementet e faqes.

Bestshtë më mirë të përdorni CSS për këtë qëllim. Por në disa raste, tabelat janë të pazëvendësueshme dhe të përshtatshme për sigurimin e informacionit.

Etiketa është përgjegjëse për krijimin e tabelave në HTML.

dhe etiketën mbyllëse
... Por ju ndoshta tashmë e dini që tabelat përbëhen nga rreshta dhe qeliza. Prandaj, për të krijuar një tabelë, na duhen edhe dy etiketa: ky është një etiketë i cili është përgjegjës për krijimin e vargjeve dhe etiketën, përgjegjës për krijimin e qelizave.

Në mënyrë që të shohim se si funksionon gjithçka në praktikë, le të krijojmë një tabelë të përbërë nga dy rreshta dhe katër qeliza. Kodi ynë i tabelës do të jetë si më poshtë:

1 - qelizë 2 - qeliza
3 - qeliza 4 - qeliza

Në mënyrë që të shihni se çfarë do të vijë nga ajo, krijoni një faqe html duke përdorur kodin më poshtë. Nëse nuk dini si të krijoni një faqe HTML, shihni udhëzuesin.

Tabela

1 - qelizë 2 - qeliza
3 - qeliza 4 - qeliza

Ju duhet të keni sa vijon:

Siç mund ta shihni, tryeza jonë nuk duket aspak si një tryezë. Kjo është e gjitha sepse etiketat tona

dhe kanë shumë atribute që duhet të specifikohen në mënyrë që tabela jonë të ketë një kufi, sfond, dimensione, etj.

Së pari, ne do të shohim atributet që janë të natyrshme në etiketat

... Për të parë se si do të ndryshojë tabela jonë, mund t'i shtoni këto atribute në etiketime
dhe, duke rifreskuar faqen, shikoni se si do të duket tabela në shfletuesin. Për lehtësi, nuk do të siguroj të gjithë kodin e faqes, por vetëm kodin që ka të bëjë me etiketën domethënë çfarë do të ndryshojmë.

Dhe kështu etiketa

ka atributet e mëposhtme:

bordura - vendos gjerësinë e kufirit të tabelës në piksele, të shkruara kështu:

.

bordercolor - ngjyra e kufirit të tabelës, kjo atribut nuk mbështetet nga të gjithë shfletuesit, kështu që mund të mos e shihni ngjyrën e specifikuar të kufirit:

Ne vendosim gjerësinë e kufirit në 2 pixel, blu, tabela do të duket kështu:

width - vendos gjerësinë e tabelës në pixel ose përqindje:

lartësia - lartësia e tabelës në pixel ose përqindje:

Tabela do të jetë 250 pixel e gjerë dhe 150 pixel e lartë, tabela do të duket kështu:

align - shtrirja e tryezës;

align \u003d majtas - tabela do të rreshtohet në të majtë;

përafroj \u003d djathtas - tabela do të rreshtohet djathtas:

Tabela jonë duhet të jetë e drejtuar.

bgcolor - ngjyra e sfondit të tryezës, bgcolor \u003d # FFC000 - ngjyra e sfondit të tryezës do të jetë e verdhë:

Tabela do të duket kështu:

sfond - duke përdorur këtë atribut, mund të vendosni një imazh që do të jetë sfondi i tabelës.

Si shembull, ruani imazhin e vogël që shihni në kllapa () në dosjen ku keni faqen me tabelën dhe në etiketë

shto sfond \u003d "fon.gif" të gjithë kodin:

Tabela do të duket kështu:

mbushja e qelizave është një atribut që vendos mbushjen majtas, djathtas, lart dhe poshtë brenda një qelize. Për shembull, nëse etiketën tonë

shtoni bllokadë \u003d 10, atëherë teksti i shkruar brenda qelizave do të jetë i prerë.

hapësira për qelizat - vendos hapësirën ndërmjet qelizave të tabelës.

Nëse hidhni një vështrim më të afërt në tabelën tonë, do të shihni se ka një hapësirë \u200b\u200btë vogël midis kufijve të qelizave, kjo është indent midis qelizave, është vendosur si parazgjedhje. Për ta hequr atë, mjafton në etiketë

përshkruaj hapësirën qelizore \u003d 0. Të gjithë kodin:

Si rezultat, qelizat tona u shtypën së bashku dhe teksti brenda qelizave ishte i prerë:

hspace - vendos boshllëkun nga tabela në të majtë dhe në të djathtë në pixel, të shkruar si më poshtë: hspace \u003d 20

nowrap - ndalon mbështjelljen e fjalëve në një qelizë, thjesht është shkruar nowrap

Dy atributet e fundit përdoren jashtëzakonisht rrallë, kështu që unë nuk do të tregoj një kod shembull me to.

Tani le të shohim atributet e etiketës

disa prej tyre janë të njëjta me atributet e etiketave

gjerësia - gjerësia e qelizës në pixel ose përqindje.

lartësia - lartësia e qelizës në pixel ose përqindje.

Për shembull, le të vendosim gjerësinë e qelizës së parë në rreshtin e parë në 30% - gjerësia \u003d 30%, dhe lartësinë e qelizës së parë në rreshtin e dytë në 100px. Kodi do të jetë kështu:

1 - qelizë 2 - qeliza
3 - qeliza 4 - qeliza

Vini re se është e mjaftueshme për të vendosur një lartësi ose gjerësi të qelizës dhe të gjitha qelizat në këtë rresht ose kolonë do të marrin të njëjtën madhësi. Prandaj, nëse duhet të vendosni, për shembull, një lartësi të caktuar të qelizës, atëherë mjafton të specifikoni këtë parametër për një qelizë dhe të gjitha qelizat e tjera në rresht do të bëhen të njëjta.

align - përafron përmbajtjen e qelizave, ka vlerat e mëposhtme:

align \u003d "lef" - përmbajtja e qelizës do të rreshtohet në të majtë;

align \u003d "right" - përmbajtja do të rreshtohet drejt;

align \u003d "center" - përmbajtja do të rreshtohet në qendër të qelizës.

Le të shtojmë këto atribute dhe vlera në kodin tonë dhe të rreshtojmë përmbajtjen e qelizës së parë në të majtë (përmbajtja renditet majtas si parazgjedhje, por në disa raste kjo atribut është e nevojshme), përmbajtja e qelizës së dytë është e drejtuar dhe e katërta ne qender.

1 - qelizë 2 - qeliza
3 - qeliza 4 - qeliza

bgcolor - duke përdorur këtë atribut, mund të vendosni ngjyrën e qelizës.

background - vendos imazhin si sfond të qelizës.

Ne tashmë jemi takuar me këto atribute, duke marrë parasysh atributet e etiketës

... Ata punojnë në të njëjtën mënyrë, vetëm në këtë rast ata vendosin sfondin e qelizës. Për shembull, le të vendosim ngjyrën e sfondit të qelizës së 2-të në të verdhë, dhe të vendosim imazhin e mëposhtëm () si sfondin e qelizës së 4-të.

Për ta bërë këtë, shtoni atributet e nevojshme në kodin tonë, për qelizat tona bgcolor \u003d "# FFFF00" për qelizën e 2-të dhe sfondin \u003d "fon.jpg" për qelizën e 4-të. Si rezultat, tabela jonë do të duket kështu:

Siç mund ta shihni, përkundër faktit që ne vendosim sfondin e vetë tabelës, nëse vendosim sfondin e qelizave të tabelës, atëherë saktësisht sfondi që vendosim për qelizat do të shfaqet.

bordercolor - përcakton ngjyrën e kufirit të qelizës.

Ne gjithashtu e takuam këtë atribut kur kemi parasysh atributet e etiketës

... Më lejoni t'ju kujtoj se nuk funksionon në të gjithë shfletuesit. Vini re se etiketimi

Ky shembull përdor tabela të vendosura, domethënë një tryezë brenda një tjetre. Ne rresht 1 ne hapim tabelën e parë dhe e mbushim me një ngjyrë të errët, në këtë rast të zezë (# 00 00 00). Një nga parametrat e tabelës së jashtme është hapësira qelizoreose mbushje qelizash - duhet të jetë 0 dhe tjetri 1. Në përputhje 4 ne hapim një tryezë të re me një sfond të bardhë (# FF FF FF). Një parametër i rëndësishëm i tabelës së mbivendosur është gjerësia e saj - gjerësia \u003d "100%"... Tabelat duhet të mbyllen në rend të kundërt - së pari të vendosura, pastaj të jashtme.

Opsioni i mësipërm mund të përdoret për të krijuar një kornizë për të gjithë faqen, por duhet të kihet parasysh se nuk është i përshtatshëm për faqet me një sasi të madhe informacioni, pasi shfletuesi duhet ta lexojë atë deri në fund para se të tregojë përmbajtjen e tabelës. Kështu, vizitori do të shohë një ekran të zbrazët për disa sekonda.

Kutia 2

Në këtë shembull, kemi të bëjmë me një tryezë. Për të krijuar një kornizë, këtu përdoret një parametër i krijuar posaçërisht kufiri, së cilës i është caktuar vlera 1. Në të njëjtën kohë, parametri hapësira qelizoreështë e barabartë me 0, përndryshe korniza do të duket kështu:

nuk ka asnjë atribut të kufirit që tregon kufirin e qelizës. Le të vendosim ngjyrën e kufirit të qelizës së dytë në të kuqe për këtë, shtojmë atributin bordercolor \u003d "# FF0000" në qelizën e dytë

Ekziston edhe një atribut tjetër i krijuar për të rreshtuar përmbajtjen e qelizave:

valign - përafron përmbajtjen e qelizave vertikalisht.

Ka kuptimet e mëposhtme:

valign \u003d "top" - radhit përmbajtjen e qelizës në krye;

valign \u003d "fund" - rreshtimi i përmbajtjes së qelizës në pjesën e poshtme;

valign \u003d "mes" - rreshtimi në mes të qelizës;

valign \u003d "bazë" - përafrimi i përmbajtjes së qelizës me vijën bazë.

Le t'i shtojmë këto atribute në secilën prej 4 qelizave tona.

1 - qelizë 2 - qeliza
3 - qeliza 4 - qeliza

Tabela jonë do të duket kështu:

Gjëja e fundit që duhet të marrim parasysh në këtë manual është bashkimi i qelizave të tabelës. Për të kombinuar disa qeliza në një varg, ekziston një atribut colspan \u003d "" ku thonjëzat tregojnë numrin e qelizave që do të kombinohen.

A nuk mendoni se një tryezë bardh e zi duket e mërzitshme? Kështu që ne mendojmë kështu! Prandaj, në këtë manual, ne do të flasim për mënyrën e ndryshimit të ngjyrës së një tabele në HTML. Ekzistojnë tre mundësi për të shtuar ngjyrën, secila prej tyre ka vetinë e vet.

  1. Specifikon ngjyrën e sfondit të qelizave. Bërë duke përdorur pronën ngjyrë e sfondit.
  2. Specifikon ngjyrën e tekstit në qeliza. Bërë duke përdorur pronën ngjyrë.
  3. Specifikon ngjyrën e kufijve të qelizave. Bërë duke përdorur pronën ngjyra e kufirit.

Më parë, një formë më koncize e përshkrimit të kornizës ishte përdorur për të ndryshuar ngjyrën. Ajo dukej kështu:

Kufiri: 1px dritë e fortë

Dhe pjesa e fundit ishte përgjegjëse për ngjyrën këtu - lightrgay.

Ka mënyra të ndryshme për të vendosur kuptimin e ngjyrave CSS... Ne do t'ju tregojmë se si ndodh përshkrimi i ngjyrës duke përdorur atributet.

Si të ndryshoni ngjyrën e qelizës

Le të shohim se si duket kodi CSSnë të cilën vendoset ngjyra për qelizën.

Td (sfondi-ngjyra: sfondi-ngjyra;)

Sigurisht, ju mund të ndryshoni ngjyrat për tryezë, dhe në td, dhe në th... Le të përpiqemi t'i japim tabelës sonë të shumëzimit një pamje më solide.

Shtoni stile për qelizat e kokave me etiketën th, si dhe për qelizat në diagonale, në të cilat ndodhen sheshet e numrave:

Tabela e shumëzimit

Tabela e shumëzimit
* 2 3
2 4 6
3 6 9

Rezultati në shfletuesin:

Si të ndryshoni ngjyrën e kufirit në një tabelë

Siç e keni vërejtur tashmë në shembullin e mësipërm, në tabelë ne kemi ndryshuar ngjyrën e kufirit. Për këtë kemi përdorur pronën kufitare. Vendos parametrat sipas renditjes së renditur më poshtë:

  1. lloji i linjës, në rastin tonë solid
  2. gjerësia e linjës, në rastin tonë 1px
  3. ngjyra e vijës, në rastin tonë blu

Le të kujtojmë përsëri se si duket vendosja e ngjyrës së kufirit për një qelizë:

Td (kufiri: 1px blu e fortë;)

Si të ndryshoni ngjyrën e një rreshti në një tabelë

Pra, ju dhe unë kemi mësuar se si të ndryshojmë ngjyrat e qelizave, si dhe qelizat e kokave, duke përdorur aftësitë e CSS. Nëse ofrojmë stile për etiketa të tilla si th ose td, atëherë duhet të kuptoni se stilet do të zbatohen për pjesën tjetër të etiketave.

Sidoqoftë, ka situata kur duhet të ndryshoni ngjyrën e një qelize të veçantë, ose disa qelizave, ose të gjithë rreshtit. Çfarë të bëjmë në këtë rast? Klasat duhet të përdoren këtu, si dhe zbatimi i stileve të tyre. Në praktikë, duket kështu:

RowGreen (ngjyra e sfondit: jeshile;)

Dhe në mënyrë që të ndryshoni ngjyrën duke përdorur këtë klasë linja të caktuara, duhet të bëni sa vijon:

Tabela me ngjyra të alternuara në rreshta
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

Dhe rezultati në shfletuesin:

Si të ndryshoni ngjyrën e tekstit në një tabelë

Për të ndryshuar ngjyrën e tekstit në tabelë, përdorni vetinë ngjyrë... Mund të zbatohet në një larmi elementesh: tabela, tr, e, td. Në varësi të kësaj, ngjyra në elementin e zgjedhur do të ndryshohet. Për shembull, vendosni ngjyrën e shkronjave në të gjelbër për të gjithë tryezën:

Tabela (ngjyra: jeshile; ...)

Në mënyrë të ngjashme, ju mund të ndryshoni ngjyrën për qelizat individuale. Dhe kjo i jep fund këtij mësimi, mos harroni të bëni detyrat e shtëpisë. Lamtumirë të gjithëve!

Me ndihmën e tabelave, ju mund të arrini efekte vizuale shumë interesante kur krijoni korniza të hollë që interpretohen pothuajse në mënyrë të barabartë nga të gjithë shfletuesit. Le të shohim disa shembuj për këtë.

Kutia 1

parametri hapësira qelizore= 1

parametri hapësira qelizore= 2

parametri hapësira qelizore= 3

Ky opsion është më i thjeshtë se i pari, por, për fat të keq, nuk interpretohet në të njëjtën mënyrë nga Internet Explorer dhe Netscape.

Kutia 3
















<kufiri i tabelës \u003d "0" hapësira qelizore \u003d "0" celulari \u003d "0"\u003e










Kështu duket









Nëse dy opsionet e mëparshme shfaqin korniza në shfletues të ndryshëm, megjithëse minimalisht, por me trashësi të ndryshme, atëherë shembulli i tretë interpretohet nga shfletuesit e zakonshëm Internet Explorer 4.x / 5.x / 6, Netscape 4.x / 6.x dhe Opera 6. x është e njëjtë për sa i përket trashësisë së kufirit. Më duket e përshtatshme të përmend që Netscape 4.x është më problematika për një krijues uebi.
Por le të shohim nga afër opsionin e tretë. Bazohet në një tabelë me 9 qeliza, të paraqitura më poshtë:

1

2

3

4

6

7

8

9

Të gjitha qelizat, përveç asaj të 5-të, janë pikturuar me të zeza, e pesta - me të bardhë. Sfondi i tabelës në vetvete nuk është i rëndësishëm në këtë rast. Pastaj parametri shtohet në qelizat 1-3 dhe 7-9 lartësia \u003d "1". Prandaj, qelizat 1, 3, 4, 6, 7, 9 bëhen me një pixel të gjerë ( gjerësia \u003d "1") Qelizat e mesme 2, 5, 8 bëhen sa më të gjera që të jetë e mundur ( gjerësia \u003d "100%") Qëllimi është që i ashtuquajturi "shesh i modifikuar Malevich" shtohet në qeliza, të cilat duhet të jenë të ngushta ose të hollë, ose të dyja, - një skedar gif transparent me madhësi 1x1, përndryshe efekti i dëshiruar nuk do të arrihet.

Ky opsion është padyshim shumë kompleks dhe i rëndë për të krijuar një kufi të hollë rreth një tavoline me një qelizë, pavarësisht përputhshmërisë së tij me shumë shfletues. Përdoret kryesisht për paraqitjen e faqeve me vija të holla. Ju gjithashtu mund të përdorni fletët e stilit për të krijuar korniza, por më shumë për këtë në njërën nga punëtoritë e mëposhtme.

Punëtoria tjetër

\u003e\u003e përgatitja për botim

Punëtoria e mëparshme

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

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

Formatimi i tabelave

1. Tabela kufizon kufirin

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

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

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

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

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

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

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

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

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

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

Kufijtë mund të vendosen pjesërisht:

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

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

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

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

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

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

Tabela (gjerësia: 600 px;) 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: zgjedhës i fëmijës së parë, tryezë td: zgjedhës i fëmijës së fundit, ju mund të stiloni kolonën e parë ose të fundit të tabelës (duke përjashtuar qelizën e parë të kokës së tabelës);

duke përdorur përzgjedhësin e 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 duke përdorur pronën nga ana e titullit, ajo mund të vendoset para ose poshtë tryezës. Prona e përafrimit të tekstit përdoret për përafrimin horizontal të tekstit të titullit. I trashëguar.

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

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

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

Sintaksë

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

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

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

Sintaksë

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

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

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

Kompania P1 P2 P3
Microsoft 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

Paraqitja e një paraqitjeje tryeze përcaktohet nga njëra nga dy mënyrat: paraqitja fikse ose paraqitja automatike. Layout në këtë rast do të thotë se si gjerësia e tryezës shpërndahet 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ësPagaBonusMbikëqyrës
Stephen C. Cox$300$50Bob
Josephin tan$150-Annie
Joyce ming$200$35Andi
James A. Pentel$175$25Annie
tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14px; sfondi: i bardhë; gjerësia maksimale: 70%; gjerësia: 70%; shembja e kufijve: shembja; teksti -align: majtas;) th (pesha e shkronjave: normale; ngjyra: # 039; fundi i kufirit: 2px solide # 6678b1; mbushja: 10px 8px;) td (ngjyra: # 669; mbushja: 9px 8px; tranzicioni: .3s lineare;) tr: hover td (ngjyra: # 6699ff;)

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

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

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

Th (pesha e shkronjave: normale; ngjyra: # 039; 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 tryezave të të gjitha llojeve është stili i ashtuquajtur "kuti". Mjafton të zgjidhni një skemë të mirë ngjyrash dhe pastaj të vendosni ngjyrën e sfondit për të gjitha qelizat. Mos harroni të theksoni ndryshimin midis linjave duke vendosur kufijtë si ndarës.

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

Gjëja më e vështirë është të gjesh skemën e ngjyrave që do të 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; mbushja: 10px 15px;) td (ngjyra: # 669; bordura e sipërme: 1px solide # 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 ndërprerë # 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 - lart: 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ër të ndarë qartë përmbajtjen e një qelize nga tjetra, qelizave u shtohen kufij. Parametri kufitar i etiketës është përgjegjës për krijimin e tyre.

e cila përcakton trashësinë e kornizës.

Shembulli 1 tregon mënyrën e krijimit të një kufiri rreth qelizave.

Shembull 1. Shtimi i një kornize në një tryezë





Trashësia e kufirit







Cheburashka Krokodili Gena Shapoklyak


Kornizat e krijuara në këtë mënyrë ndryshojnë pak nga pamja e tyre në shfletues të ndryshëm.

Figura: 1. Korniza e marrë duke përdorur parametrin e kufirit

Për të marrë një kufi të të njëjtit lloj, rekomandohet të aplikoni etiketën e stilit të kufirit, duke e aplikuar atë në qelizat e tabelës ( ose ) Sidoqoftë, edhe këtu ka gracka. Meqenëse krijohet një kornizë për secilën qelizë, merret një kufi me trashësi të dyfishtë në pikat e kontaktit të qelizave. Ka disa mënyra për të zgjidhur këtë tipar. Më e lehtë është përdorimi i pronës së shembjes së kufirit i vendosur për tu shembur. Detyra e tij është të gjurmojë kontaktin e linjave dhe, në vend të një kufiri të dyfishtë, të përshkruajë një të vetme. Ne e shtojmë këtë atribut të datatkov në etiketë

, dhe pastaj ai do të bëjë gjithçka më vete (shembulli 2).

Shembull 2. Përdorimi i shembjes së kufirit për të krijuar kufijtë e tryezës





Krijimi i kornizës






0XX
00X
XX0


Diferenca midis kufijve të tabelës kur shtoni parametrin e shembjes së kufirit, si dhe pa të, tregohet në Fig. 2

a

b

Figura: 2. Pamja e tabelës kur përdorni atributin bord-kolapazë

Në fig. 2a tregon kornizën e paracaktuar të tabelës. Vini re se brenda tabelës, të gjitha linjat janë me gjerësi dyfish. Shtimi i parametrit të shembjes së kufirit e heq këtë tipar dhe trashësia e të gjitha linjave bëhet e njëjtë (Fig. 2b).

Për të zhvilluar linja të ngjashme brenda tabelës, mund të shkoni në anën tjetër. Duhet shtuar për përzgjedhësin kornizë, por anuloni vijën e djathtë dhe të poshtme duke vendosur cilësitë përkatëse në asnjë. Pastaj, kur qelizat bashkohen, kufijtë e tyre nuk do të mbivendosen me njëra-tjetrën, për arsye se do të ketë vetëm një vijë. Sidoqoftë, me këtë metodë të formimit të kufijve, nuk ka vija në fund dhe në të djathtë të vetë tabelës. Shtimi i parametrave kufiri djathtas dhe kufiri në fund të zgjedhësit

, ne do të përfundojmë me kornizën e dëshiruar (shembulli 3). Për qëndrueshmëri, duhet pasur kujdes që të përputhen me stilin, trashësinë dhe ngjyrën e kufirit në të gjitha rastet.

Shembull 3. Krijimi i një kufiri për një tabelë duke përdorur atributin e kufirit





Krijimi i kornizës






0XX
00X
XX0


Kjo metodë mund të ketë variacione, për shembull, për përzgjedhësin ne shtojmë një kufi vetëm në të djathtë dhe në fund, dhe në

përkundrazi, ne shtojmë një atribut kufitar, por heqim vijën në të djathtë dhe në fund. Në çdo rast, rezultati i paraqitur do të jetë një.

Një pamje e thjeshtë dhe origjinale e tryezës mund të merret duke e bërë ngjyrën e kufirit të përputhet me ngjyrën e sfondit. Por që linjat të jenë të dukshme, është e domosdoshme të mbushni sfondin e etiketës

ose ... Pastaj merren qelizat e tryezës, sikur të priten nga një prerës midis tyre (shembulli 4).

Shembulli 4. Përdorimi i kufijve të padukshëm në një tabelë





Krijimi i kufijve







0XX
00X
XX0


Në këtë shembull, ngjyra e sfondit të faqes në internet injektohet përmes vetisë së sfondit të shtuar në zgjedhësin BODY. Edhe pse e bardha është e paracaktuar, ndonjëherë është e dëshirueshme ta vendosni në mënyrë që përdoruesi të mos specifikojë ngjyrën e tij të sfondit përmes cilësimeve të shfletuesit. Linjat e tabelës duhet të kenë të njëjtën ngjyrë, në këtë rast ato qartë nuk shfaqen dhe vetëm ndajnë qelizat midis tyre.

Rezultati i Shembullit 4 tregohet më poshtë.

Figura: 3. Pamje e kufijve që përputhen me ngjyrën e sfondit

© 2020 Gadgets Mobile dhe Kompjuterike