), në të cilën tabela ishte e përshkruar me karaktere ASCII. Por kjo formë e paraqitjes së tabelës nuk mjaftonte Cilesi e larte dhe dallohej nga stili i përgjithshëm i dokumentit. Pas prezantimit të tabelave në HTML, Webmasters tani nuk kishin vetëm një mjet për vendosjen e tekstit dhe të dhënave numerike, por një mjet të fuqishëm dizajni për vendosjen në në vendin e duhur ekran i imazheve grafike dhe tekstit.Krijimi i tabelave në HTML
Për përshkrim tabelat përdoret etiketa<ТАВLЕ>. Etiketë<ТАВLЕ>, si shumë të tjerë, përkthen automatikisht rreshtin para dhe pas tabelës.
Krijimi i një rreshti - etikete tabele<ТR>
Etiketë<ТR>(Rreshti i tabelës, rreshti i tabelës) krijon një rresht tabele. I gjithë teksti, etiketat dhe atributet e tjera që duhet të vendosen në një rresht duhet të vendosen midis etiketave<ТR> .
Përcaktimi i qelizave të tabelës - etiketa<ТD>
Qelizat me të dhëna zakonisht vendosen brenda një rreshti tabele. Çdo qelizë që përmban tekst ose imazh duhet të rrethohet me etiketa<ТD>. Numri i etiketave<ТD>në një rresht përcakton numrin e qelizave (të hapura)
Tabela
Nëse një tabelë ka dy etiketa TR, atëherë ajo ka dy rreshta. Nëse janë tre në linjë Etiketa TD, pastaj në të tre kolona.
Oriz. 4.1.Titujt e kolonave të tabelës - etiketa<ТН>
Titujt për kolonat dhe rreshtat e tabelës vendosen duke përdorur etiketën e kokës<ТН>(Table Header, titulli i tabelës). Këto etiketa janë të ngjashme<ТD>. Dallimi është se teksti është i mbyllur midis etiketave<ТН>, shkruhet automatikisht me shkronja të zeza dhe vendoset në mes të qelizës si parazgjedhje. Mund ta çcentroni tekstin dhe ta rreshtoni tekstin majtas ose djathtas. Nëse përdorni<ТD>me etiketë<В>dhe atribut<АLIGN=center>, teksti do të duket gjithashtu si titull. Sidoqoftë, kini parasysh se jo të gjithë shfletuesit mbështesin në tabela font të guximshëm, kështu që është më mirë të vendosni titujt e tabelave duke përdorur<ТН> .
| Kreu është i përqendruar si parazgjedhje | Titulli mund të bashkojë kolonat | |
|---|---|---|
| Kreu mund të vendoset para kolonave | Tekst ose të dhëna | Tekst ose të dhëna |
| Kreu mund të bashkojë linjat | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | |
| Tekst ose të dhëna | Tekst ose të dhëna | |
Përdorimi i titujve të tabelës - etiketa<САРТIОN>
Etiketë
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
Atributi NOWRAP
Në mënyrë tipike, çdo tekst që nuk përshtatet në një rresht të një qelize tabele shkon në rreshti tjetër. Megjithatë, kur përdorni atributin NOWRAP me etiketa<ТН>ose<ТD>Gjatësia e qelizës zgjerohet në mënyrë që teksti që gjendet brenda saj të përshtatet në një rresht.
Atributi COLSPAN
Etiketat<ТD>Dhe<ТН>modifikuar duke përdorur atributin COLSPAN (Hapësira e kolonës, lidhja e kolonës). Nëse dëshironi të bëni një qelizë më të gjerë se sipër ose fund, mund të përdorni atributin COLSPAN për ta shtrirë atë mbi çdo numër qelizash të rregullta.
| Nëse dëshironi të bëni ndonjë qelizë më të gjerë se sipër ose fund, | mund të përdorni atributin COLSPAN=2, |
| për ta shtrirë atë mbi çdo numër qelizash të rregullta. | |
Atributi ROWSPAN
Atributi ROWSPAN përdoret në etiketa<ТD>Dhe<ТН>, është i ngjashëm me atributin COLSPAN=, vetëm ai specifikon numrin e linjave mbi të cilat shtrihet qeliza. Nëse keni specifikuar një numër më të madh se një në atributin ROWSPAN=s, atëherë numri përkatës i rreshtave duhet të jetë në qelizën që shtrihet. Nuk mund të vendoset në fund të tabelës.
Atributi WIDTH
Atributi WIDTH përdoret në dy raste. Mund ta vendosni në një etiketë<ТАВLЕ>për të vendosur gjerësinë e të gjithë tabelës, ose mund të përdoret në etiketa<ТD>ose<ТН>për të vendosur gjerësinë e një qelize ose grupi qelizash. Gjerësia mund të specifikohet në piksel ose në përqindje. Për shembull, nëse vendosni në etiketë<ТАВLЕ WIDTH=250>, do të merrni një tabelë me gjerësi 250 px pavarësisht nga madhësia e faqes në monitor. Kur vendosni WIDТН=50% në etiketë<ТАВLЕ>tabela do të zërë gjysmën e gjerësisë së faqes në çdo madhësi imazhi në ekran. Pra, kur specifikoni gjerësinë e tabelës në përqindje, mbani në mend se nëse përdoruesi ka një pamje të ngushtë, faqja juaj mund të duket pak e çuditshme. Nëse jeni duke përdorur piksele dhe tabela është më e gjerë se zona e shikimit, një shirit lëvizës do të shfaqet në fund për të lëvizur majtas dhe djathtas përgjatë faqes. Në varësi të detyrave në fjalë, secila metodë e vendosjes së gjerësisë së tabelës mund të jetë e dobishme.
| Teksti ose të dhënat - gjerësia 100% |
| Teksti ose të dhënat - gjerësia 50% |
| Teksti ose të dhënat - 200 piksele të gjera |
| Teksti ose të dhënat - 100 piksele të gjera |
Në këtë artikull do të flasim për krijimin e tabelave në HTML. Ju mund të krijoni një tabelë në HTML absolutisht të çdo madhësie dhe forme: çdo numër kolonash dhe rreshtash, si dhe dizajne të ndryshme. Ato janë shumë të dobishme kur krijohen faqe uebsajti kur ka një strukturë tabelare.
Për shembull, faqja juaj përbëhet nga tre kolona dhe dy rreshta. Mund të kombinojmë rreshtin e parë me 3 kolona në një të përbashkët, ku do të vendosim emrin e faqes dhe logon tonë; në rreshtin e dytë në kolonën e parë mund të vendosim menuja e majtë, në kolonën e dytë teksti i faqes ose teksti faqe specifike, mirë, në kolonën e fundit menuja e djathtë. Të hutuar? :) Po, këtu është një shembull i thjeshtë: kjo faqe që po lexoni tani. Është bërë gjithashtu pikërisht sipas këtij parimi. Unë mendoj se është më mirë të kalojmë në praktikë dhe të shohim qartë me shembuj se si të zbatojmë të gjitha këto.
Për të krijuar një tabelë, fillimisht na duhen etiketat
Le të krijojmë një tavolinë e thjeshtë, e cila përbëhet nga 3 kolona. Kodi HTML i tabelës:
| Kolona 1 | Kolona 2 | Kolona 3 |
Në faqen në shfletues, tabela do të duket si kjo:
Si parazgjedhje, shfletuesi shfaq një tabelë me një kufi. Për të fshehur kufirin e tabelës, do t'ju duhet atributi i etiketës së kufirit TABLE. Shembull i një tabele pa kufi:
| Kolona 1 | Kolona 2 | Kolona 3 |
Në faqe do të shohim tabelën tonë pa kornizë:
Atributi kufitar ndryshon madhësinë e vetëm kufirit të jashtëm të tabelës sonë. Një vlerë prej 0, siç e kuptoni, e bën atë të padukshëm, dhe një vlerë nga 1 në 10 përcakton trashësinë e saj. Le të marrim një shembull të një tabele me kornizën 6:
| Kolona 1 | Kolona 2 | Kolona 3 |
Në dalje të faqes marrim tabelën e mëposhtme:
Duke përdorur atributin bordercolor, mund të vendosni ngjyrën e kufirit tonë në tabelë. Aktiv Shembull HTML Unë do t'ju tregoj një tabelë me një kornizë jeshile dhe një trashësi prej 4:
| Kolona 1 | Kolona 2 | Kolona 3 |
Ne marrim këtë:
Siç mund ta shihni, midis qelizave ka distancë e shkurtër. Për ta hequr qafe atë, ose anasjelltas, për të rritur distancën, atributi i tabelës së hapësirës së qelizave do të na ndihmojë. Shembull HTML i rritjes së zhgënjimit midis qelizave në një tabelë:
| Kolona 1 | Kolona 2 | Kolona 3 |
Shfletuesi ynë do të shfaqë tabelën e mëposhtme:
Për të ndryshuar hapësirën midis tekstit dhe kufirit të qelizës, përdorni atributin e tabelës cellpadding. Kodi HTML për atributin cellpadding duke përdorur një shembull:
Tabela që rezulton në shfletues:
Për të kombinuar qelizat në tabela, përdoren atributet e etiketës TD:
- colspan - kombinimi i qelizave horizontalisht;
- shtrirja e rreshtave - duke kombinuar qelizat vertikalisht.
Është mjaft e vështirë të imagjinohet, kështu që unë do të jap një shembull të thjeshtë kodi HTML:
| Qeliza 1 | Qeliza 2 | |
| Qeliza 3 | Qeliza 4 | |
Në shfletues marrim tabelën e mëposhtme:
Me qelizat, provojeni vetë duke përdorur të njëjtin parim. Ju mund të rreshtoni tabelën dhe tekstin në qeliza duke përdorur atribut align. Vlerat mund të jenë të njohura për ne: qendër (në qendër), majtas (përgjatë skajit të majtë) dhe djathtas (përgjatë skajit të djathtë). Le ta rreshtojmë tabelën në të djathtë:
| Kolona 1 | Kolona 2 | Kolona 3 |
Në shfletuesin:
Qeliza 1 Qeliza 2 Qeliza 3
Për të lidhur përmbajtjen e qelizave vertikalisht, na duhet një atribut valign për qelizën. Unë do të jap kuptimin e saj:
- bazë - përgjatë vijës bazë;
- fund - përgjatë skajit të poshtëm;
- mes - në mes (vlera e parazgjedhur);
- lartë - përgjatë skajit të sipërm.
Mundohuni të bëni vetë një shembull të kodit HTML, mendoj se kjo detyrë është e dobishme në këtë fazë të mësimit :)
Më pas, kur flasim për atributet e tabelës, mund të kujtoni atributin bgcolor. Përcakton ngjyrën e sfondit të tabelës ose qelizës. Nëse dëshironi të futni një fotografi në sfondin e një tabele ose qelize, përdorni atributin e sfondit, në vlerën e të cilit shkruani shtegun për në figurë
Meqë ra fjala, ju mund të futni jo vetëm tekst ose foto në një tabelë, por edhe një tabelë tjetër, gjë që e bën përdorimin e tabelave një armë shumë të dobishme për të zgjidhur sa më shumë. detyra komplekse. Siç thashë tashmë, këtë tabelë bëhet duke përdorur metodën tabelare.
Unë mendoj se ky artikull do t'ju ndihmojë të krijoni tabelën tuaj të parë apo edhe faqen e parë të një faqe interneti, dhe kjo përfundon artikullin mbi krijimin e tabelave në HTML. në vazhdim do të flasim META etiketat, e cila nuk është më pak e rëndësishme se tabelat.
Data e publikimit: 15 maj 2012 shërben për të krijuar një tabelë.Atributet:
gjerësia - gjerësia e tabelës në piksel ose % në lidhje me gjerësinë e dritares së shfletuesit.
lartësi - lartësia e tabelës në piksel ose % në lidhje me gjerësinë e dritares së shfletuesit (lartësia zakonisht llogaritet automatikisht, kështu që ndryshimi i saj nuk rekomandohet).
align - shtrirje tavoline.
majtas - rreshtoni tabelën në të majtë.
djathtas - rreshtoni tabelën në të djathtë.
qendër - rreshtoni tabelën në qendër.
kufiri - trashësia e kufirit të tabelës në piksel.
Hapësira e qelizave - distanca midis qelizave ngjitur në piksel (parazgjedhja = 2).
cellpadding - distanca midis përmbajtjes së qelizës dhe kufirit të saj në pixel (parazgjedhja = 1).
bgcolor - ngjyrë e sfondit tabelat.
sfond - imazhi i sfondit për tavolinë.
bordercolor - ngjyra e të gjitha linjave të kufirit të tabelës.
Enë
Enë
Enë
Atributet
gjerësia - gjerësia e qelizës në piksel ose % në lidhje me gjerësinë e dritares së shfletuesit (për
lartësi - lartësia e qelizës në piksel ose % në lidhje me gjerësinë e dritares së shfletuesit (për
align - shtrirje në qelizë.
majtas - rreshtoni qelizën në të majtë.
djathtas - rreshtoni qelizën në të djathtë.
qendër - shtrirje qendrore në qelizë.
valign - shtrirje vertikale përmbajtjen e qelizave.
lart - rreshtoni në skajin e sipërm të qelizës.
fund - shtrirje në skajin e poshtëm të qelizës.
mes - shtrirje në mes të qelizës.
bgcolor - ngjyra e sfondit të qelizës.
sfond - imazh i sfondit për qelizën.
bordercolor - ngjyra e të gjitha linjave të kufirit të qelizës.
colspan - numri i qelizave që do të bashkohen me kolona (për
shtrirja e rreshtave - numri i qelizave që do të bashkohen sipas rreshtit (për
Ky kod:
| Zag 1 | Zag 2 | Zag 3 |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Do të japë rezultatin e mëposhtëm.
Detyrë
Krijoni një tabelë dhe specifikoni parametrat e saj (kufijtë dhe distancën midis qelizave) përmes stileve.
Zgjidhje
Një tabelë përbëhet nga rreshta dhe kolona qelizash që mund të përmbajnë tekst dhe fotografi. Për të shtuar një tabelë në një faqe interneti, përdorni etiketën
| . Tabela duhet të përmbajë të paktën një qelizë (shembulli 1). Lejohet në vend të etiketës | përdorni etiketën | . Teksti në një qelizë të stiluar me një etiketë | , shfaqur nga fonti i shfletuesit stil të guximshëm dhe është rreshtuar në qendër të qelizës. Përndryshe, ndryshimet midis qelizave krijohen përmes etiketave | Dhe | Nr.
Shembulli 1: Krijimi i një tabele HTML5 IE Cr Op Sa Fx
Rendi i qelizave dhe pamja e tyre është paraqitur në Fig. 1. Oriz. 1. Rezultati i krijimit të një tabele me katër qeliza atributi i etiketës kufitare
Një tabelë me fushat dhe distancën midis qelizave është paraqitur në Fig. 2. Një rezultat i ngjashëm mund të arrihet duke përdorur një kornizë të bardhë rreth qelizave.
Oriz. 2. Fushat në qelizat e tabelës U bë popullor, dizajnerët e uebit kryesisht përdorën metodën e paraqitjes së tabelës 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, hapjen dhe mbylljen e tavolinës
Qëllimi i tabelave në htmlMësimi në tavolina ë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ë specifikoni 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 web design! 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.Me këtë shënim, le të kalojmë drejtpërdrejt te atributet që e bëjnë tryezën të bukur... Karakteristikat dhe parametrat e tabelave html: dhëmbëzimi, gjerësia, ngjyra e sfondit, kufiri (korniza)U etiketë tavoline ka atributet e mëposhtme:gjerësia- gjerësia e tavolinës. mund të jetë në piksel ose % e gjerësisë së ekranit.
|
|---|
