Si të futni foto në tabelën html. Modaliteti pothuajse standard

Tabelat janë një nga elementët më të rëndësishëm por kompleks që duhet të jenë të pranishëm në faqet e internetit. Me ndihmën e tyre, është e përshtatshme të paraqisni informacione të rëndësishme dhe të dobishme në një formë mjaft koncize. Sigurisht, shumica e redaktorëve në shabllone që punojnë në motorë të ndryshëm ju lejojnë të futni automatikisht një tabelë në një faqe të një siti ose një publikimi të veçantë, por çka nëse dizajni i një burimi në internet, faqet e tij krijohen nga e para? Atëherë një magjistar fillestar mund të përballet me një problem: si ta bëjmë atë. Le të kuptojmë se si ta krijojmë këtë element saktë dhe shpejt.

Zgjedhja e një redaktuesi

Para së gjithash, duke filluar të krijoni një tabelë, duhet të vendosni për redaktorin në të cilin do të punoni. Sigurisht, mënyra më e lehtë është të zgjidhni programin në të cilin krijoni kodin kryesor të faqes. Por është më mirë të përdorni një fletore të mirë të vjetër për këto qëllime.

Ju mund të pyesni pse ta ndërlikoni jetën tuaj, sepse nëse bëni gjithçka menjëherë në redaktues, atëherë rezultati gjithashtu mund të shihet menjëherë, dhe gjithashtu mund të përdorni sugjerimet e programit.

Po, kjo është e vërtetë, por duke krijuar një tabelë nga e para, jo vetëm që do të jeni në gjendje të studioni plotësisht vetë parimin e krijimit të saj, por edhe të parandaloni gabimet e bezdisshme dhe gabimet në kodin kryesor. Ndonjëherë ndodh që kursori të zhvendoset aksidentalisht poshtë, dhe në procesin e shkrimit një gabim zvarritet në kod, i cili ndonjëherë është i vështirë për t'u gjetur. Pasi të krijoni një tabelë në një bllok shënimesh, mund të kopjoni shifrën e saj dhe ta ngjisni kudo që dëshironi.

Algoritmi për krijimin e një tabele

Së pari, le të bashkojmë një algoritëm të shkurtër se si të bëjmë një tabelë në HTML. Kjo është në mënyrë që të kuptoni sekuencën e secilit hap. Më pas do të analizojmë saktësisht se si të realizojmë secilën nga pikat.

Le të fillojmë me hapat përgatitorë.

1. Vizatoni një imazh skematik të tabelës në një fletë letre.

2. Ne numërojmë numrin e rreshtave dhe qelizave. Nëse numri i këtyre të fundit është i ndryshëm, ne numërojmë për secilën rresht veç e veç.

3. Përcaktoni numrin e qelizave të kokës në rresht (për shembull, qelizat "Nr", "Emri", etj.).

4. Shkruani parametrat kryesorë të tabelës - ngjyra, lartësia dhe gjerësia, rreshtimi i tekstit - në përgjithësi, çfarëdo që mendoni se është e nevojshme.

1. Futni etiketat e tabelës.

2. Futni etiketat e rreshtave bazuar në numrin që ju nevojitet.

3. Në rreshta, futni etiketat e qelizave (të zakonshme dhe të mëdha), gjithashtu bazuar në numrin që është shkruar në letrën tuaj.

4. Vendosni parametrat për tabelën në tërësi.

5. Nëse është e nevojshme, vendosni tregues për qelizat individuale.

6. Ne mbushim qelizat tona me tekst.

Krijo një tabelë

Pra, ju keni zgjedhur një redaktues, tani le të kuptojmë se si të krijojmë një tabelë në HTML. Etiketa me të cilën futet tabela në kodin e faqes (

), është çiftuar, domethënë, ndërtimi ynë fillon me këtë etiketë dhe përfundon me.

Pasi kemi futur etiketat e tabelës, ne vazhdojmë të krijojmë rreshta dhe qeliza.

Menjëherë, vërejmë se edhe këta elementë janë çiftuar. Etiketë specifikon vargjet, dhe - qelizat.

Për qelizat e kokës, përdorni elementin e çiftuar .

Siç u përmend tashmë, hapi i parë është të hartoni linjat, pastaj të shkruani qelizat në to. Për të mos u ngatërruar, ju këshillojmë që të vendosni një ose dy rreshta midis secilit bllok, ose të shkruani një bllok të ri elementësh duke përdorur tastin "Tab".

