Gjerësia maksimale e tabelës HTML.

3.5. Gjerësia dhe lartësia e tabelës dhe qelizave

Gjerësia e tabelës është vendosur atributin gjerësi elementi TABELA. Vlera mund të specifikohet si në njësi absolute (gjerësia = "2 5 0") dhe në njësi relative (gjerësia = "80%"). Për shembull, duke vendosur gjerësinë në 600 piksele, mund të jeni i sigurt që tabela do të përshtatet në dritaren e shfletuesit në çdo rezolucion të monitorit. Nëse gjerësia është e specifikuar në përqindje, atëherë ato llogariten nga gjerësia e dritares së shfletuesit ose nga gjerësia e qelizës së një tabele tjetër në të cilën është futur ajo e dhënë. E njëjta gjë mund të bëhet me lartësinë e tabelës duke përdorur atributin lartësi.

E gjithë sa më sipër vlen edhe për qelizat e tabelës. Ju vetëm duhet të përdorni elementë me atributet e duhura. Në këtë rast, nuk është aspak e nevojshme të specifikoni madhësinë e secilës qelizë individuale. Kur ndryshoni gjerësinë ose lartësinë e një qelize, të gjitha qelizat ngjitur brenda kolonës do të shfaqen me vlerën e re.

Kur vendosni gjerësinë dhe lartësinë e tabelës shumë të vogla, shfletuesi përcakton vlerat minimale që lejojnë që të dhënat të shfaqen normalisht.

Në fig. 3.9 dhe 3.10 tregojnë dy tabela me të njëjtën përmbajtje, por gjerësi dhe lartësi të ndryshme.

Oriz. 3.9. Gjerësia e tabelës është 80% e gjerësisë së dritares së shfletuesit

Oriz. 3.10. Gjerësia dhe lartësia e tabelës është 300 piksele

Gjerësia e tabelës së parë është 80% e madhësisë së dritares së shfletuesit dhe kolona e parë e kësaj tabele është 50% e të gjithë gjerësisë së tabelës. Rreshti i parë është 100 piksele i lartë.

Tabela e dytë është katrore, me gjerësi anësore 300 piksele. Listimet 3.4 dhe 3.5 tregojnë kodet për faqet që përmbajnë tabelat e përshkruara.

Listimi 3.4. Kodi i tabelës 80% i gjerë i gjerësisë së dritares së shfletuesit

Listimi 3.5. Kodi i tabelës me gjerësi 300 pikselësh

Gjerësia e tavolinës 80%

Kreu 1	Kreu 2	Kreu 3
Qeliza 2x1	Qeliza 2x2	Qeliza 2x3
Qeliza 3x1	Qeliza 3x2	Qeliza 3x3

Nga libri Teknologjia e informacionit PROCESI I DOKUMENTIMIT TË PËRDORËSVE SOFTWARE autori autor i panjohur

Nga libri Kompjuteri 100. Duke filluar me Windows Vista autor Zozulya Yuri

Nga libri AutoCAD 2009 autori Orlov Andrey Alexandrovich

Zgjedhja e qelizave Për të ndryshuar opsionet e formatimit për disa qeliza njëherësh, zgjidhni ato duke përdorur një nga teknikat e mëposhtme.? Për të zgjedhur një qelizë të veçantë, lëvizni treguesin e miut në kufirin e tij të majtë dhe, kur ai merr formën e një shigjete të zhdrejtë të zezë,

Nga një libër pune në Excel. Kurs multimedial autori Medinov Oleg

Modifikimi i qelizave të tabelës Për të modifikuar një qelizë tabele, duhet të klikoni mbi të. Do të shfaqen shënuesit e kontrollit (Fig. 4.45). Oriz. 4.45. Qeliza e zgjedhur e tabelës Duke lëvizur treguesin duke mbajtur të shtypur butonin e miut, mund të zgjidhni një grup qelizash. Ju gjithashtu mund të nënvizoni

Nga libri AutoCAD 2010 autori Orlov Andrey Alexandrovich

Bashkimi i qelizave Dy ose më shumë qeliza në një fletë mund të bashkohen në një. Kombinimi i qelizave mund të jetë i nevojshëm, për shembull, kur krijoni një kokë të përbashkët për disa kolona (Fig. 3.15). Oriz. 3.15. Shembull i kombinimit të qelizave Për të kombinuar qelizat, bëni sa më poshtë:

Nga libri Mësimi më i ri për të punuar në kompjuter autori Beluntsov Valery

Modifikimi i qelizave të tabelës Për të modifikuar një qelizë tabele, duhet të klikoni mbi të. Kjo do të shfaqë shënuesit e kontrollit (Fig. 4.46). Oriz. 4.46. Qeliza e zgjedhur e tabelës Duke lëvizur treguesin duke mbajtur të shtypur butonin e miut, mund të zgjidhni një grup qelizash. Ju gjithashtu mund të

