Ho fumana marang-rang a mangata a HTML ka litlhaloso tsa tafoleng
Litšobotsi tsa litafole tsa HTML li u fa taolo e ngata ho feta litafole tsa HTML. Ho na le litšobotsi tse ngata tse fumanehang ho lipapatso ho etsa hore li thahasellise le ho fetola ponahalo ea leqephe la hau.
HTML TABLE Litšobotsi Tse Ntle
Ka HTML5 ntlha e sebelisa litšobotsi tsa lefats'e le tšobotsi e 'ngoe e' ngoe:. 'Me e fetohile ho ba le boleng ba 1 kapa bo se nang letho (e leng moeli = ""). Haeba o batla ho fetola bophara ba moeli, o lokela ho sebelisa thepa ea bophara ba CSS.
Sheba ka tlaase ho ithuta ka matšoao a litafole a HTML5 a utloahalang.
Hape ho na le litšobotsi tse 'maloa tseo e leng karolo ea HTML 4.01 e qaqileng e fetohileng e sa sebetse ka HTML5:
- - Sebelisa thepa ea CSS padding tafoleng ea TD le lintlha tsa TH.
- - Sebelisa moeli oa CSS moeli-ho fapana tafoleng.
- -Sebedisa mekhoa ea CSS moeli-mobala: batsho; le mokhoa oa moeli mo tafoleng.
- -Sebedisa mekhoa ea CSS moeli-mobala: batsho; le mokhoa oa moeli ka likarolo tse nepahetseng tsa tafole.
- -Ha ho e-na le hoo, o lokela ho hlalosa sebopeho sa tafole ka CAPTION kapa ho beha tafole kaofela ka PHELELO le ho e hlalosa ka PHEPHA. Ntle le moo, o ka nolofatsa mokhoa oa tafole e le hore ho se ke ha e-ba le tlhaloso e hlokahalang.
- - Sebelisa thepa ea bophara ba CSS.
'Me tšobotsi e le' ngoe e neng e tlosoa ka HTML 4.01 le e boetse e sa sebetse ka HTML5.
Ithute ho eketsehileng ka HTML 4.01 TABLE Litšoaneleho.
- align- Sebelisa thepa ea marang-rang ea CSS ho e-na le hoo.
Hape ho na le litšobotsi tse 'maloa tseo e seng karolo ea litaelo tsa HTML.
Sebelisa litšobotsi tsena haeba u tseba hore li-browser tse u tšehetsang li ka li sebetsana 'me ha u tsotelle ka HTML e nepahetseng.
- - Sebelisa mobu oa CSS mobala-ho e-na le hoo.
- moeli oa motlakase - Sebelisa moeli oa CSS moeli-mobala ho e-na le hoo.
- bordercolorlight-Sebelisa moeli oa CSS moeli-mobala ho e-na le hoo.
- bordercolordark - Sebelisa moeli oa CSS moeli-mobala ho e-na le hoo.
- mebala -Ha ha ho na mekhoa e fapaneng le tšobotsi ena.
- bolelele - Sebelisa thepa ea CSS bophahamo ho e-na le hoo.
- - Sebelisa marang-rang a CSS ho e-na le hoo.
- - Sebelisa marang-rang a CSS ho e-na le hoo.
- - Sebelisa thepa ea CSS e tšoeu-sebaka ho e-na le hoo.
- - Sebelisa thepa ea CSS ka ho toba-e lumellane.
Ithute ho eketsehileng ka Moqapi oa Moqapi TABLE Litšoaneleho.
HTML5 TABLE Matla a Matla
Joalokaha re boletse ka holimo, ho na le tšobotsi e le 'ngoe feela, ho feta litšoaneleho tsa lefats'e, tse sebetsang ho HTML5 TABLE element: moeli.
Tšobotsi ea moeli e sebelisetsoa ho hlalosa moeli o potolohileng tafole eohle le lisele tsohle tse ka hare ho eona. Ho ne ho e-na le potso mabapi le hore na e tla kenngoa moqotsong oa HTML5, empa e ile ea sala hobane e fane ka tlhahisoleseding mabapi le mohaho oa tafole, ka ntle ho moelelo oa mokhoa feela.
Ho eketsa tšobotsi ea moeli, u beha bohlokoa ho 1 haeba ho na le moeli 'me u se na letho (kapa u tlohele tšobotsi) haeba ho se joalo. Li-browser tse ngata li tla boela li tšehetse 0 bakeng sa moeli o se nang moeli, le phaello efe kapa efe e kholo (2, 3, 30, 500, joalo-joalo) ho phatlalatsa bophara ba moeli ka li-pixels, empa sena se sa sebetse ka HTML5. Ho e-na le hoo, o lokela ho sebelisa litšobotsi tsa mebala ea moeli oa CSS ho hlalosa bophara ba moeli le mefuta e meng.
Ho theha tafole ka moeli, ngola:
border = "1" >
Ena ke tafole e nang le moeli
Ho na le litšobotsi tsa HTML 4.01 tse sa sebetseng ho hang ka HTML5. Haeba u rera ho ngola litokomane tsa HTML 4.01, u ka li ithuta, ho seng joalo, u ka li hlokomoloha. Boholo ba litšoaneleho tsena li na le mekhoa e meng, e hlalositsoeng ka holimo.
Re hlalosa litšobotsi tsa karolo e sebetsang ka HTML5 (le HTML 4.01). Sena se hlalosa TABLE e fana ka litsela tse lumellanang le HTML 4.01, empa ha li sebetse ka HTML5. Haeba u sa ntse u ngola litokomane tsa HTML 4.01, u ka sebelisa litšobotsi tsena, empa boholo ba tsona li na le mekhoa e meng e tla etsa hore maqephe a hao a be le bopaki ba nakong e tlang ha u fallela HTML5.
HTML e nepahetseng 4.01 Litšoaneleho
Tšobotsi eo re e hlalositseng ka holimo.
Phapang e le 'ngoe feela ho HTML 4.01 e tsoang ho HTML5 ke hore o ka hlakisa ntho e feletseng (0, 1, 2, 15, 20, 200, joalo-joalo) ho hlalosa bophara ba moeli ka pixels.
Ho aha tafole ka moeli oa 5px, ngola:
border = "5" >
Tafole ena e na le moeli oa 5px.
Bona mohlala oa litafole tse peli tse nang le meeli.
Tšobotsi e hlalosa boholo ba sebaka pakeng tsa meeli ea sele le lintho tse ka sele. Ho sa feleng ke pixels tse peli. Beha sesepa sa selefouno ho 0 haeba u sa batle sebaka pakeng tsa litaba le meeli.
Ho beha sethala sa cell to 20, ngola:
cellpadding = "20" >
Tafole ena e na le selpadding ea 20.
Meeli ea sele e tla aroloa ka pixelisi tse 20.
Sheba mohlala oa tafole e nang le cellpadding
Tšobotsi e hlalosa boholo ba sebaka pakeng tsa lisele tsa lisele le lisele tsa sele. Joaloka cellpadding, default e behoa ho pixels tse peli, kahoo o lokela ho e beha ho 0 haeba u sa batle ho aroloa ha sele.
Ho eketsa sele ho arola tafoleng, ngola:
cellspacing = "20" >
Tafole ena e na le cellspacing ea 20.
Lisele li tla aroloa ka pixelisi tse 20.
Bona tafole e nang le cellspacing
Tšobotsi e khetholla hore na likarolo tsa moeli o potolohileng ka ntle ho tafole li tla bonahala. O ka theha tafole ea hau ka mahlakoreng a mabeli, lehlakore le le leng, ka holimo le ka tlaase, ka ho le letona le ka ho le letona, kapa ha ho le joalo.
Mona ke HTML ea tafole e nang le moeli o ka letsohong le letšehali feela:
frame = "lhs" >
Tafole
e tla ba
ke feela
lehlakoreng le letšehali le entsoe.
Le mohlala o mong o nang le foreimi e ka tlaase:
frame = "ka tlase" >
Tafole ena e na le foreimi e ka tlaase.
Sheba litafole tse nang le liforeimi
Sebopeho se tšoana le sebopeho sa foreimi, feela se ama meeli e potolohileng lisele tsa tafoleng. O ka beha melao lisele tsohle, pakeng tsa lihlopha, pakeng tsa lihlopha tse kang TBODY le TFOOT kapa ha ho le joalo.
Ho aha tafole ka mela feela pakeng tsa mela, ngola:
melao = "mela" >
Tafole ena ea 4x4 e na le
mela e se mela
e hlalositsoeng ka
beha melao ea bohlokoa.
E 'ngoe e na le mela pakeng tsa mela:
melao = "mebala" >
Sena ke
tafole
moo
lihlopha
ke
e totobetse
Mona ke mohlala oa tafole e nang le melao
Sebopeho se fana ka tlhahisoleseding mabapi le tafole bakeng sa babali ba skrine le mefuta e meng ea basebelisi e ka 'nang ea thatafalloa ho bala litafole. Ho sebelisa tšobotsi ea kakaretso, o ngola tlhaloso e khutšoanyane ea tafole mme o beha seo e le boleng ba tšobotsi. Kakaretso e ke ke ea bonts'a leqepheng la websaete ka li-browser tse ngata tse tloaelehileng.
Mona ke mokhoa oa ho ngola tafole e bonolo ka kakaretso:
= "Ena ke tafole ea mohlala e nang le tlhahisoleseding ea tlatsetso. Morero oa tafole ena ke ho bonts'a kakaretso." >
molumo oa 1 mola o 1
molumo oa 2 mola o 1
molumo oa 1 moleng oa 2
molumo oa 2 moleng oa 2
Sheba tafoleng ka kakaretso
Sebopeho se hlalosa bophara ba tafole ka li-pixels kapa karolo ea karolo ea setshelo. Haeba bophara bo sa behoa, tafole e tla nka sebaka feela se hlokahalang ho bonts'a tse ka hare, ka bophara bo boholo bo lekanang le bophara ba motsoako oa motsoali.
Ho aha tafole ka bophara bo itseng ka li-pixels, ngola:
width = "300" >
Tafole ena ke karolo ea 80% ea bophara ba sejana.
Le ho haha tafole ka bophara e leng karolo ea karolo ea motsoali, ngola:
width = "80%" >
Tafole ena ke karolo ea 80% ea bophara ba sejana.
Bona mohlala oa tafole e nang le bophara
HTML e hlakileng 4.0 4.0 TABLE Tlhaloso
Ho na le tšobotsi e le 'ngoe ea lintlha tsa TABLE tse fanoang ka HTML 4.01' me e sa sebetse ka HTML5: align . Tšobotsi ena eu lumella ho beha moo tafoleng e lokelang ho ba teng leqepheng le amanang le temana e ka thōko ho eona. Tšobotsi ena e feletsoe ka HTML 4.01, 'me u lokela ho qoba ho e sebelisa. Ho e-na le hoo, o lokela ho sebelisa thepa ea CSS kapa lehlakoreng le letšehali: koloi; le margin-ka ho le letona: koloi; mekhoa. Thepa ea float e u fa sephetho se haufi le seo moelelo oa ho lumellana o fanoeng ka sona, empa o ka ama tsela eo likarolo tse ling tsa leqephe li hlahang ka eona. Karolo e ka ho le letona: ka koloi; le marginal-left: koloi; ke seo W3C e se buellang e le mokhoa o mong.
Mona ke mohlala o tlokotsing o sebelisang tšobotsi ea ho lumellana:
align = "right" >
Tafole ena e lumellane hantle
Mongolo o phallela ho potoloha ho ea ka ho le letšehali
Sheba mohlala o fokolang o sebelisang tšobotsi ea ho lumellana.
Hape ho fumana liphello tse tšoanang le HTML e sa sebetseng (e sa hlajoe), ngola:
style = "float: ho le joalo;" >
Tafole ena e lumellane hantle
Mongolo o phallela ho potoloha ho ea ka ho le letšehali
Tlhaloso e latelang e hlalositsoe TABLE e bontša hore hase karolo ea leha e le efe ea litaelo tsa HTML.
Boitsebiso bo fetileng bo hlalosa likarolo tsa karolo ea HTML e sebetsang ka HTML 4.01 empa e sa sebetse ka HTML5.
Lintlha tse latelang li hlalosa litlhaloso tsa TABLE tse sa sebetseng ho latela lintlha leha e le life tsa hona joale. Haeba u sa tsotelle hore na maqephe a hau a tiisa kapa basebelisi ba hau ba sebelisa sebapali se tšehetsang likarolo tsena, joale u ka sebelisa lintlha tsena. Empa boholo ba tsona ha bo tšehetsoe lipapaling tsa kajeno kapa li na le mekhoa e meng e lumellanang le maemo.
Ha re khothaletse ho sebelisa litšobotsi tsena marapeng a hau a HTML.
Tšobotsi ke tšobotsi ea khale e kenyelletsitsoeng pele CSS e tšehetsoa haholo. E lumella hore u fetole 'mala oa moeli oa tafole. U ka beha lebitso la 'mala kapa khoutu ea hexadecimal. Tšobotsi ena e ntse e sebetsana le lipapali tse ngata, empa bakeng sa HTML e nang le bopaki bo tlang, ha ua lokela ho e sebelisa, mme u sebelise CSS ho e-na le hoo.
Ntho e ntle ho tsebo ena ke mokhoa oa mokhoa oa mokhoa.
Ho fetola 'mala oa mobala oa tafole, ngola:
style = "mobala oa mokokotlo: #ccc;" >
Tafole ena e na le morao o moputsoa
E tšoanang le tšobotsi ea bgcolor, tšobotsi ea moeli oa moeli e u lumella hore u fetole 'mala oa sebopeho. Tšobotsi ena e tšehetsoa feela ke Internet Explorer. Ho e-na le hoo, o lokela ho sebelisa thepa ea mebala ea moeli.
Ho fetola 'mala oa moeli oa tafole ea hau, ngola:
mokhoa = "moeli-mobala: o khubelu;" >
Tafole ena e na le moeli o mofubelu.
Litšobotsi tsa bordercolorlight le bordercolordark li kenyelelitsoe Internet Explorer ho u lumella ho theha moeli oa 3D ho pota tafole ea hau. Leha ho le joalo, joaloka ea IE8 le holimo, sena se tšehetsoa feela ka IE7 Standards Mode le Quirks Mode . Microsoft e bolela hore thepa ena ha e sa tšehetsoa.
Ka nako e khutšoanyane, mebala e bontšang karolo ea TABLE e ne e hlophisitsoe ho thusa bapalami ho tseba hore na ke mebala e kae tafoleng e nang le eona. Sepheo ke hore sena se tla thusa ho potlakisa phetolelo ea litafole tse kholo. Leha ho le joalo e ne e sebelisoa feela ke Internet Explorer, 'me e le ea IE8 le ea holimo, sena se tšehetsoa feela ka IE7 Standards Mode le Quirks Mode.
Hobane ho na le tšobotsi e bophara (e sa sebetse ka HTML5) batho ba bangata ba nahana hore ho na le tšobotsi ea bophahamo bakeng sa litafole hape. Empa hobane litafole li lumellana le bophara ba litaba tsa bona kapa bophara bo hlalositsoeng ka tšobotsi ea CSS kapa bophara, bophahamo bo ke ke ba thibeloa. Kahoo ho e-na le hoo, li-browsers li lumeletse tšobotsi ea bophahamo ho hlalosa bonyane bo phahameng ba tafole. Haeba tafole e ne e le telele ho feta bophahamo boo, e ne e tla ba telele. Empa u lokela ho sebelisa thepa
Ka thepa e phahameng ea CSS u ka thibela bophahamo ha u sebelisa thepa ea CSS hape u hlalosa se etsahalang ka ntho leha e le efe e feteletseng.
Ho beha bophahamo bo fokolang tafoleng, ngola:
style = "bophahamo: 30em;" >
Tafole ena ke bonyane li-30 tse phahameng.
Litšoaneleho tse peli le sebaka se kenyehileng ho potoloha ka mahlakoreng a letšehali / ka ho le letona (hspace) le top / bottom (vspace) ea tafoleng. O lokela ho sebelisa thepa ea setaele ho e-na le hoo.
Ho beha sebaka se otlolohileng ho li-pixels tse 20 le sebaka se holimo ho li-pixels tse 40, ngola:
style = "margin: 20px 40px;"
Tafole ena e na le vspace ea pixels tse 20 le hspace ea pixels tse 40
Tšobotsi ke tšobotsi ea boolea e hlalosang hore na likahare tsa tafoleng li lokela ho thatela moeling oa motsoako oa motsoali kapa fensetere kapa ho qobella ho phalla ka holimo. Ho e-na le hoo, o lokela ho hlalosa litšobotsi tsa ho phuthela tsa sele e 'ngoe le e' ngoe ea tafole ho sebelisa thepa ea CSS.
Ho etsa mohala o nang le litemana tse ngata tse sa koahelang, ngola:
style = "sebaka se sephara: nowrap;" > Ena ke mohala o nang le tonane tsa dikahare. Empa le haeba e pharaletseng ho feta sekontiri temana ha ea lokela ho thatela mola o hlahlamang, empa ho e-na le hoo, qobella fensetere ea sebapali ho phenya ka holimo ho bona litaba tsohle.
Qetellong, tšobotsi ena e hlalosa hore na likarolo tsa sele e 'ngoe le e' ngoe li lokela ho lumellana joang ka har'a sele. Ho e-na le tšobotsi ena e sa lokelang, u lokela ho sebelisa thepa ea CSS selefeng ka seng eo u batlang ho e fetola. U ke ke ua hlokomela liphello tsa mokhoa ona haese sele e ka hare ho feta sebaka se teng se entsoeng ke tse ling, lisele tse khōloanyane.
Ho qobella sele hore e lumellane le ka tlase (ho fapana le bohareng, e le ea kamehla) ngola:
Sisele ena e telele ho feta e meng 'me e tla qobella bophahamo hore e be telele. Kahoo o tla bona hore sele e lumellanang ka molomo e tsamaisane le tlase.
style = "molomo-align: ka tlase;" > Sehlooho se ka tlaase.
Bohare bo hare.