Ukuthola amathebula amaningi e-HTML ngokufunda izimfanelo zethebula
Izimfanelo zethebula ze-HTML zikunika ukulawula okuningi ngaphezulu kwamathebula we-HTML. Kunezinhlobo eziningi zezimfanelo ezitholakalayo amathebula ukuze zenzeke ezithakazelisayo futhi zishintshe ukubukeka kwekhasi lakho.
Izici ze-HTML TABLE Element
Ku-HTML5 isici sisebenzisa izimfanelo zomhlaba kanye nesinye isici:. Futhi ishintshile ukuze ibe nenani le-1 noma elingenalutho (okungukuthi umngcele = ""). Uma ufuna ukushintsha ububanzi bomngcele, kufanele usebenzise umkhawulo-ububanzi be-CSS.
Bheka ngezansi ukuze ufunde mayelana nezimfanelo zethebula ze-HTML5.
Kukhona nezimfanelo eziningana eziyingxenye ye-HTML 4.01 incazelo eye isiphelile ku-HTML5:
- -Sebenzisa impahla ye-CSS padding eTD etafuleni kanye nezakhi ze-TH.
- -Sebenzisa umkhawulo wempahla ye-CSS e-etafuleni.
- -Sebenzisa izitayela ze-CSS umngcele-umbala: omnyama; nesitayela semingcele etafuleni.
- -Sebenzisa izitayela ze- CSS umngcele-umbala: omnyama; kanye nesitayela semingcele ezintweni ezifanele zetafula.
- -Kunalokho, kufanele uchaze isakhiwo setafula ku-CAPTION noma ubeke itafula lonke ku-FIGURE futhi ulichaze ku-FIGCAPTION. Ngaphandle kwalokho, ungenza lula isakhiwo setafula ukuze kungadingeki incazelo.
- -Sebenzisa ububanzi be-CSS.
Futhi isici esisodwa esibekwe eceleni ku-HTML 4.01 futhi siphinde siphelelwe yisikhathi ku-HTML5.
Funda kabanzi mayelana ne-HTML 4.01 TABLE Izimfanelo.
- Qondanisa -Sebenzisa indawo ye-margin ye-CSS esikhundleni salokho.
Kunezici eziningana ezingekho ingxenye yanoma yikuphi ukucaciswa kwe-HTML.
Sebenzisa lezi zimfanelo uma wazi ukuthi iziphequluli ozisekelayo zingabathinta futhi awunandaba nge-HTML evumelekile.
- -Sebenzisa umthombo we-CSS wangemuva-umbala kunalokho.
- I-Bordercolor -Sebenzisa umngcele womhlaba we-CSS esikhundleni sombala.
- umgogodolorlight -Sebenzisa umngcele womhlaba we-CSS esikhundleni sombala.
- I-Bordercolordark -Sebenzisa indawo yomngcele we-CSS-umbala kunalokho.
- amakholomu -Akunakho okuhlukile kule mbono.
- ukuphakama -Sebenzisa ukuphakama kwempahla yeCSS esikhundleni.
- -Sebenzisa indawo engaphansi kwe-CSS esikhundleni.
- -Sebenzisa indawo engaphansi kwe-CSS esikhundleni.
- -Sebenzisa indawo ye-CSS emhlophe-isikhala kunalokho.
- -Sebenzisa indawo ye-CSS ngokuqondile-ukuvumelanisa ngokuqondile.
Funda kabanzi mayelana neSiphequluli Esicacile I-TABLE Izimfanelo.
I-HTML5 TABLE Element Izimfanelo
Njengoba sishilo ngenhla, kunesici esisodwa kuphela, ngaphezu kwezimfanelo zomhlaba jikelele, okusebenza ku-HTML5 TABLE element: umngcele.
Imfanelo yomngcele isetshenziselwa ukuchaza umngcele ojikeleze lonke ithebula nawo wonke amaseli akulo. Kwakukhona umbuzo othi ngabe wawuzofakwa yini ku-HTML5 imininingwane, kodwa yahlala ngoba inikeze ulwazi mayelana nesakhiwo setafula, ngaphesheya kokushiwo kwesitayela nje.
Ukuze ungeze imfanelo yomngcele, ubeka inani ku-1 uma kunomngcele futhi ungenalutho (noma ushiye umfanelo) uma kungenjalo. Iziphequluli eziningi zizosekela futhi 0 ngaphandle komngcele, nanoma iyiphi enye inani lenani eliphelele (2, 3, 30, 500, njll) ukumemezela ububanzi bomngcele ngamaphikseli, kodwa lokhu kuphelile ku-HTML5. Kunalokho, kufanele usebenzise izakhiwo zesitayela se-CSS ukuchaza ububanzi bomngcele nezinye izitayela.
Ukwakha itafula ngomngcele, bhala:
< umkhawulo wethebula = "1" >
Leli itafula elinomngcele
Kukhona izimfanelo ze-HTML 4.01 ezingasebenzi ku-HTML5. Uma uhlela ukubhala amadokhumende e-HTML 4.01, ungawafunda, ngaphandle kwalokho, ungawabheka. Iningi lalezi zimfanelo zinezinye izindlela, ezichazwe ngenhla.
Sichaza izimfanelo zesici esisebenza ku- HTML5 (ne-HTML 4.01). Lokhu kuchaza izimfanelo ze-TABLE ezivumelekile ku-HTML 4.01, kodwa zingasebenzi ku-HTML5. Uma usabhala amadokhumenti e-HTML 4.01, ungasebenzisa lezi zimfanelo, kodwa eziningi zazo zinezinye izindlela ezizokwenza amakhasi akho afinyelelwe esikhathini esizayo lapho uhambisa khona ku-HTML5.
I-HTML evumelekile 4.01 Izimfanelo
Imfanelo esichazwe ngenhla.
Umehluko kuphela ku- HTML 4.01 kusuka ku-HTML5 ukuthi ungacacisa noma iyiphi inamba yonke (0, 1, 2, 15, 20, 200, njll) ukuchaza ububanzi bomngcele ngamaphikseli.
Ukwakha itafula ngomngcele we-5px, bhala:
< umkhawulo wethebula = "5" >
Leli thebula linemingcele ye-5px.
Bheka isibonelo samathebula amabili anemingcele.
Isici sichaza inani lesikhala phakathi kwemingcele yeseli kanye nokuqukethwe kweseli. Okuzenzakalelayo ngamaphikseli amabili. Setha i-cellpadding ku-0 uma ungafuni isikhala phakathi kokuqukethwe nemingcele.
Ukusetha i-padding yeselula ibe ngu-20, bhala:
cellpadding = "20" >
Le thebula line-cellpadding engu-20.
Imingcele yeselula izohlukaniswa ngamaphikseli angu-20.
Buka isibonelo setafula nge-cellpadding
Isici sichaza inani lesikhala phakathi kwamaseli etafula kanye nokuqukethwe kweseli. Njenge-cellpadding, okuzenzakalelayo kusethelwe kwamaphikseli amabili, ngakho-ke kufanele uyibeke ku-0 uma ungafuni ukuhlukaniswa kweseli.
Ukwengeza ukusabalalisa kweseli etafuleni, bhala:
cellspacing = "20" >
Le thebula line-cellspacing engu-20.
Amaseli azohlukaniswa ngamaphikseli angu-20.
Bona ithebula nge-cellspacing
Isici sibonisa ukuthi yiziphi izingxenye zomngcele ozungeze ngaphandle kwetafula ezizobonakala. Ungafakela itafula lakho kuzo zonke izinhlangothi ezine, nganoma yiluphi uhlangothi, phezulu nangaphansi, kwesokunxele nangakwesokudla, noma akukho.
Nakhu i-HTML yetafula elinomngcele ongakwesokunxele kuphela:
uhlaka = "lhs" >
Lethebula
izoba
kuphela kuphela
ohlangothini lwesobunxele lwakhiwe.
Futhi esinye isibonelo ngesakhiwo esingezansi:
uhlaka = "ngezansi" >
Le thebula linefolda phansi.
Hlola amanye amatafula anezimele
Isici sifana nesici se-frame, kuphela sithinta imingcele ezungeze amaseli etafuleni. Ungabeka imithetho kuwo wonke amaseli, phakathi kwamakholomu, phakathi kwamaqembu afana ne-TBODY ne-TFOOT noma akekho.
Ukwakha itafula ngemigqa kuphela phakathi kwemigqa, bhala:
imithetho = "imigqa" >
Le tafula le-4x4 linempilo
imigqa engekho amakholomu
okuchazwe
lawula imfanelo.
Futhi enye ngemigqa phakathi kwekholomu:
imithetho = "amakholomu" >
Lena
itafula
lapho
amakholomu
kukhona
kuqokonyiswe
Nasi isibonelo setafula enezimiso
Isici sinikeza ulwazi mayelana netafula labafundi be-screen kanye namanye ama-agent e-user angase ahlukumeze amatafula okufunda. Ukuze usebenzise imfanelo yesifinyeto, ubhala incazelo emfushane yetafula bese ubeka lokho njengenani lenani. Isifinyeto ngeke siboniswe ekhasini lewebhu kumaphequluli amaningi wewebhu.
Nansi indlela yokubhala itafula elula ngesifinyeto:
summary = "Lokhu kuyithebula lesampula eliqukethe imininingwane yokugcwalisa. Inhloso yale tafula ukukhombisa isifinyeto." >
umugqa wokuqala wekholomu 1
ikholomu 2 umugqa 1
ikholomu 1 irowu 2
ikholomu 2 irowu 2
Buka ithebula ngesifinyeto
Isici sichaza ububanzi betafula kunoma yiziphi amaphikseli noma njengephesenti yesici sesitsha. Uma ububanzi obungasethiwe, ithebula lizothatha isikhala esiningi kuphela njengoba sidinga ukubonisa okuqukethwe, ngobubanzi obuphezulu obufana nobubanzi besici somzali.
Ukwakha itafula ngobubanzi obuthile ngamaphikseli, bhala:
width = "300" >
Leli thebula liyi-80% yobubanzi besitsha ngaphakathi.
Futhi ukwakha itafula ngobubanzi obuyiphesenti yento yomzali, bhala:
width = "80%" >
Leli thebula liyi-80% yobubanzi besitsha ngaphakathi.
Bheka isibonelo setafula ngobubanzi
I-HTML ye-4.01 ye-TABLE ishicilelwe
Kunesici esisodwa se-TABLE element ehlisiwe ku-HTML 4.01 futhi isasebenza ku-HTML5: ukuvumelanisa . Lesi sici sikuvumela ukuthi usethe lapho ithebula kufanele litholakale ekhasini elihlobene nombhalo okuwo. Lesi sici sinqatshiwe ku-HTML 4.01, futhi kufanele ugweme ukuyisebenzisa. Esikhundleni salokho, kufanele usebenzise impahla ye-CSS noma ibanga elingakwesokunxele: i-auto; nomkhawulo-ngakwesokudla: auto; izitayela. Ifa elisondayo likunika umphumela osondelene nalokho okushiwo isici sokuqondanisa, kodwa kungathinta indlela okuboniswa ngayo okuqukethwe kwekhasi. Umkhawulo ngakwesokudla: auto; futhi ngakwesokunxele-kwesokunxele: auto; yilokho i-W3C iphakamisa njengenye indlela.
Nasi isibonelo esingavunyelwe usebenzisa umqondo wokufana:
< ukulungiswa kwethebula = "kwesokudla" >
Lethebula lihambisana ngokuqondile
Umbhalo ugeleza uzungeze ngakwesokunxele
Bona isibonelo esilahlekile usebenzisa isici sokuqondanisa.
Futhi ukuthola umphumela ofanayo nokusebenza okuvumelekile (okungavunyelwanga) HTML, bhala:
< isitayela sesitayela = "faka: kwesokudla;" >
Lethebula lihambisana ngokuqondile
Umbhalo ugeleza uzungeze ngakwesokunxele
Okulandelayo kuchaza izimfanelo ze-TABLE ezingeyona ingxenye yanoma yikuphi ukucaciswa kwe-HTML.
Imininingwane eyedlule ichaza izimfanelo ze-HTML element esebenzayo ku-HTML 4.01 kodwa engasebenzi ku-HTML5.
Okulandelayo kuchaza izimfanelo ze-TABLE ezingavumelekile kunoma yisiphi isichazamazwi samanje. Uma ungakhathaleli ukuthi amakhasi akho asebenza yini futhi abasebenzisi bakho basebenzisa isiphequluli esisekela lezi zakhi, ungasebenzisa lezi zakhi. Kodwa eziningi zazo azisekelwa ezipheqululini zesimanje noma zinezinye izindlela ezingaphezulu-ezihambisanayo.
Asikhuthazi ukusebenzisa lezi zimfanelo kumatafula wakho we-HTML.
Imfanelo ingumdala endala owafakiwe ngaphambi kokuthi i-CSS ixhaswe kakhulu. Ikuvumela ukuthi ushintshe umbala wangemuva wetafula. Ungabeka igama lombala noma ikhodi ye-hexadecimal. Lesi sici sisasebenza kumaphequluli amaningi, kodwa nge-HTML eqinisekisiwe esikhathini esizayo, akufanele uyisebenzise, futhi usebenzise iCSS esikhundleni.
Okunye okungcono kunalokhu okushiwo yiyona impahla yesitayela.
Ukushintsha umbala wangemuva wetafula, bhala:
< isitayela sesitayela = "umbala wangemuva: #ccc;" >
Leli thebula linezinda elimpunga
Ngokufanayo nesici se-bgcolor, imfanelo ye-bordercolor ikuvumela ukuthi ushintshe umbala we-attribute. Lesi sici sisekelwa yi-Internet Explorer kuphela. Kunalokho, kufanele usebenzise impahla yesitayela sembala.
Ukushintsha umbala womngcele wakho wetafula, bhala:
isitayela = "umngcele-umbala: obomvu;" >
Leli thebula linomngcele obomvu.
Izimfanelo ze-Bordercolorlight ne-Bordercolordark zifakwe kwi-Internet Explorer ukukuvumela ukuba wakhe umngcele we-3D ozungeze itafula lakho. Noma kunjalo, njenge-IE8 futhi phezulu, lokhu kusekelwa kuphela ku- IE7 Mode Mode kanye ne-Quirks Mode . I-Microsoft ithi lezi zakhiwo azisekelwe.
Ngesikhathi esifushane, izimpawu zekholomu ku-TABLE element zihlongozwa ukusiza iziphequluli ukuthi zingaki amakholomu etafuleni. Isizathu sokuthi lokhu kuzosiza ukusheshisa ukunikezwa kwamatafula amakhulu. Kodwa-ke kuphela kwasetshenziswa i-Internet Explorer, futhi njenge-IE8 futhi phezulu, lokhu kusekelwa kuphela ku-IE7 Mode Mode kanye ne-Quirks Mode.
Ngenxa yokuthi kunesici sokubanzi (esingasasebenzi ku-HTML5) abantu abaningi bacabanga ukuthi kunesici sokuphakama kwamathebula. Kodwa ngoba amathebula ahambisana nobubanzi bokuqukethwe kwawo noma ububanzi obuchazwe kumfanelo ye-CSS noma ububanzi, ukuphakama akukwazanga ukuvinjelwa. Ngakho-ke, iziphequluli zavumela ikhwalithi yokuphakama ukuchaza ukuphakama okungenani kwetafula. Uma ithebula lide kakhulu kunelokuphakama, lizobonisa ubude. Kodwa kufanele usebenzise le ndawo
Ngendawo yokuphakama kwe-CSS ungabambelela ukuphakama uma usebenzisa impahla ye-CSS futhi uchaza ukuthi kwenzekani nganoma yikuphi okuqukethwe okweqile.
Ukusetha ubude obuphansi etafuleni, bhala:
< isitayela sesitayela = "ukuphakama: 30th;" >
Le tafula okungenani ama-30 phezulu.
Izimfanelo ezimbili kanye nesigaba esingeziwe ngaseceleni kwesokunxele / kwesokudla (hspace) kanye phezulu / ngezansi (vspace) yetafula. Kufanele usebenzise impahla yesitayela kunalokho.
Ukusetha isikhala esiqondile kuma-pixel angu-20 nendawo enezingqimba kuma-pixel angu-40, bhala:
< isitayela setafula = "umkhawulo: 20px 40px;"
Leli thebula line-pixel ye-vspace yama-pixel angu-20 kanye ne-hspace yama-pixel angu-40.
Isici siyisici se-boolean esichaza ukuthi okuqukethwe okuqukethwe kuthebula kufanele kugobe ekugcineni kwento yomzali noma iwindi noma ukuphoqa ukupheqa okuzungezile. Esikhundleni salokho, kufanele uchaze izici zokuhlanganisa zeseli ngalinye letafula usebenzisa i-CSS.
Ukwenza ikholomu enombhalo omningi ongawugoqa, bhala:
isitayela = "isikhala esimhlophe: ukuvula;" > Lena ikholomu ene-ton of content. Kodwa noma ngabe ivulekile kunesiqukathi umbhalo awungafanele ugobe emgqeni olandelayo, kodwa esikhundleni salokhu faka iwindi lesiphequluli ukupheqa ngokuzenzekelayo ukuze ubone konke okuqukethwe.
Okokugcina, lo mbono uchaza ukuthi okuqukethwe kweseli ngayinye kufanele kuhambisane ngokuqondile ngaphakathi kweseli. Esikhundleni salesi simfanelo esingavumelekile, kufanele usebenzise impahla ye-CSS kuseli ngalinye ofuna ukushintsha ukulungiswa kwalo. Ngeke ubone imiphumela yalesi sitayela ngaphandle kokuthi okuqukethwe kweseli kungaphansi kwesikhala esitholakalayo esakhiwe amanye, amangqamuzana amakhulu.
Ukuphoqelela iseli ukuvumelanisa phansi (kunokuba phakathi, njengokuzenzakalelayo), bhala:
Leli seli lide kunelo lonke futhi lizophoqelela ukuphakama ukuthi kube mude. Ngakho uzobona ukuthi iseli elivumelanisiwe ngokuqondile lihambelaniswe phansi.
isitayela = "ukuhambisana ngokuqondile: ngezansi;" > Okuqukethwe ngezansi.
Okuqukethwe phakathi.