Nga libri XSLT autori Holzner Stephen

Formatimi i qelizave Të dhënat në qeliza mund të formatohen. Për shembull, aplikoni shtrirjen (të rreshtuar majtas, djathtas, në qendër dhe shtrirë gjerësisht), ndryshoni llojin, madhësinë (madhësinë e pikës) dhe efektet (stilin) ​​të fontit. Gjithashtu mund të ndryshoni formatin e të dhënave duke përdorur menu

Nga libri Grafologjia e shekullit XXI autori Ilya Shchegolev

Krijimi i qelizave të tabelës: Përsëri, ashtu si kur krijoni një tabelë në HTML, vendosni të dhëna në qeliza të veçanta të tabelës duke përdorur elementin ... Shënim: Për të vendosur fontin dhe karakteristikat e tjera të kësaj përmbajtjeje, brenda secilit element

Nga libri HTML, XHTML dhe CSS 100% autor Quint Igor

Lartësia dhe gjerësia e shkronjave Çdo shkrimtar zgjedh instinktivisht madhësinë e shkronjave që i përshtatet. Ju mund të gjeni shumë opsione për madhësinë e shkronjave, por grafologët në mënyrë konvencionale i ndajnë ato në tre grupe. 1. Shkronjat e vogla (gjerësia dhe lartësia më pak se 3-4 mm) tregojnë aftësinë për të

Nga libri i autorit

11. Gjerësia e shkrimit të dorës Shenjat nga e majta në të djathtë (fig. 191): Fig. 191 dorëshkrim i gjerë ( distanca të gjata midis shkronjave); dorëshkrim i ngushtë (hapësira të vogla midis shkronjave); ndryshimi i gjerësisë; shkronjat janë të ngushta, por me hapësirë ​​të gjerë

Nga libri i autorit

3.7. Shtrirja e tabelës dhe përmbajtja e qelizave Elementet TABLE, TR, TH dhe TD përdorin atributet align dhe valign për të rreshtuar elementët e tabelës horizontalisht dhe vertikalisht. Atributi align zbatohet për të gjithë elementët e tabelës dhe përcakton shtrirjen e përgjithshme horizontale:

Nga libri i autorit

3.8. Kombinimi i qelizave të tabelës Në praktikë, ekziston një numër i madh tabelash në të cilat një qelizë kombinon disa qeliza në lartësi dhe gjerësi (shih Fig. 3.2). Në HTML, qelizat bashkohen duke përdorur atributet colspan dhe rowspan. Atributi colspan specifikon numrin e qelizave për

Nga libri i autorit

Gjerësia e shkronjave Vetia font-weight përcakton gjerësinë e fontit. Vlera mund të specifikohet si një numër nga 100 në 900 (në qindra), ku çdo numër tregon një font që është më i errët se paraardhësi i tij. Në raste të tjera, kuptimi mund të jetë si më poshtë. normal - teksti do të shfaqet si normal

Nga libri i autorit

Gjerësia e tabelës Për të kontrolluar shfaqjen e gjerësisë së tabelës kur vendosni qelizat, rreshtat dhe kolonat e saj, përdorni veçorinë e paraqitjes së tabelës. Mund të marrë vlerat e mëposhtme. fikse - pozicioni horizontal i tabelës nuk varet nga përmbajtja e qelizave; varet vetëm nga

Nga libri i autorit

Lartësia e tabelës Lartësia e tabelës mund të vendoset duke përdorur veçorinë lartësi në elementin TABLE. Ashtu si me gjerësinë, mund t'ia lini zgjedhjen e lartësisë shfletuesit duke përdorur vlerën automatike, ose të vendosni vlerën në një numër dhe të specifikoni njësinë. Duke përdorur veçorinë lartësi, mund të vendosni gjithashtu

Nga libri i autorit

Gjerësia e kufirit Merrni parasysh veçoritë e kufirit-lart-gjerësi, kufi-djathtas-gjerësi, kufi-fund-gjerësi, kufi-majtë-gjerësi, të cilat përcaktojnë gjerësinë e kufijve të sipërm, të djathtë, të poshtëm dhe të majtë të një elementi faqeje, respektivisht . Të gjitha pronat e konsideruara në këtë seksion mund të marrin një nga sa vijon

U bë popullor, dizajnerët e uebit përdorën kryesisht metodën e paraqitjes së tabelave dhe morën rezultate shumë të mira.

Etiketat e përdorura për të ndërtuar një tabelë në html

