Kupata zaidi kutoka meza za HTML kwa sifa za meza ya kujifunza
Tabia za meza za HTML zinakupa udhibiti zaidi juu ya meza za HTML. Kuna sifa nyingi zinazopatikana kwa meza ili kuwafanya zivutia zaidi na kubadilisha mabadiliko ya ukurasa wako.
HTML TABLE sifa za kipengele
Katika HTML5 kipengele hutumia sifa za kimataifa na sifa nyingine moja:. Na imebadilika kuwa na thamani ya 1 au tupu (yaani mpaka = ""). Ikiwa unataka kubadilisha upana wa mpaka, unapaswa kutumia mali ya upana wa CSS.
Angalia hapa chini ili ujifunze kuhusu sifa za meza ya HTML5 halali.
Pia kuna sifa kadhaa ambazo ni sehemu ya HTML 4.01 specifikationer ambayo imekuwa kizamani katika HTML5:
- - Tumia mali ya pedi ya CSS kwenye TD ya meza na vipengele vya TH.
- - Tumia nafasi ya mipaka ya CSS kwenye meza.
- - Tumia mitindo ya CSS mpaka-rangi: nyeusi; na mtindo wa mpakani kwenye meza.
- - Tumia mitindo ya CSS mpaka-rangi: nyeusi; na mtindo wa mpakani kwenye vipengele vinavyofaa vya meza.
- -Hapo, unapaswa kuelezea muundo wa meza katika CAPTION au kuweka meza nzima katika FIGURE na kuelezea katika FIGCAPTION. Vinginevyo, unaweza kuboresha muundo wa meza ili hakuna maelezo yanayotakiwa.
- -Tumia eneo la upana wa CSS.
Na sifa moja ambayo ilikuwa imepungua katika HTML 4.01 na pia ni kizamani katika HTML5.
Pata maelezo zaidi kuhusu HTML 4.01 TABLE Attributes.
- Unganisha -Tumia mali ya maridadi ya CSS badala yake.
Pia kuna sifa kadhaa ambazo si sehemu ya vipimo vya HTML.
Tumia sifa hizi ikiwa unajua kwamba vivinjari unavyounga mkono vinaweza kushughulikia na hujali kuhusu HTML halali.
- - Tumia rangi ya asili ya CSS badala yake.
- Mpaka -Tumia nafasi ya CSS mali-rangi badala yake.
- bordercolorlight - Tumia nafasi ya CSS mali-rangi badala yake.
- bordercolordark - Tumia nafasi ya CSS mali-rangi badala yake.
- cols - Hakuna mbadala ya sifa hii.
- urefu - Tumia urefu wa mali ya CSS badala yake.
- - Tumia alama ya mali ya CSS badala yake.
- - Tumia alama ya mali ya CSS badala yake.
- - Tumia mali ya CSS nyeupe-nafasi badala yake.
- -Tumia nafasi ya CSS wima-align badala yake.
Jifunze zaidi kuhusu Mtazamo maalum wa TABIA.
HTML5 TABLE sifa za Element
Kama tulivyosema hapo juu, kuna sifa moja pekee, zaidi ya sifa za kimataifa, ambazo halali kwenye kipengele cha HTML5 TABLE: mpaka.
Tabia ya mpaka hutumiwa kufafanua mpaka karibu na meza nzima na seli zote ndani yake. Kulikuwa na swali lolote la kuwa litaingizwa katika vipimo vya HTML5, lakini imebaki kwa sababu ilitoa taarifa kuhusu muundo wa meza, zaidi ya matokeo ya mtindo tu.
Ili kuongeza sifa ya mpaka, unaweka thamani kwa 1 ikiwa kuna mpaka na bila (au kuacha sifa) ikiwa haipo. Vivinjari vingi pia vinasaidia 0 kwa mpaka wowote, na thamani nyingine yoyote ya jumla (2, 3, 30, 500, nk) ili kutangaza upana wa mpaka kwa saizi, lakini hii ni kizito katika HTML5. Badala yake, unapaswa kutumia mali ya mtindo wa mpangilio wa CSS ili kufafanua upana wa mipaka na mitindo mingine.
Ili kuunda meza na mpaka, andika:
< border border = "1" >
Hii ni meza yenye mpaka
Kuna HTML 4.01 sifa ambayo ni kizamani katika HTML5. Ikiwa una mpango wa kuandika nyaraka za HTML 4.01, unaweza kuzijifunza, vinginevyo, unaweza kuzipuuza. Wengi wa sifa hizi zina njia mbadala zilizoelezwa hapo juu.
Tunaelezea sifa za kipengele ambazo halali katika HTML5 (na HTML 4.01). Hii inaelezea sifa za TABLE zilizo sahihi katika HTML 4.01, lakini ni kizamani katika HTML5. Ikiwa bado unaandika nyaraka za HTML 4.01, unaweza kutumia sifa hizi, lakini wengi wao wana njia mbadala ambazo zitasaidia kurasa zako za baadaye wakati unapohamia HTML5.
Halali HTML 4.01 sifa
Sifa ambayo tulielezea hapo juu.
Tofauti pekee katika HTML 4.01 kutoka HTML5 ni kwamba unaweza kutaja integer yoyote (0, 1, 2, 15, 20, 200, nk) ili kufafanua upana wa mpaka katika pixels.
Ili kujenga meza na mpaka wa 5px, andika:
< border border = "5" >
Jedwali hili lina mpaka wa 5px.
Tazama mfano wa meza mbili zilizo na mipaka.
Tabia hii inafafanua kiasi cha nafasi kati ya mipaka ya seli na maudhui ya kiini. Kichapishaji ni saizi mbili. Weka salama kwa 0 ikiwa hutaki nafasi kati ya yaliyomo na mipaka.
Kuweka padding ya seli hadi 20, andika:
cellpadding = "20" >
Jedwali hili lina safu ya seli ya 20.
Mipaka ya kiini itatenganishwa na saizi 20
Angalia mfano wa meza na kikapu cha seli
Tabia hufafanua kiasi cha nafasi kati ya seli za seli na maudhui ya seli. Kama salama ya mkononi, chaguo-msingi kinawekwa kwa saizi mbili, hivyo lazima uiweka kwenye 0 ikiwa hutaki nafasi ya kiini.
Ili kuongeza nafasi ya kiini kwenye meza, andika:
cellspacing = "20" >
Jedwali hili lina safu ya siri ya 20.
Seli zitatenganishwa na saizi 20
Angalia meza yenye cellspacing
Tabia hubainisha sehemu gani za mpaka unaozunguka nje ya meza zitaonekana. Unaweza kuunda meza yako pande zote nne, upande wowote, juu na chini, kushoto na kulia, au hakuna.
Hapa ni HTML ya meza iliyo na mpaka wa upande wa kushoto:
frame = "lhs" >
Jedwali hili
itakuwa
tu tu
upande wa kushoto uliowekwa.
Na mfano mwingine na sura ya chini:
frame = "chini" >
Jedwali hili lina sura ya chini.
Angalia baadhi ya meza na muafaka
Tabia hiyo ni sawa na sifa ya sura, inaathiri tu mipaka karibu na seli za meza. Unaweza kuweka sheria kwenye seli zote, kati ya safu, kati ya makundi kama TBODY na TFOOT au hakuna.
Kujenga meza na mistari tu kati ya safu, kuandika:
sheria = "safu" >
Jedwali hili la 4x4 lina
safu zisizo safu
ilivyoelezwa na
inasema sifa.
Na mwingine kwa mistari kati ya nguzo:
sheria = "cols" >
Hii ni
meza
ambapo
nguzo
ni
imeonyesha
Hapa ni mfano wa meza iliyo na sheria
Sifa hutoa taarifa kuhusu meza kwa wasomaji wa screen na mawakala wengine wa mtumiaji ambao wanaweza kuwa na matatizo ya kusoma meza. Ili kutumia sifa ya muhtasari, unaandika maelezo mafupi ya meza na kuiweka kama thamani ya sifa. Muhtasari hautakuwa kwenye ukurasa wa wavuti katika vivinjari vya kawaida vya wavuti.
Hapa ni jinsi ya kuandika meza rahisi kwa muhtasari:
< muhtasari wa meza = "Hii ni meza ya sampuli iliyo na maelezo ya kujaza. Lengo la meza hii ni kuonyesha muhtasari." >
safu ya mstari wa 1
safu ya mstari wa 2
safu ya mstari wa 2
safu ya mstari wa 2
Angalia meza na muhtasari
Tabia hufafanua upana wa meza katika saizi ama au kama asilimia ya kipengee cha chombo. Ikiwa upana hauwekwa, meza itachukua nafasi kubwa tu kama inahitaji kuonyesha yaliyomo, na upana wa upana sawa na upana wa kipengele cha mzazi.
Ili kujenga meza na upana fulani katika saizi, andika:
< upana wa meza = "300" >
Jedwali hili ni 80% ya upana wa chombo kilichomo.
Na kujenga meza kwa upana ambayo ni asilimia ya kipengele cha mzazi, andika:
< upana wa meza = "80%" >
Jedwali hili ni 80% ya upana wa chombo kilichomo.
Angalia mfano wa meza na upana
Hifadhi ya HTML 4.01 TABLE Tabia
Kuna sifa moja ya kipengele cha TABLE kilichopunguzwa katika HTML 4.01 na kizamani katika HTML5: align . Tabia hii inakuwezesha kuweka mahali ambapo meza inapaswa kuwa kwenye ukurasa unaohusiana na maandiko yaliyo karibu nayo. Tabia hii imechukuliwa katika HTML 4.01, na unapaswa kuepuka kuitumia. Badala yake, unapaswa kutumia mali ya CSS au kushoto-kushoto: auto; na upande wa kulia: auto; mitindo. Mali ya kuelea inakupa matokeo ambayo ni karibu na yale yaliyotokana na sifa, lakini inaweza kuathiri njia ya yaliyomo ya ukurasa. Kijiko-kulia: auto; na kushoto-kushoto: auto; ni nini W3C inapendekeza kama mbadala.
Hapa ni mfano uliopotea kwa kutumia sifa ya kufanana:
align = "haki" >
Jedwali hili linaunganishwa sawa
Nakala inapita katikati yake kushoto
Tazama mfano uliopotea ukitumia sifa ya kufanana.
Na kupata athari sawa na HTML halali (yasiyo ya kufuta), kuandika:
style = "kuelea: haki;" >
Jedwali hili linaunganishwa sawa
Nakala inapita katikati yake kushoto
Yafuatayo inaelezea sifa za TABLE ambazo si sehemu ya vipimo vyote vya HTML.
Maelezo ya awali huelezea sifa za kipengele cha HTML ambacho hazikubaliki katika HTML 4.01 lakini ni kizamani katika HTML5.
Yafuatayo inaelezea sifa za TABLE zisizo halali katika vipimo vyovyote vya sasa. Ikiwa hujali kama kurasa zako zinathibitisha na watumiaji wako kutumia kivinjari ambacho kinaunga mkono vipengele hivi, basi unaweza kutumia vipengele hivi. Lakini wengi wao hawapatikani katika vivinjari vya kisasa au huwa na njia ambazo zinafaa zaidi.
Hatukupendekeza kutumia sifa hizi kwenye meza zako za HTML.
Tabia ni sifa ya zamani ambayo imejumuishwa kabla ya CSS iliungwa mkono sana. Inakuwezesha kubadilisha rangi ya nyuma ya meza. Unaweza kuweka jina la rangi au msimbo wa hexadecimal. Tabia hii bado inafanya kazi katika vivinjari vingi, lakini kwa kisasa cha HTML, haipaswi kuitumia, na kutumia CSS badala yake.
Njia bora zaidi ya sifa hii ni mali ya mtindo.
Ili kubadilisha rangi ya nyuma ya meza, andika:
style = "background-color: #ccc;" >
Jedwali hili lina historia ya kijivu
Sawa na sifa ya bgcolor, sifa ya mipaka inakuwezesha kubadilisha rangi ya sifa. Tabia hii inaungwa mkono tu na Internet Explorer. Badala yake, unapaswa kutumia mali ya mtindo wa rangi.
Ili kubadilisha rangi ya mpaka wa meza yako, andika:
style = "mpaka-rangi: nyekundu;" >
Jedwali hili lina mpakani mwekundu.
Vipengele vya bordercolorlight na bordercolordark vilijumuishwa kwenye Internet Explorer ili kukuwezesha kuunda mpaka wa 3D karibu na meza yako. Hata hivyo, kama ya IE8 na juu, hii inasaidiwa tu katika Mode ya Viwango vya IE7 na Mode ya Quirks . Microsoft inasema kwamba mali hizi haziungwa tena.
Kwa muda mfupi, vifungo vya sifa kwenye kipengee cha TABLE kilipendekezwa kusaidia wasafaji kujua jinsi safu nyingi za meza zilivyo. Nguzo ilikuwa kwamba hii itasaidia kuongeza kasi ya utoaji wa meza kubwa. Hata hivyo ilitekelezwa tu na Internet Explorer, na kama ya IE8 na juu, hii inasaidiwa tu katika Mode ya Viwango vya IE7 na Mode ya Quirks.
Kwa sababu kuna kipengele cha upana (kizito katika HTML5) watu wengi walidhani kulikuwa na sifa ya urefu kwa meza pia. Lakini kwa sababu meza zinalingana na upana wa maudhui yao au upana uliofafanuliwa katika sifa ya CSS au upana, urefu haukuweza kuzuiwa. Kwa hiyo, browsers kuruhusiwa sifa urefu ili kufafanua kiwango cha chini ya meza. Ikiwa meza ilikuwa kubwa zaidi kuliko urefu huo, ingeonyesha mrefu. Lakini unapaswa kutumia mali
Pamoja na mali ya urefu wa CSS unaweza kuzuia urefu ikiwa unatumia mali ya CSS pia kuelezea kinachotokea kwa maudhui yoyote ya ziada.
Ili kuweka urefu mdogo kwenye meza, andika:
style = "urefu: 30m;" >
Jedwali hili ni angalau 30 ya juu.
Tabia mbili na nafasi iliyoongeza karibu pande za kushoto / kulia (hspace) na juu / chini (vspace) ya meza. Unapaswa kutumia mali ya mtindo badala yake.
Kuweka nafasi ya wima kwa saizi 20 na nafasi ya usawa hadi saizi 40, andika:
style = "margin: 20px 40px;"
Jedwali hii ina vspace ya saizi 20 na saizi ya saizi 40.
Tabia hiyo ni sifa ya boolean inayofafanua ikiwa maudhui yaliyomo kwenye meza yanapaswa kuunganisha makali ya kipengele cha wazazi au dirisha au kupigia kupiga picha kwa usawa. Badala yake, unapaswa kufafanua sifa za kufunika za kila kiini cha meza kwa kutumia mali ya CSS.
Ili kufanya safu yenye maandiko mengi usiyofunga, weka:
style = "nyeupe-nafasi: nowrap;" > Hii ni safu yenye tani ya maudhui. Lakini hata ikiwa ni pana kuliko chombo maandishi haipaswi kuunganisha kwenye mstari unaofuata, lakini badala yake fanya kivinjari cha kivinjari ili upeze usawa ili uone maudhui yote.
Hatimaye, sifa hufafanua jinsi yaliyomo ya kila seli inapaswa kuunganisha vertili ndani ya seli. Badala ya sifa hii isiyo ya batili, unapaswa kutumia mali ya CSS kwenye kila kiini unataka kubadilisha usawa wa. Hutaona madhara ya mtindo huu isipokuwa yaliyomo ya seli ni chini ya nafasi iliyopatikana iliyoundwa na nyingine, seli kubwa.
Ili kulazimisha kiini kuunganisha chini (badala ya kati, kama default), andika:
Kiini hiki ni kirefu zaidi kuliko wengine na hivyo itasimamisha urefu kuwa mrefu zaidi. Kwa hiyo utaona kwamba kiini kilichokaa kwa wima kinakabiliwa na chini.
style = "wima-align: chini;" > Yaliyomo chini.
Yaliyomo katikati