Ngba awọn julọ julọ jade ti awọn tabili HTML nipa kikọ ẹkọ tabili awọn eroja
Awọn eroja tabili HTML fun ọ ni ọpọlọpọ iṣakoso diẹ sii lori awọn tabili HTML. Ọpọlọpọ awọn eroja ti o wa si awọn tabili lati ṣe wọn diẹ sii ti o ni iyipada oju ti oju-iwe rẹ.
Awọn HTML Awọn eroja Eranko TABLE
Ni HTML5 awọn aṣiṣe nlo awọn eroja agbaye ati ẹya miiran:. Ati pe o ti yipada lati nikan ni iye ti 1 tabi ṣofo (ie aala = ""). Ti o ba fẹ yi iwọn ti aala naa pada, o yẹ ki o lo ohun-ini CSS-aala-iha-aala.
Wo isalẹ lati ko eko nipa awọn eroja HTML5 ti o wulo.
O tun wa awọn eroja pupọ ti o jẹ apakan ti awọn alaye HTML 4.01 ti o ti di ogboloju ni HTML5:
- -Ṣe ohun ini CSS ti o padding lori awọn TD ati tabili TH.
- -Ṣe iha-aala-agbegbe CSS lori tabili.
- -Iwọn CSS ṣe apejuwe awọ-aala: dudu; ati ara-aala-ori lori tabili.
- -Iwọn CSS ṣe apejuwe awọ-aala: dudu; ati ọna-aala-ori lori awọn eroja ti o yẹ fun tabili.
- Ni afikun, o yẹ ki o ṣalaye awọn eto ti tabili ni CAPTION tabi fi gbogbo tabili ni aworan kan ki o si ṣe apejuwe rẹ ni aworan kan. Ni ọna miiran, o le ṣe atunṣe isọdi ti tabili naa ki ko si alaye kankan.
- -Ṣe ohun ini ti CSS.
Ati pe ọkan sọ pe eyi ti o bajẹ ni HTML 4.01 ati pe o tun jẹ aijọpọ ni HTML5.
Mọ diẹ sii nipa Awọn eroja TABLE HTML 4.01.
- Parapọ -Fi ohun ini ile CSS dipo.
Awọn ẹya ara ẹrọ tun wa ti ko ni apakan ti awọn alaye HTML eyikeyi.
Lo awọn eroja wọnyi ti o ba mọ pe awọn aṣàwákiri ti o ṣe atilẹyin le mu wọn ati pe o ko bikita nipa HTML ti o wulo.
- -Ṣe ohun elo CSS ti o wa lẹhin-awọ dipo.
- bordercolor -Ṣe koodu CSS ohun-ini agbegbe dipo.
- bordercolorlight -Ṣe koodu CPA-ohun-ini-ni-dipo dipo.
- bordercolordark -Mu koodu CSS-ohun-ini-ni-dipo dipo.
- cols -Ni kii ṣe iyatọ si ẹda yii.
- iga -Fi awọn ohun-elo CSS ohun-ini naa dipo.
- -Ṣe agbegbe CSS agbegbe ohun dipo.
- -Ṣe agbegbe CSS agbegbe ohun dipo.
- -Ṣe ohun elo CSS ni aaye funfun-aaye dipo.
- -Ṣe ohun elo CSS ni iṣiro-titọ dipo.
Mọ diẹ sii nipa Awọn Ẹtọ TABLE Tuntun Turausa.
HTML5 TABLE Awọn eroja Epo
Gẹgẹbi a ti sọ ni loke, nibẹ nikan ni ẹda kan, lẹhin awọn eroja agbaye, ti o wulo lori HTML5 Table ano: aala.
Aami ifilelẹ ti lo lati seto ipinlẹ kan ni ayika gbogbo tabili ati gbogbo awọn sẹẹli inu rẹ. O wa diẹ ninu awọn ibeere bii boya o yoo wa ni itọkasi HTML5, ṣugbọn o wa nitori pe o pese alaye nipa tabili tabili, ju awọn ohun ti o ṣe deede.
Lati fi ẹmi iha aala kun, o ṣeto iye si 1 ti o ba wa ni aala ati ki o ṣofo (tabi fi kuro ni abajade) ti ko ba si. Ọpọlọpọ awọn aṣàwákiri yoo tun ṣe atilẹyin fun 0 fun ko si aala, ati eyikeyi nọmba odidi miiran (2, 3, 30, 500, ati be be lo) lati sọ iwọn ibanuwọn ni awọn piksẹli, ṣugbọn eyi jẹ aṣiṣe ni HTML5. Dipo, o yẹ ki o lo awọn ẹya-ara agbegbe ti CSS lati ṣọkasi iwọn ihamọ ati awọn aza miiran.
Lati ṣẹda tabili pẹlu kan aala, kọ:
aala "" 1 " >
Eyi jẹ tabili pẹlu kan aala
Awọn HTML 4.01 awọn eroja ti o wa ni aijọpọ ni HTML5. Ti o ba gbero lori kikọ HTML 4.01 awọn iwe aṣẹ, o le kọ wọn, bibẹkọ, o le foju wọn. Ọpọlọpọ awọn eroja wọnyi ni awọn ọna miiran, ti o salaye loke.
A ṣe apejuwe awọn eroja ti awọn ẹka ti o wulo ni HTML5 (ati HTML 4.01). Eyi ṣe apejuwe awọn eroja TABLE ti o wulo ni HTML 4.01, ṣugbọn o wa ni aijọpọ ni HTML5. Ti o ba tun kọ awọn HTML 4.01 awọn iwe aṣẹ, o le lo awọn eroja wọnyi, ṣugbọn ọpọlọpọ ninu wọn ni awọn iyipada ti yoo ṣe awọn oju-iwe rẹ siwaju sii ni ẹri fun igba ti o ba gbe si HTML5.
Valid HTML 4.01 Awọn eroja
Ẹya ti a ṣe apejuwe rẹ loke.
Iyato ti o wa ninu HTML 4.01 lati HTML5 ni pe o le ṣafihan nọmba odidi gbogbo (0, 1, 2, 15, 20, 200, bbl) lati ṣọkasi iwọn ti aala ni awọn piksẹli.
Lati kọ tabili kan pẹlu aala 5px, kọwe:
< aala agbegbe "" 5 " >
Ipele yi ni aala 5px.
Wo apẹẹrẹ ti tabili meji pẹlu awọn aala.
Ẹya naa ṣe apejuwe iye aaye laarin awọn aala agbegbe ati awọn akoonu ti sẹẹli naa. Iyipada jẹ awọn piksẹli meji. Ṣeto awọn cellpadding si 0 ti o ba fẹ ko aaye laarin awọn akoonu ati awọn aala.
Lati ṣeto ideri alagbeka si 20, kọwe:
cellpadding = "20" >
Ipele yi ni o ni cellpadding ti 20.
Awọn aala ẹkun yoo niya nipasẹ 20 awọn piksẹli.
Wo apẹẹrẹ ti tabili pẹlu cellpadding
Ẹya naa tumọ iye aaye laarin awọn ẹyin tabili ati akoonu akoonu. Gẹgẹ bi cellpadding, a ti ṣeto aiyipada si awọn piksẹli meji, nitorina o gbọdọ ṣeto o si 0 ti o ba fẹ ko si aye alagbeka.
Lati fi aye si sẹẹli si tabili, kọwe:
"=" 20 " >
Ipele yi ni o ni sẹẹli ti 20.
Awọn foonu yoo niya nipasẹ 20 awọn piksẹli.
Wo tabili pẹlu sẹẹli papọ
Ẹya naa ṣe idanimọ awọn ipin ti aala ti o wa ni ita ti tabili kan yoo han. O le dabobo tabili rẹ lori gbogbo awọn ẹgbẹ mẹrin, ni apa kan, oke ati isalẹ, sosi ati sọtun, tabi kò si.
Eyi ni HTML fun tabili pẹlu nikan aala apa osi:
fireemu =" lhs " >
Ipele yii
yoo ni
nikan ni
ẹgbẹ ti o wa ni apa osi
Ati apẹẹrẹ miiran pẹlu atẹlẹsẹ isalẹ:
fireemu = "ni isalẹ" >
Ipele yii ni aaye lori ina.
Ṣayẹwo diẹ ninu awọn tabili pẹlu awọn fireemu
Ẹya naa jẹ iru si ẹda igi, nikan o ni ipa lori awọn aala ni ayika awọn sẹẹli ti tabili naa. O le ṣeto awọn ofin lori gbogbo awọn sẹẹli, laarin awọn ọwọn, laarin awọn ẹgbẹ bi TBODY ati TFOOT tabi kò si.
Lati kọ tabili pẹlu awọn ila nikan laarin awọn ori ila, kọ:
ofin =" awọn ori ila " >
Ipele 4x4 yii ni
awọn ọwọn ila ko si
ṣe alaye pẹlu
awọn ipalara ti ofin
Ati ẹlomiran pẹlu ila laarin awọn ọwọn:
ofin =" cols " >
Eyi jẹ
tabili kan
ibi ti
awọn ọwọn
wa
afihan
Eyi jẹ apẹẹrẹ ti aa aa pẹlu awọn ofin
Ẹya naa pese alaye nipa tabili fun awọn onka iboju ati awọn aṣoju aṣoju miiran ti o le ni wahala kika awọn tabili. Lati lo ẹda ti a ṣoki, o kọwe apejuwe apejuwe ti tabili ki o fi pe gẹgẹbi iye ti ẹda naa. Akopọ ko ni han lori oju-iwe ayelujara ni ọpọlọpọ awọn aṣàwákiri wẹẹbù.
Eyi ni bi o ṣe le kọ tabili ti o rọrun pẹlu ṣoki kan:
summary = "Eyi jẹ tabili ti o ni tabili ti o ni alaye kikun. Idi ti tabili yii jẹ lati ṣe afihan akojọpọ." >
ẹgbẹ 1 kana 1
ẹgbẹ 2 kana 1
ẹgbẹ 1 kana 2
iwe 2 kana 2
Wo tabili pẹlu akojọpọ
Ẹya naa tumọ awọn iwọn ti tabili ni boya awọn piksẹli tabi bi ogorun kan ti eiyan ano. Ti iwọn ko ba ṣeto, tabili yoo gbe nikan ni aaye bi o ti nilo lati ṣafihan awọn akoonu ti, pẹlu iwọn iwọn kanna bi iwọn ti ẹbi obi.
Lati kọ tabili pẹlu iwọn kan pato ninu awọn piksẹli, kọ:
< iwọn tabili "300" >
Ipele yii jẹ 80% ti iwọn ti eiyan ti o wa ni.
Ati lati ṣe tabili kan pẹlu iwọn kan ti o jẹ ida ogorun ti ẹda obi, kọwe:
< iwọn tabili "" 80% " >
Ipele yii jẹ 80% ti iwọn ti eiyan ti o wa ni.
Wo apẹẹrẹ ti tabili pẹlu iwọn kan
Ti o ni HTML 4.01 Ẹtọ TABLE
Nibẹ ni ọkan ro pe ti TABLE ano ti o ti wa ni deprecated ni HTML 4.01 ati ki o ti atijo ni HTML5: mö . Ẹya yii jẹ ki o ṣeto ibi ti tabili yẹ ki o wa ni oju-iwe ibatan si ọrọ ti o wa lẹgbẹẹ rẹ. A ti fi ipalara yii han ni HTML 4.01, o yẹ ki o yago fun lilo rẹ. Dipo, o yẹ ki o lo ohun elo CSS tabi ala-osi: auto; ati ala-ọtun: auto; awọn aza. Ohun elo ti o ṣan omi yoo fun ọ ni abajade ti o sunmọ ohun ti iru asopọ ti o wa, ṣugbọn o le ni ipa ni ọna iyokuro akojọ awọn akoonu ti oju-iwe. Apa-ọtun-ọtun: auto; ati ala-osi: auto; jẹ ohun ti W3C ṣe iṣeduro bi ohun miiran.
Eyi ni apẹẹrẹ ti a fi apẹrẹ ti o lo ami ti o tọ:
align = "ọtun" >
Ipele yi jẹ deede deedee
Ọrọ n ṣaakiri ni ayika rẹ si apa osi
Wo apẹẹrẹ kan ti o ni iṣiro nipa lilo ẹda ti o tọ.
Ati lati ni ipa kanna pẹlu HTML (ti a ko fi oju rẹ silẹ) HTML, kọwe:
< awọ ara = "Ṣiṣan omi: ọtun;" >
Ipele yi jẹ deede deedee
Ọrọ n ṣaakiri ni ayika rẹ si apa osi
Awọn atẹle yii ṣe alaye awọn ero TABLE ti kii ṣe apakan ti eyikeyi alaye HTML.
Alaye ti tẹlẹ ṣapejuwe awọn eroja ti HTML ti o wulo ni HTML 4.01 ṣugbọn o wa ni igba atijọ ni HTML5.
Awọn wọnyi ni apejuwe awọn eroja TABLE ti ko wulo ni alayeye eyikeyi ti isiyi. Ti o ko ba bikita boya awọn oju-iwe rẹ fọwọsi ati awọn olumulo rẹ lo aṣàwákiri ti o ṣe atilẹyin awọn eroja wọnyi, lẹhinna o le lo awọn eroja wọnyi. Ṣugbọn ọpọlọpọ ninu wọn ni o wa boya ko ṣe akiyesi ni awọn aṣàwákiri igbalode tabi ni awọn iyipada ti o jẹ awọn igbasilẹ-deede.
A ko ṣe iṣeduro lilo awọn eroja wọnyi lori awọn tabili HTML rẹ.
Ẹya jẹ ẹya ti atijọ ti o wa ṣaaju ki o to ṣe atilẹyin fun CSS. O faye gba o laaye lati yi awọ lẹhin ti tabili pada. O le ṣeto orukọ awọ kan tabi koodu hexadecimal. Ẹya yii tun n ṣiṣẹ ni ọpọlọpọ awọn aṣàwákiri, ṣugbọn fun HTML ti o ni idaniloju, iwọ ko gbọdọ lo o, ki o si lo CSS dipo.
Iyatọ ti o dara julọ si ẹda yii jẹ ohun ini ara.
Lati yi awọ-awọ lẹhin ti tabili pada, kọ:
< awọ ara = "awọ-lẹhin: #ccc;" >
Ipele yii ni orisun awọ-awọ kan
Bakanna si ẹda bgcolor, iyatọ ti ijẹrisi jẹ ki o yi awọ ti ẹmi naa pada. Aami yii ni atilẹyin nipasẹ Internet Explorer nikan. Dipo, o yẹ ki o lo awọn ohun-ini ara-ala-ilẹ.
Lati yi awọ ti aala tabili rẹ pada, kọwe:
ara =" awọ-aala-pupa: pupa; " >
Ipele yii ni aala aala.
Awọn ifilelẹ laabu ati awọn ifilelẹ ti o wa ni agbegbe ni o wa ni Intanẹẹti Explorer lati gba ọ laaye lati ṣẹda aalaye 3D ni ayika rẹ tabili. Sibẹsibẹ, bi IE8 ati oke, a ṣe atilẹyin nikan ni IE7 Standards Mode ati Quirks Mode . Microsoft sọ pe awọn ohun-ini wọnyi ko ni atilẹyin mọ.
Fun igba diẹ, awọn cols ti o sọ lori TABLE ano ti a dabaa lati ṣe iranlọwọ fun awọn aṣàwákiri mọ iye awọn ọwọn kan ti o ni tabili. Ibẹrẹ ni pe eyi yoo ṣe iranlọwọ lati mu awọn tabili nla lọpọ. Sibẹsibẹ o ti ṣe apẹẹrẹ nikan nipasẹ Internet Explorer, ati bi IE8 ati oke, a ṣe atilẹyin nikan ni IE7 Standards Mode ati Quirks Mode.
Nitoripe iwọn ilawọn kan wa (ti o ni aijọpọ ni HTML5) ọpọlọpọ awọn eniyan ti ṣe pe pe o wa ni ipalara ti o ga julọ fun awọn tabili bi daradara. Ṣugbọn nitori awọn tabili ṣe deede si iwọn ti akoonu wọn tabi iwọn ti a ṣe alaye rẹ ni CSS tabi ẹbi gbooro, a ko le rọ igun naa. Nitorina dipo, awọn aṣàwákiri gba aaye ti o ga julọ lati ṣe ipinnu aaye to kere ju ti tabili lọ. Ti tabili ba ga ju ti giga lọ, yoo ṣe ifihan ti o ga julọ. Ṣugbọn o yẹ ki o lo ohun ini naa
Pẹlu ohun elo giga CSS o le ṣe idiwọn iga ti o ba lo ohun elo CSS daradara lati ṣalaye ohun ti o ṣẹlẹ pẹlu akoonu ti o kọja.
Lati ṣeto aaye to kere julọ lori tabili, kọ:
< awọ ara = "iga: 30em;" >
Ipele yii jẹ o kere 30 igbọnwọ giga.
Awọn ẹya meji ati aaye kun ni ayika apa osi / ọtun (hspace) ati oke / isalẹ (vspace) ti tabili. O yẹ ki o lo ohun ini ara dipo.
Lati seto aaye inaro si 20 awọn piksẹli ati aaye idokuro si awọn piksẹli 40, kọwe:
< awọ ara = "ala: 20px 40px;"
Ipele yi ni o ni lapapọ ti 20 awọn piksẹli ati apo-aye 40 awọn piksẹli.
Ẹya naa jẹ ẹda ti o ni imọran ti o ṣe alaye boya awọn akoonu ti tabili yẹ ki o fi ipari si eti ti awọn ẹbi obi tabi window tabi fi agbara si lilọ kiri lori ọna. Dipo, o yẹ ki o ṣe apejuwe awọn ẹya imudaniloju ti tabili tabili kọọkan nipa lilo iṣẹ CSS.
Lati ṣe iwe pẹlu ọpọlọpọ ọrọ ko fi ipari si, kọ:
ara = "aaye-funfun: iyipo;" > Eyi ni iwe kan pẹlu ton ti akoonu. Ṣugbọn paapa ti o ba wa ni anfani ju agbelebu lọ ọrọ naa ko yẹ ki o fi ipari si ila ti o wa, ṣugbọn dipo agbara fọọmu window lati yi lọ kiri ni gbangba lati wo gbogbo akoonu.
Lakotan, ẹda naa ṣe apejuwe bi awọn akoonu ti sẹẹli kọọkan ṣe yẹ ki o gbepọ ni ita laarin alagbeka. Dipo eyi ti ko tọ, o yẹ ki o lo ohun elo CSS lori alagbeka kọọkan ti o fẹ yi iyipada ti. Iwọ kii yoo akiyesi awọn ipa ti ara yii ayafi awọn akoonu ti cell jẹ kere ju aaye to wa ti o ṣẹda nipasẹ awọn miiran, awọn ẹyin ti o tobi.
Lati ṣe agbara kan alagbeka lati so si isalẹ (dipo arin, bi aiyipada) kọwe:
Foonu yi gun ju isinmi lọ ati nitorina yoo ṣe ipa ti iga lati wa ni gíga. Nitorina o yoo ri pe sẹẹli ti o wa ni ọna ti o wa ni isunmọ ti wa ni ibamu si isalẹ.
ara = "ina-align: isalẹ;" > Awọn akoonu ni isalẹ.
Awọn akoonu ni arin.