tabela- etiketa e kërkuar që hap dhe mbyll tabelën
mbishkrim- një etiketë opsionale që tregon titullin e tabelës
th- një etiketë opsionale, në etiketat hapëse dhe mbyllëse të së cilës shkruhet emri i kolonës. Në mënyrë tipike theksohet me shkronja të zeza
tr- një etiketë e kërkuar nga e cila hapet dhe mbyllet linja
td- një etiketë e kërkuar që tregon hapjen dhe mbylljen e një qelize me radhë

Shembull i kodit për një tabelë të thjeshtë

Gjerësia e tabelës 300 piksele

Kreu 1	Kreu 2	Kreu 3
Qeliza 2x1	Qeliza 2x2	Qeliza 2x3
Qeliza 3x1	Qeliza 3x2	Qeliza 3x3

Emri i tabelës

Kolona 1	Kolona 2
Teksti në qelizën e parë	Teksti në qelizën e dytë

Shfletuesi do të shfaqet

Qëllimi i tabelave në html

Mësimi i tabelave është shumë i rëndësishëm! Falë tabelave, ju mund të organizoni jo vetëm tekst, por edhe imazhe, lidhje dhe shumë më tepër. Në tabelë mund të vendosni sfond(ose ngjyra e tij), dhëmbëzimi, gjerësia, kufiri dhe parametra të tjerë që do t'i japë asaj një bukuri pamjen... Tabela - Hapi juaj i parë drejt të kuptuarit ueb dizajn! Më parë, shumë sajte ishin paraqitur tërësisht si tabela, domethënë gjithçka që pa përdoruesi (menuja anësore, Menuja kryesore, përmbajtja) - ishte përmbajtja e qelizave të një tabele të madhe.
Në këtë shënim, le të shkojmë drejtpërdrejt te atributet që e bëjnë tabelën të duket bukur ...

Karakteristikat dhe parametrat e tabelave html: dhëmbëzimi, gjerësia, ngjyra e sfondit, kufiri (korniza)

Kanë etiketë tavoline ka atributet e mëposhtme:

gjerësia- gjerësia e tabelës. mund të jetë në piksel ose% të gjerësisë së ekranit.
bgcolor- ngjyra e sfondit të qelizave të tabelës
sfond- plotëson sfondin e tabelës me një figurë
kufiri- korniza dhe kufijtë në tabelë. Trashësia është e specifikuar në pixel.
mbushje celulare- mbushja në pixel midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm
Si më parë, shkruani vlerën e atributit në thonjëza.

Le të shqyrtojmë zbatimin e këtyre atributeve me shembull. Për ta bërë këtë, krijoni një tabelë (por tashmë pa mbishkrimin dhe etiketat th të përdorura jashtëzakonisht rrallë) dhe vendosni parametrin në atribut kufiri (kufiri), gjerësia (gjerësia e tabelës, rreshtit ose qelizës) dhe bgcolor (ngjyra e qelizës)

Si rezultat, shfletuesi do të shfaqë një tabelë të formës së mëposhtme

kornizë- atribut që tregon një kufi rreth tabelës. Ekzistojnë vlerat e mëposhtme:

E pavlefshme - pa kornizë,
sipër - vetëm korniza e sipërme,
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 kufiri i majtë,
rhs - vetëm kufiri i djathtë,
kuti - të katër pjesët e kutisë.

rregullat- një atribut që tregon kufijtë brenda një tabele, midis qelizave. Ekzistojnë vlerat e mëposhtme:

Asnjë - nuk ka kufij midis qelizave,
grupet - kufijtë vetëm midis grupeve të rreshtave dhe grupeve të kolonave (do të diskutohet pak më vonë),
rreshtat - kufijtë vetëm midis rreshtave,
cols - kufijtë vetëm midis kolonave,
të gjitha - shfaq të gjitha kufijtë.

Merrni parasysh kodin shembull

Kolona 1	Kolona 2

Rezultati

Tani le të përpiqemi të krijojmë një tryezë të bukur. Për ta bërë këtë, le të fillojmë të përdorim rreshtimi në tabelë... Për këtë, ekzistojnë parametrat e mëposhtëm tashmë të njohur:

rreshtoj- shtrirje tavoline. Mund të pozicionohet majtas (majtas), djathtas (djathtas), qendër (qendër)
hapësira e qelizave- distanca midis qelizave të tabelës. Specifikuar në piksel (e parazgjedhur 0 piksele)
mbushje celulare- mbushja me pikselë midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm (si parazgjedhje 0 pikselë)
Le të shqyrtojmë një shembull

Kolona 1	Kolona 2
Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë

Shfletuesi shfaq një tabelë të përqendruar që duket si kjo

Vargjet Tr dhe qelizat td në tabelat HTML