Si mund të duket? Kështu:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  P / p Nr.	Mbiemri
  1	;	Ivanov

  .

Siç mund ta shihni, nuk ka asgjë të komplikuar në lidhje me të. Gjëja kryesore është të mos ngatërroheni në numrin e linjave dhe qelizave. Përndryshe, tabela mund të anohet.

Ne kemi diskutuar krijimin e një tabele në HTML, tani mund të vazhdojmë te parametrat e vetë matricës dhe rreshtave dhe qelizave të saj.

Parametrat e tabelës

Kur shkruhet kodi, duhet t'i kushtoni vëmendje pikave të mëposhtme: shtrirjes në kufij, sfond, tekst, etj.

Parametrat e tabelës vendosen në etiketë

... Kjo perfshin:

1. Kufiri - gjerësia e kufijve. Cakto si një numër të plotë. Si parazgjedhje, kufijtë e çdo tabele janë zero.

2. Bordercolor - ngjyra e kufirit. Mund të vendoset si një kod heksadecimal ngjyrash (# 00008B), dhe emri i tij në anglisht (E errët Blu). Është gjithmonë gri si parazgjedhje.

3. Bgcolor - Vendoset gjithashtu me kod ose emër.

4. Align - rreshtimi i tekstit pas tabelës. Parazgjedhja është e rreshtuar majtas. Ekzistojnë opsionet e mëposhtme për këtë parametër:

• majtas - mbështilleni në të djathtë;
• djathtas - mbështjellje në të majtë;
• qendër - shfaq tabelën në qendër pa mbështjellje.

5. Gjerësia dhe lartësia - gjerësia dhe lartësia e tabelës. Mund të vendoset si në pixel ashtu edhe në përqindje (në lidhje me madhësinë e dritares së shfletuesit).

Duke përshkruar këtë apo atë tregues, duhet t'i kushtoni vëmendje të veçantë dizajnit. Parametri duhet të ndiqet nga një shenjë "e barabartë", e ndjekur nga vlera e specifikuar në thonjëza.

Sa i përket ngjyrës së tekstit, ajo është stiluar në të njëjtën mënyrë si teksti normal në formatin HTML.

Një shembull i dizajnit të tavolinës:

;

;

;

;

;

;

;

;

P / p Nr.	Mbiemri
1	;	Ivanov

.

Parametrat e vargut

Pra, ne kemi kuptuar tashmë se si të bëjmë një tabelë në HTML dhe të regjistrojmë parametrat e saj kryesorë. Por çfarë nëse duhet të theksojmë një rresht? A duhet të stilohet ndryshe nga teksti kryesor i tabelës?

Parametrat e vargut shkruhen në etiketë saktësisht e njëjtë me të dhënat e tabelës. Variablat e mëposhtëm mund të vendosen për një varg:

1. Border, bordercolor dhe bgcolor tashmë të njohura për ju.

2. Align - rreshtimi i tekstit në një rresht. Mund të jetë majtas, qendra dhe djathtas.

3. Valign - kjo etiketë e rreshton tekstin vertikalisht. Ai merr vlerat e mëposhtme:

• lart - teksti është rreshtuar në kufirin e sipërm;
• mes - në qendër;
• fund - përgjatë kufirit të poshtëm.

Një shembull i formatimit të linjës:

• ;
• P / p Nr.;
• Mbiemri;
• .

Parametrat e qelizave

Dhe gjëja e fundit që ia vlen t'i kushtohet vëmendje për ata që duan të dinë se si të krijojnë një tabelë në HTML janë parametrat e qelizave individuale, si normale ashtu edhe me kapital. Në thelb, gjithçka bëhet në të njëjtën mënyrë si për një tabelë ose rresht. E vetmja gjë është që shtohen edhe dy elementë të rëndësishëm:

1. Colspan - ky parametër specifikon numrin e kolonave që qeliza mund të shtrihet.

2. Hapësira e rreshtave - tashmë tregon numrin e rreshtave që zë kjo qelizë.

Meqenëse dizajni nuk ndryshon nga shkrimi i një rreshti, ne nuk do të japim një shembull të kodit.

konkluzionet

Bërja e një tavoline nuk është aq e vështirë sa mund të duket në shikim të parë. Gjëja kryesore kur shkruani kodin e saj është këmbëngulja dhe vëmendja.

Sa i përket mënyrës se si të futni një tabelë në HTML, thjesht duhet të kopjoni dhe ngjisni shifrën e saj pikërisht në vendin e faqes tuaj ku mendoni se duhet të jetë.

Mos ngurroni të eksperimentoni dhe së shpejti do të zotëroni teknikën e krijimit të tabelave në përsosmëri. Paç fat!

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

... Ky element shërben si një enë për elementet që përcaktojnë përmbajtjen e tabelës. Çdo tabelë përbëhet nga rreshta dhe qeliza, të cilat vendosen në përputhje me rrethanat duke përdorur etiketat dhe brenda

... Tabela duhet të përmbajë të paktën një qelizë (shembulli 1). Lejohet në vend të etiketës	përdor etiketën	... Teksti në një qelizë të zbukuruar me një etiketë	, shfaqet me shkronja të zeza nga shfletuesi dhe rreshtuar në qendër të qelizës. Përndryshe, ndryshimet midis qelizave krijohen përmes etiketave	dhe	nr. Shembull 1. Krijimi i një tabele HTML5 IE Cr Op Sa Fx Qeliza 1 Qeliza 2 Qeliza 3 Qeliza 4 Rendi i qelizave dhe pamja e tyre është paraqitur në Fig. një. Oriz. 1. Rezultati i krijimit të një tabele me katër qeliza Atributi kufitar i etiketës lejohet të shtohet vetëm me një vlerë boshe ( ) ose e barabartë me 1. Të gjitha vlerat e tjera nuk janë vërtetuar. Vetia e stilit të mbushjes përdoret për të kontrolluar kufijtë brenda qelizave, e cila shtohet në përzgjedhësin td. Hapësira ndërmjet qelizave ndryshohet nga vetia e ndarjes kufitare (shembulli 2) e shtuar në përzgjedhësin e tabelës, shfletuesi IE e kupton atë vetëm që nga versioni 8.0. Shembulli 2. Fushat brenda qelizave HTML5 CSS 2.1 IE Cr Op Sa Fx Kreu 1 Kreu 2 Qeliza 3 Qeliza 4 Një tabelë me fusha dhe hapësira midis qelizave është paraqitur në Fig. 2. Një rezultat i ngjashëm mund të arrihet me një kufi të bardhë rreth qelizave. Oriz. 2. Fushat në qelizat e tabelës Përshëndetje të dashur lexues të blogut! Shpesh në faqet e internetit, përveç tekstit dhe fotografive, bëhet e nevojshme të shfaqen të dhëna të ndryshme në formë tabelash. Po, kjo është e kuptueshme, një tabelë është mënyra më e përshtatshme për të paraqitur një sasi të madhe informacioni. Prandaj, lind pyetja "Si të futni tabela në html?"... Në këtë artikull do t'ju përgjigjem kësaj pyetjeje dhe do t'ju jap shumë shembuj të tabelave të ndryshme html. Si të krijoni një tabelë duke përdorur HTML Tabelat HTML krijohen në katër hapa. 1. Në hapin e parë në kodin html duke përdorur të çiftuar etiketë tregoni shfletuesit që një tabelë është futur në faqen e internetit: ... Elementi i tabelës është një element në nivel blloku i një faqeje interneti. Prandaj, tabela shfaqet gjithmonë në një vijë të re, të prerë vertikalisht nga elementët ngjitur, kështu që nuk ka nevojë ta vendosni atë në një paragraf. 2. Në hapin e dytë, ne formojmë vargjet tabelat duke vendosur etiketa të çiftuara

... Çdo element krijon një linjë të veçantë:

3. Më tej, në hapin e tretë, ne formojmë qelizë tabelat duke përdorur etiketa të çiftuara dhe që përshtaten brenda elementit ... Etiketë krijon e zakonshme qelizë, dhe qelizë drejtimi, d.m.th. kreu i kolonës përkatëse:

4. Epo, në hapin e fundit, ne vendosim brenda elementeve dhe përmbajtjen e qelizave. Kodi HTML për futjen e një tabele në një faqe interneti duket diçka si kjo:

Kolona 1	Kolona 2	Kolona 3
Qeliza 1-1	Qeliza 1-2	Qeliza 1-3
Qeliza 2-1	Qeliza 2-2	Qeliza 2-3

Kjo do t'ju ndihmojë të rregulloni mirë shfaqjen e kufijve. Me, mund të ndryshoni trashësinë dhe ngjyrën e kornizave dhe të ndryshoni llojin e kufijve.

Teksti që duhet të vendoset brenda qelizave është opsional, por nëse teksti është i madh, mund ta ndani në paragrafë duke përdorur etiketën

Nëse keni nevojë të dekoroni disi tekstin e futur, mund ta përdorni.

Përveç tekstit, ne mund të vendosim fotografi në qeliza duke përdorur etiketën :

Një tabelë tjetër mund të veprojë edhe si përmbajtje e qelizës. Në këtë rast, krijimi i një tabele të mbivendosur nuk ndryshon nga krijimi i një tabele të rregullt. Vetëm midis etiketave dhe etiketat janë futur

dhe, dhe rreshtat dhe qelizat futen në të.

Ka disa rregulla që duhen mbajtur parasysh kur krijoni tabela:

• vetëm etiketa përdoret për të krijuar tabelën ;
  etiketë
  mund të jetë vetëm brenda një etikete ;
  etiketa
  , çdo përmbajtje tjetër etikete injoruar nga shfletuesi;
  Përmbajtja e tabelës (teksti ose fotografia) mund të jetë vetëm në etiketa

  , që i jep tabelës një titull. Teksti i titullit vendoset brenda kësaj etikete dhe ai duhet të jetë brenda etiketës ... Dhe nuk ka rëndësi se ku vendoset etiketa në kodin html të tabelës ... Për më tepër, lejohet të përdoret jo më shumë se një element. brenda një tabele, dhe duhet të futet në kodin html menjëherë pas etiketës

  , shfletuesi do të shfaqë përsëri titullin sipër tabelës dhe do ta përqendrojë atë. Por zakonisht etiketa

  vendosur menjëherë pas etiketës hapëse :

  Kjo është një tryezë

  Qeliza 1.1	Qeliza 1.2
Qeliza 2.1	Qeliza 2.2

  Shfaq:

  Seksionet e tabelës

  Tabela html mund të ndahet logjikisht në pjesë - seksione. Ekzistojnë tre lloje të seksioneve në total:

  • seksioni i kokës, në të cilën vendosen qelizat e kokës, të cilat formojnë kokën e tabelës;
  • seksioni i trupit, në të cilat ndodhen qelizat me të dhëna bazë;
  • seksioni i përfundimit, në të cilën vendosen qelizat me totalet.

  Seksioni i kokës së tabelës formohet duke përdorur një etiketë çifti

  .

  Seksioni i trupit është krijuar me një etiketë të çiftuar

  ... Një tabelë html mund të përmbajë disa seksione të trupit, gjë që ju lejon të krijoni blloqe strukturore në të cilat mund të aplikohen stilet uniforme të dizajnit.

  Seksioni i përfundimit formohet nga një etiketë e çiftuar

  dhe brenda një kontejneri mund të jetë vetëm një.

  Të gjitha këto etiketa të çiftuara duhet të përmbajnë etiketa

  që formojnë linja që lidhen me seksionet përkatëse:

  Kolona 1	Kolona 2	Kolona 3
Qeliza 1.1	Qeliza 1.2	Qeliza 1.3
Qeliza 2.1	Qeliza 2.2	Qeliza 2.3
Rezultati 1	Rezultati 2	Rezultati 3

  Lidhni qelizat e tabelës

  Mbetet të tregojmë për tiparin më të rëndësishëm të tabelave - duke kombinuar qelizat. Atributet përdoren për të kombinuar disa qeliza në një colspan dhe shtrirja e rreshtave etiketa

  dhe	mund të jetë vetëm brenda një etikete
  dhe	; qelizat e tabelës duhet të kenë të paktën një përmbajtje, përndryshe shfletuesi mund të mos i shfaqë ato fare, por nëse disa qeliza duhet të jenë bosh, atëherë zakonisht vendoset një hapësirë ​​pa ndërprerje (HTML literale); tabela i referohet elementeve të bllokut të një faqe interneti; madhësitë e tabelës dhe qelizat e saj varen nga përmbajtja, d.m.th. tavolina shtrihet në gjerësi dhe lartësi në mënyrë që gjithçka të përshtatet; bëhet një ndarje e vogël midis kufijve të qelizave individuale dhe midis kufirit të secilës qelizë dhe përmbajtjes së saj; teksti në qelizat e kokës (elementi i th) shfaqet me shkronja të zeza dhe në qendër; kufijtë rreth tabelës dhe qelizat e saj nuk vizatohen si parazgjedhje. Kreu i tabelës Le të fillojmë me një etiketë të çiftuar
  dhe	... Atributi colspan specifikon numrin e qelizave që janë bashkuar horizontalisht, dhe shtrirja e rreshtit është vertikalisht: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Shembull rezultat: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Kur lidhni qelizat, është e rëndësishme të kontrolloni numrin e qelizave në çdo rresht në mënyrë që të mos ketë gabime. Pra, ndërtimi	zëvendëson dy qeliza, kështu që duhet të ketë dy etiketa në rreshtin tjetër		, ose i njëjti ndërtim! Nëse numri i qelizave në të gjitha rreshtat nuk përputhet, atëherë do të shfaqen qeliza shtesë boshe. Një shembull i kodit të pasaktë html kur bashkohen qelizat: qeliza 1.1 qeliza 1.2 qeliza 2.1 qeliza 2.2 Dhe rezultati i shfaqjes në shfletues: ato. nëse analizoni kodin html, do të vini re se rreshti i parë përmban tre qeliza, dy prej të cilave kombinohen duke përdorur atributin colspan, dhe rreshti i dytë përmban vetëm dy qeliza. Prandaj, një qelizë e tretë bosh shfaqet në rreshtin e dytë. Atributet e etiketimit Në këtë postim, ne kemi hasur tashmë një atribut të etiketës ... Me një atribut të kufirit që përcakton gjerësinë e kufirit në piksel. Si parazgjedhje, është 0 dhe për këtë arsye qelizat shfaqen pa kufi si parazgjedhje. Përveç atributit kufitar, ka disa atribute të tjera të rëndësishme të mbështetura nga etiketa. ... Le t'i hedhim një sy atyre. atribut rreshtoj- grupe radhitje tabela për faqe. Mund të marrë vlerat majtas, qendër, djathtas, të cilat vendosin shtrirjen në të majtë, në qendër dhe në të djathtë, përkatësisht. Parazgjedhja është lënë. atribut sfond, të cilat vendos foton e sfondit te tavolina. Adresa e skedarit me imazhin merret si vlerë. bgcolor- grupe ngjyrë e sfondit tabelat. Mund të përdoret në lidhje me atributin e sfondit. atribut ngjyrë kufiri pyet ngjyra e kornizës tabelat. Mbushje celulare- përcakton distanca midis kufirit të qelizës dhe përmbajtjes së saj... Përmirëson lexueshmërinë e tabelës. Vlera mund të jetë çdo numër pozitiv. Hapësira e qelizave- grupe distanca midis kufijve të jashtëm të qelizave. Në lidhje me këtë bisedë si të futni tabelën në faqen html Do të përfundoj, thjesht për të përmbledhur: etiketat përdoren për të futur një tabelë - përcaktimi i tabelës, - duke shtuar një rresht dhe , seksioni i përfundimit dhe seksioni i trupit - ; për të kombinuar qelizat, përdorni atributet e etiketës Këtu, klasa e linjës specifikon dimensionet e qelizës. tabelat HTML rregulloni dhe shfaqni të dhënat duke përdorur rreshta ose kolona. Tabelat përbëhen nga qeliza të formuara nga kryqëzimi i rreshtave dhe kolonave. Qelizat e tabelës mund të përmbajë çdo element HTML si titujt, listat, tekstin, imazhet, elementët e formës dhe tabela të tjera. Për secilën tabelë, mund të shtoni një titull të lidhur duke e vendosur atë përpara ose pas tabelës. Tabelat nuk përdoren më për paraqitjen e faqeve të internetit dhe paraqitjen e elementeve individuale, sepse një teknikë e tillë nuk siguron fleksibilitetin e strukturës dhe reagimin e faqes, duke rritur ndjeshëm markup-in HTML. Të gjithë elementët e tabelës janë të disponueshëm si dhe atributet e tyre. Krijimi i tabelave në HTML Përmbajtja: 1. Si të krijoni një tabelë Tabela është krijuar duke përdorur një etiketë çifti Fig. 1. Pamja e tabelës pa formatimin e vetive css Si parazgjedhje, tabela dhe qelizat nuk kanë kufij të dukshëm. kufijtë vendos duke përdorur veçorinë kufitare: / * kufijtë e jashtëm të tabelës gri me trashësi 1 px * / tabelë (kufiri: 1 px gri i ngurtë;) / * kufijtë e qelizave të rreshtit të parë të tabelës * / th (kufiri: 1 px gri i ngurtë;) / * kufijtë e qelizave të trupit të tabelës * / td (kufiri: 1px gri e ngurtë;) Hapësira midis qelizave të tabelës hiqet duke përdorur veçorinë e tabelës (border-collapse: collapse;). Gjerësia tabela është si parazgjedhje e barabartë me gjerësinë e përmbajtjes së saj të brendshme. Për të vendosur gjerësinë, duhet të vendosni një vlerë për veçorinë width: / * do ta bëjë gjerësinë e tabelës të barabartë me gjerësinë e bllokut të kontejnerit që është në * / tabelë (gjerësia: 100%;) / * do të vendosë një gjerësi fikse për tabelën * / tabelën (gjerësia: 600 px;) Nëse mbushja dhe kufijtë janë specifikuar për qelizat e tabelës, atëherë gjerësia e tabelës do të përfshijë vlerat e mëposhtme: mbushje-majtas dhe mbushje-djathtas, gjerësia e kufirit majtas plus gjerësia e kufirit-djathtas të qelizës së fundit në rresht. Nëse specifikohet gjerësia dhe kufijtë e qelizave, atëherë gjerësia e tabelës do të jetë shuma e gjerësisë së qelizave plus gjerësia e kufirit-majtas dhe gjerësia e kufirit-djathtas të qelizës së fundit në rresht . 2. Si të krijohen rreshta (rreshta) të një tabele Rreshtat ose rreshtat e një tabele krijohen duke përdorur etiketën ... Numri i rreshtave horizontale në tabelë përcaktohet nga numri i etiketave të çiftuara . 3. Si të krijoni një qelizë të kokës së kolonës së tabelës 4. Si të bëjmë një qelizë të trupit të tabelës të vendosura në të njëjtën rresht përcaktojnë numrin e qelizave në rreshtin e tabelës. Numri i çifteve të qelizave dhe për të treguar secilën pjesë të tabelës. Elementi duhet të përdoret në rendin e mëposhtëm: si fëmijë - futja e një qelize; një tabelë është një element bllok i një faqe interneti; përmbajtja e qelizave mund të jetë jo vetëm tekst, por edhe fotografi dhe tabela të tjera; tabela mund të përmbajë tre lloje seksionesh: seksioni i kokës - colspan dhe rowspan. Kjo është e gjitha, në postimin tjetër do të flas për mjetet e navigimit në faqen html. Për të mos e humbur këtë postim, regjistrohuni në përditësimet e blogut tim! Gjithçka, shihemi së shpejti! Ky modalitet bazohet në modalitetin standard me disa përjashtime: shfaqja e imazheve brenda qelizave të tabelës dhe figurave poshtë njëra-tjetrës ndodh si në modalitetin e përputhshmërisë. Një nga tipat e mëposhtëm përdoret për të kaluar në modalitetin gati standard. Për kornizat në HTML: Për kornizat në XHTML: Imazhet poshtë njëra-tjetrës Kur shfaqen imazhe vertikalisht me furnizim të linjës fotografitë në një modalitet pothuajse standard shfaqen së bashku pa boshllëqe. Shembulli 1.2 tregon kodin për të shfaqur dy imazhe. Shembulli 1.2. Prodhimi i dy imazheve HTML 4.01 IE Cr Op Sa Fx Meqenëse figurat ishin më parë një dhe "të prera" për lehtësi, ato formojnë një imazh të vetëm (Fig. 1.1). Oriz. 1.1. Shfaqja e imazheve në modalitetin afërsisht standard Në modalitetin standard, formohet një hendek i vogël midis imazheve (Fig. 1.2). Oriz. 1.2. Shfaqja e imazheve në modalitetin standard Ekzistojnë dy mënyra kryesore për të punuar rreth kësaj veçori në modalitetin standard: shto ekran: bllok për imazhe; përdorni veçorinë line-height në kontejnerin mëmë. Le t'i shqyrtojmë këto metoda në më shumë detaje. Konvertimi i një etikete Elementi i bllokut do të na ndihmojë më shumë se një herë për të kapërcyer problemet e ndryshme që lidhen me imazhet. Këtë herë, ne do të përdorim veçorinë që elementët e bllokut të rreshtohen njëri nën tjetrin (indencat nuk merren parasysh). Në këtë rast, etiketa nga kodi, natyrisht, duhet të hiqet (shembulli 1.3). Shembulli 1.3. Përdorimi i vetive bllok Nuk është e nevojshme të përdoret veçoria e shfaqjes, mund të përdorni edhe lartësinë e vijës, kjo veçori përcakton ndarjen e rreshtave. Duke vendosur një vlerë prej 1 px për etiketën Brenda së cilës ndodhen imazhet, do të marrim një rezultat të ngjashëm (shembulli 1.4). Shembulli 1.4. Përdorimi i vetive line-height XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Fotot në tabelë Shtimi i një imazhi në një qelizë tabele tregon gjithashtu ndryshimin midis mënyrave të shfletuesit. Për ta kuptuar, le të analizojmë kodin e mëposhtëm (shembulli 1.5). Për ta bërë të dukshme kufirin rreth tabelës, një veçori kufiri është shtuar në përzgjedhësin TABLE në stilet. Shembulli 1.5. Imazhi në tabelë HTML 4.01 CSS 2.1 IE Cr Op Sa Fx Rezultati i këtij shembulli është paraqitur në Fig. 1.3a. Për modalitetin standard, dalja e imazhit është paksa e ndryshme (Fig. 1.3b). a b Oriz. 1.3. Imazhi në tabelë. a - mënyra pothuajse standarde, b - mënyra standarde Vihet re se në modalitetin standard shfaqet një dhëmbëzim i vogël në fund të figurës. Nga vjen? Nëse shtoni tekst në qelizë dhe rritni shkallën (Fig. 1.4), atëherë vihet re qartë se imazhi si element inline është i rreshtuar me vijën bazë të tekstit, dhe jo në skajin e tij të poshtëm. Prandaj, ndryshimi midis vijës bazë dhe skajit të poshtëm të tekstit është vlera e hendekut nën figurë. Oriz. 1.4. Baza e tekstit Përsëri, ka disa mënyra për të ndryshuar sjelljen e imazheve në një tabelë. Mënyra e parë tashmë është përmendur, ky është transformimi i etiketës në një element blloku duke përdorur veçorinë e ekranit të vendosur për të bllokuar (shih shembullin 1.3). Stili në këtë rast do të jetë si më poshtë: TABLE IMG (ekrani: bllok;) Nëse ka tekst së bashku me imazhet brenda qelizës, ky stil mund të çojë në pasoja të padëshirueshme. Në vend që fotografia të pozicionohet pranë tekstit, ajo shfaqet si një element blloku në një rresht të ri. Në këtë rast, rekomandohet të vendosni shtrirjen e imazheve në skajin e poshtëm duke përdorur veçorinë vertikale të rreshtimit me vlerën fund (shembulli 1.6). Shembulli 1.6. Përafrimi i imazheve XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Teksti Megjithëse të gjithë shfletuesit në këtë shembull tregojnë shtrirjen e poshtme të imazhit, shtrirja e vetë tekstit është paksa e ndryshme. Shfletuesit Firefox, Safari, IE7 rreshtojnë tekstin në fund të figurës dhe Opera, IE8, IE9 - në krye. Vizatime me një piksel Në ditët e paraqitjes tabelare, u përdor në mënyrë aktive një imazh transparent me madhësi një nga një piksel, i ashtuquajturi vizatim me një piksel. E vendosur në një qelizë tabele, një fotografi e tillë nuk e lejonte atë të tkurej në kufij të caktuar, por vetë u shkallëzua lehtësisht, duke vendosur kështu gjerësinë ose lartësinë e qelizës. Meqenëse fotografia është transparente, mund të vendosni ngjyrën e sfondit për qelizën dhe të merrni linja horizontale ose vertikale të trashësisë së specifikuar. Në modalitetin standard, ne përballemi me të njëjtat probleme si kur përdorim vizatime të rregullta brenda qelizave. Lartësia e qelizës do të zgjerohet ndërsa imazhet mbushen nga fundi. Ky problem zgjidhet shumë më lehtë dhe nuk kërkon përdorimin e një stili shtesë. Shfletuesit modernë shfaqin në mënyrë të përkryer madhësitë e dhëna të qelizave pa imazhe shtesë brenda. Prandaj, mjafton thjesht të hiqni foton me një piksel nga qeliza. krijon një titull kolone - një qelizë të veçantë, teksti në të cilin theksohet me shkronja të zeza. Numri i qelizave të kokës përcaktohet nga numri i çifteve të etiketave krijon qelizat e tabelës, brenda të cilave vendosen të dhënat e tabelës. Etiketat e çiftuara duhet të jetë e barabartë me numrin e çifteve të qelizave ... Atributet colspan, rowspan, headers janë të disponueshme për elementin. 5. Si të shtoni një titull (titull) në një tabelë Krijon një nënshkrim tabele. Shtuar menjëherë pas etiketës 6. Grupimi i rreshtave dhe kolonave të tabelës Krijon një grup kolonash strukturore duke theksuar qelizat logjikisht uniforme. Grupon një ose më shumë kolona për formatim të qëndrueshëm, duke ju lejuar të stiloni kolonat në vend që të përsërisni stilet për secilën qelizë dhe për çdo rresht. Shtuar menjëherë pas etiketave Oriz. 2. Theksimi i kolonave të tabelës me një ngjyrë të ndryshme duke përdorur etiketat dhe 7. Grupimi i seksioneve të tabelës Elementi krijon një grup titujsh për rreshtat e tabelës në mënyrë që të vendosë një pamje uniforme. Përdoret në lidhje me elementet , pas dhe, dhe para , dhe elementet. Mund të përdoret një herë në një tabelë.grupon përmbajtjen kryesore të një tabele. Përdoret në kombinim me elementë dhe . Krijon një grup rreshtash për të përfaqësuar informacionin rreth shumave ose totaleve, të vendosura në fund të tabelës. Përdoret një herë në tabelë. Vendosur pas etiketës, përpara etiketave dhe . Ky grupim rreshtash u parashikua në standard me shpresën se shfletuesit, kur shfaqin tabela të gjata, do të sigurojnë që rreshtat e të dhënave të lëvizin duke mbajtur të palëvizshme pjesën e sipërme dhe titrat, dhe kur ato të dalin në printer, ata do të jenë në gjendje për të përdorur pjesën e sipërme dhe titrat si tituj të faqeve. Sidoqoftë, shfletuesit modernë nuk e bëjnë këtë dhe ose thjesht shfaqin dhe si rreshta të dhënash, ose, në rastin më të mirë, thjesht vendosin rreshtat përkatës në fillim dhe në fund të tabelës. 8. Si të kombinohen qelizat e tabelës Atributet colspan dhe rowspan kombinojnë qelizat e tabelës. Atributi colspan specifikon numrin e qelizave të bashkuara horizontalisht dhe shtrirjen e rreshtave vertikalisht. Oriz. 3. Një shembull i kombinimit të qelizave të tabelës horizontalisht duke përdorur atributin colspan 9. Atributet e elementeve të tabelës Tabela 1. Atributet e elementeve të tabelës Vlerat e pranuara: një listë me emrat e qelizave, të ndara me hapësira; këta emra duhet t'u caktohen qelizave nëpërmjet atributit të tyre id. Vlerat e pranuara: çdo numër i plotë pozitiv. atribut Përshkrimi, vlera e pranuar colspan Numri i qelizave për rresht për t'u kombinuar horizontalisht. kokat Përcakton një listë të qelizave të kokës që përmbajnë informacion mbi kokën për qelizën aktuale të të dhënave. Projektuar për shfletues të të folurit. ... ... shtrirja e rreshtave Numri i qelizave në kolonë që do të bashkohen vertikalisht. Vlerat e mundshme: një numër nga 1 në 999. shtrirje Numri i parazgjedhur i kolonave për t'u kombinuar për të krijuar një stil të vetëm është 1. 10. Një shembull i krijimit të një tabele Oriz. 4. Krijimi i një menuje restoranti duke përdorur një tabelë HTML Shënimi HTML Menuja e restorantit "Romashka" Kuzhina Enët e ftohta Ushqime të nxehta Desserts Sallatat Snacks Vakti i parë Kurse të dyta rusisht Vinegrette Gjuhë rrikë Supë me lakër me lakër turshi Pemë me patate Mollë të pjekura me mjaltë Sallatë Olivier Pelte viçi Turshi në shtëpi Krapët kryq të pjekur në salcë kosi Tortë me petull Harengë nën "pallton e leshit" Pjerrëza me pelte Hoxhë mishi Kotoleta Pozharskie Torte "patate" Spanjisht Scallop ceviche Empanadat Supë me bukë me hudhër Paella me ushqim deti Churros Timbal avokado dhe ton Ahotomate Fabada asturiane Raxo derri Almoishavena Fasule me proshutë Changfain Supë peshku me bollgur Tortilje me patate Bunuelos frëngjisht Sallatë Vosges Rijet i pulës Krem-supë me patëllxhanë "Renoir" Patatet janë të kufizuara Brioshe Sallatë Panzanella Djathë e shijshme Supë franceze me kunguj Gratin e shpendëve Byrek me limon ligurian Tartari Salmon turshi Supë konti Tartiflett Savarin "Triumfi"