Më lejoni t'ju kujtoj përsëri se tabelat formohen rresht pas rreshti (tr). Rreshtat (tr) tashmë përmbajnë qeliza (td). Nëse vendosni një parametër për një varg (tr), atëherë ai do të jetë i vlefshëm për të gjitha qelizat(td) në këtë rresht, nëse për një qelizë specifike, atëherë vetëm për të. Në shembujt e mësipërm, unë specifikova ngjyrën për rreshtin, ky parametër u shpërnda në përputhje me rrethanat për të gjitha qelizat.

Për etiketat tr dhe td ekzistojnë sa vijon

rreshtoj- rreshtimi i tekstit brenda qelizës. Majtas, djathtas, qendër
valign- rreshtimi vertikal i tekstit brenda qelizës. Lart (lart), poshtë (poshtë), qendër (në mes)
bgcolor- vendos ngjyrën e vijës
gjerësia- gjerësia e kolonës (të gjitha qelizat më poshtë do të pranojnë këtë parametër) është specifikuar në piksel ose në përqindje, ku 100% është gjerësia e të gjithë tabelës
lartësia- lartësia e qelizës (të gjitha qelizat në rresht do ta pranojnë këtë parametër)

Konsideroni një kod ku përmbajtja e qelizave (td) është rreshtuar në skaje të ndryshme: në të parën në të majtë, në të dytën në të djathtë:

Kolona 1	Kolona 2
Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë
Kolona 1	Kolona 2

Rezultati

Me ndihmën e tabelave mund të bëni një faqe shumë të mirë. Mos harroni se mund të futni jo vetëm tekst në qeliza, por edhe imazhe, lidhje, etj.!)

Faleminderit për vëmendjen! Shpresoj se materiali ishte i dobishëm!

Specifikimi CSS jep mundësi të pakufizuara për hartimin e tabelës. Si parazgjedhje, qelizat e tabelës dhe tabelës nuk kanë kufij dhe sfond të dukshëm, 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 në një rresht është e njëjtë dhe përcaktohet nga lartësia e qelizës më të lartë.

Formatimi i tabelave

1. Kufiri i kufijve të tabelës

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

Tabela (kufi-kolapsi: kolaps; / * hiq hapësira boshe midis qelizave * / kufiri: 1px gri e fortë; / * vendosni kufirin e jashtëm për tabelën gri 1 px e trashë * /)

Kufijtë e qelizës së titullit të secilës kolonë janë caktuar për elementin th:

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

Kufijtë e qelizave Trupat e tabelës janë vendosur për elementin td:

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

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

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

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

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

Kufijtë mund të vendosen pjesërisht:

/ * cakto një kufi të jashtëm gri 3 px për tabelën * / tabelën (kufiri-lart: 3 pikselë gri e ngurtë;) / * cakto një kufi gri 1 px për qelizën e trupit të tabelës * / td (kufiri-fund: 1px gri i ngurtë;)

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

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

E paracaktuar gjerësia dhe lartësia e tavolinës përcaktohet nga përmbajtja e qelizave të tij. Nëse gjerësia nuk është e specifikuar, atëherë ajo do të jetë e barabartë me gjerësinë e rreshtit (vijës) më të gjerë.

Gjerësia e tabelës dhe kolonës vendoseni duke përdorur veçorinë 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;) th (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 mbushje të sipërme dhe të poshtme tek elementët

... Në praktikë, ka raste kur është e nevojshme formatim special kolona, ​​e cila është e mundur në mënyrat e mëposhtme:

duke përdorur etiketën

Ju mund të vendosni sfondin për çdo numër kolonash;

duke përdorur tabelën td: fëmija i parë, tabela td: përzgjedhësi i fëmijës së fundit, 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), mund të stiloni çdo kolonë në tabelë.

Mund të lexoni më shumë rreth përzgjedhësve CSS.

5. Si të shtoni një titull në tabelë

Ju mund të shtoni një titull në një tabelë duke përdorur etiketën

, dhe duke përdorur veçorinë në anën e titullit, mund të vendoset përpara ose nën tabelë. Për shtrirje horizontale zbatohet teksti i kokës vetia e rreshtimit të tekstit... I trasheguar.

...

Tabela nr. 1

Kompania	Q1	Q2	Q3	Q4

titulli (në anën e titullit: fundi; rreshtimi i tekstit: djathtas; mbushja: 10 px 0; madhësia e shkronjave: 14 px;) Oriz. 2. Një shembull i paraqitjes së kokës nën tabelë

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

Si parazgjedhje, kufijtë e qelizave të tabelës ndahen nga një hapësirë ​​e vogël. Nëse vendosim kufirin-kolaps: kolaps për tabelën, atëherë hendeku do të hiqet. Prona është e trashëguar.

Sintaksë

Tabela (kufi-collapse: kolaps;)
Oriz. 3. Një shembull i tabelave me bashkim dhe ndarje të kufijve të qelizave

7. Si të rritet hapësira ndërmjet kufijve të qelizave

Duke përdorur veçorinë e ndarjes kufitare, mund të ndryshoni distancën midis kufijve të qelizave. Kjo pronë vlen për tabelën në tërësi. I trasheguar.

Sintaksë

Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 pikselë 20 pikselë;) Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 px;) Oriz. 4. Një shembull i tabelave me zbrazëtira të rritura ndërmjet kornizave të qelizave

8. Si të fshehni qelizat boshe të tabelës

Vetia me qeliza boshe fsheh ose shfaq qelizat boshe. Prek vetëm qelizat që nuk përmbajnë asnjë përmbajtje. Nëse një sfond është specifikuar për një qelizë dhe tabela (border-collapse: collapse;) është specifikuar për një tabelë, atëherë qeliza nuk do të fshihet. I trasheguar.

Kompania	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabelë (kufiri: 1 px solid # 69c; kolapsi i kufirit: veçohet; qelizat boshe: fsheh;) th, td (kufiri: 2 px solid # 69c;) Oriz. 5. Shembull i fshehjes qelizë boshe tabelat

9. Paraqitja e paraqitjes së tabelës duke përdorur veçorinë table-layout

Paraqitja e paraqitjes së tabelës përcaktohet nga një nga dy qasjet: plan urbanistik fiks ose paraqitje automatike. Nën paraqitjen në në këtë rast do të thotë se si gjerësia e tabelës shpërndahet midis gjerësisë së qelizave. Prona nuk është e trashëguar.

Sintaksë

Tabela (paraqitja e tabelës: fikse;)

10. Paraqitjet më të mira të tabelave

1. Minimalizëm horizontal

Tabelat horizontale janë tabela në të cilat teksti lexohet horizontalisht. Çdo entitet është një linjë e veçantë. Ju mund t'i stiloni tabelat si kjo në një stil minimalist duke vendosur një kufi me dy piksel nën titullin e 1-të.

Punonjës	Paga	Bonus	Mbikëqyrësi
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Eni
Joyce ming	$200	$35	Andi
James A. Pentel	$175	$25	Eni

tabela (familja e shkronjave: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; sfondi: i bardhë; gjerësia maksimale: 70%; gjerësia: 70%; kolapsi i kufirit: kolapsi; teksti -rreshtoj: majtas;) th (pesha e shkronjave: normale; ngjyra: # 039; kufiri-fund: 2px solid # 6678b1; mbushje: 10px 8px;) td (ngjyra: # 669; mbushje: 9px 8px; tranzicioni: .3 s lineare;) tr: hover td (ngjyra: # 6699ff;)

Në një numër i madh rreshtave, ky dizajn i tabelave i bën ato të vështira për t'u lexuar. Për të zgjidhur këtë problem, mund të shtoni një kufi me një piksel nën të gjithë elementët td.

Td (kufiri-fund: 1px solid #cccc; ngjyra: # 669; mbushje: 9px 8px; tranzicioni: .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 t'u lexuar tabelat me stil minimalist. Kur vendosni kursorin e miut mbi një qelizë, pjesa tjetër e qelizave të të njëjtit rresht theksohen në të njëjtën kohë, gjë që thjeshton procesin e mbajtjes së informacionit nëse tabelat kanë kolona të shumta.

Th (pesha e shkronjave: normale; ngjyra: # 039; mbushja: 10 px 15 px;) td (ngjyra: # 669; kufiri i sipërm: 1 px solid # e8edff; mbushja: 10 px 15 px;) tr: hover td (sfondi: # e8edff ;)

2. Minimalizëm 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ë paraqitura nga një kolonë. Ju mund t'i stiloni ato në një stil minimalist duke shtuar një hapësirë ​​që ndan kolonat.

Th (pesha e shkronjave: normale; kufiri i poshtëm: 2 px solid # 6678b1; kufiri djathtas: 30 px solid #fff; kufiri-majtas: 30 px solid #fff; ngjyra: # 039; mbushja: 8 px 2px;) td (kufiri- djathtas: 30 px solid #fff; kufiri majtas: 30 px solid #fff; ngjyra: # 669; mbushje: 12 px 2 px;)

3. Stili “Box”.

Stili më i besueshëm për dekorimin e tavolinave të të gjitha llojeve është i ashtuquajturi stil "kuti". Mjafton të marrësh një të mirë gamë ngjyrash, dhe më pas 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: 13 px; pesha e shkronjave: normale; sfondi: # b9c9fe; kufiri i sipërm: 4 px solid #aabcfe; kufiri i poshtëm: 1 px solid #fff; ngjyra: # 039; mbushja: 8 px;) td (sfondi : # e8edff; kufiri-fund: 1px solid #fff; ngjyra: # 669; kufiri-lart: 1px transparent; mbushja: 8px;) tr: hover td (sfondi: #ccddff;)

Pjesa më e vështirë është gjetja e skemës së ngjyrave që do të përzihet 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: 14 px; gjerësia maksimale: 70%; gjerësia: 70%; rreshtimi i tekstit: në qendër; kolapsi i kufirit: kolapsi ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: # e8edff; kufiri djathtas: 1px solid # 9baff1; kufiri- majtas: 1px solid # 9baff1; ngjyra: # 039; mbushje: 8 px;) td (sfondi: # e8edff; kufiri-djathtas: 1px solid #aabcfe; kufiri-majtas: 1px solid #aabcfe; ngjyra: # 669; mbushja: 8 px ;)

4. Zebra horizontale

Tabela Zebra duket mjaft tërheqëse dhe e dobishme. Ngjyra plotësuese e sfondit mund të shërbejë si një sinjal vizual që njerëzit të lexojnë tabelën.

Th (pesha e shkronjave: normale; ngjyra: # 039; mbushja: 10 px 15 px;) td (ngjyra: # 669; kufiri në krye: 1 px solid # e8edff; mbushja: 10 px 15 px;) tr: n-të-fëmija (2n) ( sfond: # e8edff;)

5. Stili i gazetës

Për të arritur të ashtuquajturin efekt gazete, mund të aplikoni kufij në elementët e tabelës dhe të luani me qelizat brenda. Një stil i lehtë, minimalist i gazetës mund të duket kështu: luani me skemën e ngjyrave, shtoni kufij, mbushje, prejardhje të ndryshme, dhe: efekti i rri pezull mbi një linjë.

Tabela (kufiri: 1px solid # 69c;) th (pesha e shkronjave: normale; ngjyra: # 039; kufiri-poshtë: 1px me pika # 69c; mbushja: 12px 17px;) td (ngjyra: # 669; mbushja: 7px 17px; ) tr: rri pezull td (sfondi: #ccddff;)

Tabela (kufiri: 1 px solid # 69c;) th (pesha e shkronjave: normale; ngjyra: # 039; mbushja: 10 px;) td (ngjyra: # 669; kufiri-lart: 1 px me pika #fff; mbushja: 10 px; sfondi: #ccddff;) tr: hover td (sfondi: # 99bcff;)

Tabela (kufiri: 1 px solid # 6cf;) th (pesha e shkronjave: normale; madhësia e shkronjave: 13 px; ngjyra: # 039; teksti-transformimi: shkronja të mëdha; kufiri-djathtas: 1px solid # 0865c2; kufiri-lart: 1px solid # 0865c2; kufiri-majtas: 1px solid # 0865c2; kufiri-poshtë: 1px solid #fff; mbushje: 20px;) td (ngjyra: # 669; kufiri-djathtas: 1px me pika # 6cf; mbushja: 10px 20px;)

6. Sfondi i tabelës

Nëse jeni duke kërkuar për një agjërim dhe mënyrë unike dizajn tavoline, zgjidhni imazh tërheqës ose një foto në lidhje me temën e tabelës dhe vendoseni si sfond të tabelës.

Jpg ") pa përsëritje; pozicioni i sfondit: 100% 55 px;) th (pesha e shkronjave: normale; ngjyra: # 339; mbushje: 10 px 12 px;) td (sfondi: url (" https: // sajti / imazhet / prapa..png "); sfondi: transparent;)

Të dhënat 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

, e cila është një enë me përmbajtjen e tabelës. përmbajtja tabelat HTML përshkruar rresht pas rreshti, çdo rresht fillon me një etiketë hapëse dhe përfundon me një etiketë mbyllëse .

Brenda etiketës

qelizat e tabelës janë të vendosura, të përfaqësuara me etiketa

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 një tabelë në një faqe interneti shfaqet pa kufi, për të shtuar një kufi në një tabelë, si të gjithë elementët e tjerë, të përdorur 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 pronë kufitare dhe për elementet krijon linjë e re... Më tej në fole dhe . Tabela, th, td (kufiri: 1px e zezë e fortë;) Provojeni " Tani si tabela ashtu edhe qelizat kanë kufij, ndërsa secila qelizë dhe tabelë kanë kufijtë e tyre. Si rezultat, midis kornizave u shfaq një hapësirë ​​boshe; vetia e ndarjes kufitare ju lejon të kontrolloni madhësinë e kësaj hapësire, e cila është vendosur për të gjithë tabelën. Me fjalë të tjera, ju nuk mund të kontrolloni boshllëqet midis qelizave të ndryshme individualisht. Edhe nëse i heqim boshllëqet midis qelizave duke përdorur vlerën 0 të veçorisë kufitare të hapësirës, ​​atëherë 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ë e paracaktuar. Qelizat janë hartuar në distancë e shkurtër veçmas, çdo qelizë ka kufirin e vet. kolaps: lidh 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 provo" Madhësia e tryezës Pas shtimit të kornizave 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;) Provojeni " Madhësia e tabelës 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 vendosur madhësive të kërkuara ose vetë tabela ose qelizat: Tabela (gjerësia: 70%;) th (lartësia: 50 px;) Provojeni " 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 është i rreshtuar majtas, duke përdorur veçorinë e rreshtimit të tekstit 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 për vetinë vertikale të rreshtimit: krye: teksti është rreshtuar në krye të qelizës mes: rreshton tekstin në qendër (parazgjedhja) fund: teksti është rreshtuar në fund të qelizës Emri Mbiemri Homeri Simpson Marge Simpson provo" Alternimi i ngjyrës së sfondit të rreshtave të tabelës Kur skanoni 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ë Lisa Simpson vajza provo" Shtimi i një atributi të klasës në çdo rresht të dytë është një detyrë e lodhshme. Pseudo-klasa e fëmijës së nëntë është shtuar në CSS3 për të trajtuar këtë çështje në një mënyrë alternative. Efekti i alternimit tani mund të arrihet ekskluzivisht duke përdorur CSS pa pasur nevojë të ndryshoni shënjimin HTML të dokumentit. Me pseudo-klasën: fëmija i nëntë është e mundur të zgjidhni të gjitha rreshtat tek ose çift të një tabele duke përdorur një nga fjalë kyçe: çift (çift) ose tek (tek): Tr: fëmija i nëntë (tek) (ngjyra e sfondit: # EAF2D3;) Provojeni " Ndrysho sfondin e linjës 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 linjat kur rri pezull mbi të me kursorin e miut. Kjo do të ndihmojë në nxjerrjen në pah të përmbajtjes së dëshiruar të tabelës dhe në përmirësimin e perceptimit vizual të të dhënave. Është shumë e lehtë të zbatohet ky efekt, për këtë ju duhet të shtoni: rri pezull pseudo-klasën në përzgjedhësin e rreshtit të tabelës dhe vendosni ngjyra e dëshiruar sfond: Tr: rri pezull (ngjyra e sfondit: # E0E0FF;) Provojeni " Shtrirja në qendër të tabelës Rreshtimi HTML një tabelë në qendër është e mundur vetëm nëse gjerësia e tabelës është më e vogël se gjerësia e saj elementi prind... Për të rreshtuar tabelën në qendër, duhet të përdorni vetinë e marzhit, duke i vendosur të paktën dy vlera: vlera e parë do të jetë përgjegjëse për mbushje e jashtme tabelat lart dhe poshtë, dhe e dyta është për shtrirjen automatike të qendrës: Tabela (diferenca: 10 px automatike;) Provojeni " 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 (diferenca: 10px automatike 30px;) është trupi i tryezës. Trupi përbëhet nga rreshta dhe kolona. Tabela plotësohet rresht pas rreshti. Çdo etiketë janë krijuar kolonat. Mund të krijohen kolona të shumta. Në këtë rast, ju duhet të mbani gjurmët e numrit të kolonave në çdo rresht. Për shembull, nëse rreshti i parë kishte 5 kolona, ​​atëherë rreshtat e mëposhtëm duhet të ketë 5 kolona. Përndryshe, tabela do të notojë. Është e mundur të kombinohen qelizat. Si të bëni një tabelë në html Le të japim një shembull, kodi html: Tabela shembull Kolona 1 Kolona 2 Kushtojini vëmendje qelizës ... Ne përdorim një speciale atribut colspan për të kombinuar qelizat horizontalisht. Vlera e saj numerike tregon numrin e kolonave që duhen kombinuar. Ekziston edhe një analog i këtij atributi: etiketa (kreu i tabelës), ku duhet të shkruani edhe colspan. Rezultati do të jetë i njëjtë. Por shpesh përdoret td e zakonshme. Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës. . Etiketoni atributet dhe vetitë Tek etiketa e hapjes ju mund të shkruani 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 rreshtuam tabelën në qendër align = "center". Ky atribut mund të zbatohet jo vetëm për një tabelë, por edhe për qelizat individuale të tabelës. ... Kështu, në qeliza të ndryshme rreshtimi do të jetë i ndryshëm. Për shembull , , , ose cols - vija shfaqet midis kolonave asnjë - të gjithë kufijtë janë të fshehur rows - kufiri vizatohet ndërmjet rreshtave të tabelës të krijuara përmes etiketës 12. Property width = "number" - vendos gjerësinë e tabelës: ose në pixel ose në përqindje. 13. Property class = "class_name" - mund të specifikoni emrin e klasës së cilës tabela i përket. 14. Property style = "styles" - stilet mund të vendosen individualisht për secilën tabelë. Tani është koha për të zhytur në tabelë 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ë ose vargje ... ... ... 2. Sfondi i pronës = "URL" - vendos foto sfondi... Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit. Shembull Tabela shembull Kolona 1 Kolona 2 Konvertuar në faqe në sa vijon: Në shembullin e konsideruar, tonë imazhi i sfondit ndodhet në dosjen img (e cila është në të njëjtin direktorium me faqen html), dhe imazhi quhet fon.gif. Vini re se në etiketën kemi shtuar style = "color: white;" ... Meqenëse sfondi është pothuajse i zi, në mënyrë që teksti të mos bashkohet me sfondin, ne e bëmë tekstin të bardhë. 3. Vetia bgcolor = "color" - vendos ngjyrën e sfondit të tabelës. Si ngjyrë, mund të zgjidhni cilindo nga të gjithë paletën (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 kufirin = "1", që do të thotë se gjerësia e kufirit është 1 piksel. 5. Property bordercolor = "color" - vendos ngjyrën e kufirit. Nëse kufiri = "0", atëherë nuk do të ketë kufi dhe ngjyra e kufirit nuk do të ketë kuptim. 6. Property cellpadding = "numër" - dhëmbëzimi nga korniza në përmbajtjen e qelizës në pixel. 7. Propertycellpacing = "numër" - distanca ndërmjet qelizave në pixel. 8. Property cols = "number" - numri i kolonave. Nëse nuk e specifikoni, shfletuesi do të përcaktojë vetë numrin e kolonave. I vetmi ndryshim është se specifikimi i këtij parametri ka të ngjarë të përshpejtojë 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 - kufiri rreth tryezës sipër - kufiri në krye të tabelës më poshtë - kufiri në fund të tabelës hsides - shtoni vetëm kufijtë horizontalë (sipër dhe fund të tabelës) vsides - vizatoni vetëm kufijtë vertikalë (majtas dhe djathtas 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. Property height = "number" - vendos lartësinë e tabelës: ose 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 në tabelë grupe - shfaqet linja midis grupeve që formohen nga etiketat . Atributet dhe vetitë 1. Property align = "parameter" - vendos shtrirjen e një qelize individuale në tabelë. 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. Property bordercolor = "color" - vendos ngjyrën e kufirit të qelizës. 5. Vetia char = "shkronjë" - vendos shkronjën nga e cila duhet të bëhet rreshtimi. Kuptimi atribut align duhet të vendoset në char. 6. Vetia colspan = "numër" - vendos numrin e qelizave horizontale për t'u kombinuar. 7. Property height = "number" - vendos lartësinë e tabelës: ose në pixel ose në përqindje. 8. Property width = "number" - vendos gjerësinë e tabelës: ose në pixel ose në përqindje. 9. Property rowspan = "number" - vendos numrin e qelizave vertikale të bashkuara. 10. Property valign = "parametër" - shtrirje vertikale e përmbajtjes së qelizës. sipër - rreshton përmbajtjen e qelizës në krye të rreshtit shtrirje mes - mes fund - rreshtoni në fund bazë - shtrirje bazë Shënim 1 Për tag ... Parametrat për një etiketë brenda saj Si të parandaloni që qelizat e tabelës të ngjiten së bashku Në rastin e përdorimit të kufirit (kufirit të qelizave) dhe mbushjes 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ë regjistroni tabelën e kolapsit të kufirit: palosni në fletën e stilit: ... I dashur lexues, tani keni mësuar shumë më tepër rreth etiketa html tabela. Tani ju këshilloj të kaloni në mësimin tjetër. Artikujt kryesorë të lidhur Programet më të mira për krijimin e muzikës bazë dhe elektronike Struktura e përgjithshme e skedarëve me temë Parimet themelore të përdorimit të ngjyrave në web design Kategoritë: Programet Siguria Windows 10 Hekuri Windows 8 Në kontakt me Gabimet © 2021 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.

Kolona 1	Kolona 2
Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë
dhe	... Nuk rekomandohet rregullimi i lartësisë duke përdorur veçorinë e lartësisë. Th, td (mbushje: 10px 15px;) 3. Si të vendosni sfondin e tabelës E paracaktuar sfond tavoline dhe qelizat janë transparente. Nëse faqja ose blloku që përmban tabelën ka një sfond, atëherë ai do të shkëlqejë nëpër tabelë. 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 qelizat mbivendosen. Sfondi për tabelën në tërësi dhe qelizat e saj mund të jetë: mbush, , . 4. Kolonat e tabelës Model Tabelat CSS fokusohet kryesisht në vargjet (rreshta) të formuara duke përdorur një etiketë