Ag tabhairt an chuid is mó as na táblaí HTML trí tréithe tábla a fhoghlaim
Tugann tréithe tábla HTML níos mó smacht duit ar tháblaí HTML. Tá a lán tréithe ar fáil do tháblaí chun iad a dhéanamh níos suimiúla agus cuma do leathanach a athrú.
Gnéithe TÁBLA HTML TÁBLA
I HTML5 úsáideann an eilimint na tréithe domhanda agus tréith amháin eile:. Agus d'athraigh sé go bhfuil luach 1 nó folamh aige (ie teorainn = ""). Más mian leat leithead na teorann a athrú, ba cheart duit an t-údarás CSS leithead teorann a úsáid.
Féach thíos chun foghlaim faoi na tréithe bailí tábla HTML5.
Tá tréithe éagsúla ann freisin atá mar chuid den shonraíocht HTML 4.01 atá tar éis éirí as feidhm i HTML5:
- -Déigh an mhaoin stuála CSS ar eilimintí TD agus TH an tábla.
- -Sa spásáil teorann maoine CSS ar an mbord.
- -Ans stíleanna CSS teorann-dath: dubh; agus stíl teorann ar an mbord.
- -Ans stíleanna CSS teorann-dath: dubh; agus stíl teorann ar na gnéithe cuí den tábla.
- -Instead, ba cheart duit cur síos a dhéanamh ar struchtúr an tábla i CAISNÁN nó an tábla iomlán a chur i bhFigiúr agus é a thuairisciú i FIGCAPTION. Mar mhalairt air sin, d'fhéadfá struchtúr an tábla a shimpliú ionas nach gá aon mhíniú.
- -Céire leis an maoin leithead CSS.
Agus tréith amháin a bhí léirithe i HTML 4.01 agus tá sé i léig freisin i HTML5.
Faigh tuilleadh eolais faoi na Gnéithe TÁBLA HTML 4.01.
- ailínigh - Bain an mhaoin corrlach CSS ina ionad.
Tá tréithe éagsúla ann nach bhfuil mar chuid d'aon sonraíocht HTML.
Bain úsáid as na tréithe seo má tá a fhios agat gur féidir leis na brabhsálaithe a thacaíonn tú iad a láimhseáil agus níl cúram agat faoi HTML bailí.
- -An ionad cúlra-mhaoin a bhaineann le CSS.
- bordercolor -An ionad teorann maoine CSS ina ionad.
- bordercolorlight -An ionad teorannú maoin CSS ina ionad.
- bordercolordark -An ionad teorann maoine CSS ina ionad.
- cols -Níl aon rogha eile ar an tréith seo.
- airde -Sa airde maoine CSS ina ionad.
- -An corrlach maoine CSS a ionadú.
- -An corrlach maoine CSS a ionadú.
- -An áit a bhfuil maoin CSS-spás an CSS.
- -Ag an mhaoin CSS ingearach a ailíniú ina ionad.
Faigh tuilleadh eolais faoi na Táscairí Sonracha TÁBLA Brabhsálaí.
Téarmaí Gnéithe TÁBLA HTML5
Mar a luadh muid thuas, níl ach tréith amháin, thar na tréithe domhanda, atá bailí ar ghné TÁBLA HTML5: teorainn.
Úsáidtear tréith na teorann chun teorainn a shainmhíniú ar fud an tábla ar fad agus na cealla go léir laistigh de. Bhí roinnt cheist ann maidir le cibé an gcuirfí san áireamh sa sonraíocht HTML5, ach d'fhan sé mar gheall ar sholáthair sé faisnéis faoi struchtúr an tábla, seachas impleachtaí stíl simplí.
Chun tréith na teorann a chur leis, leagann tú an luach go 1 má tá teorainn agus folamh (nó fág an tréith) mura bhfuil. Tacóidh an chuid is mó de na brabhsálaithe 0 as aon teorainn, agus aon luach iomlán slánuimhir (2, 3, 30, 500, srl.) Chun leithead na teorann i pixel a dhearbhú, ach tá sé seo i léig i HTML5. Ina áit sin, ba cheart duit airíonna stíl teorann CSS a úsáid chun leithead na teorann agus stíleanna eile a shainiú.
Chun tábla a chruthú le teorainn, scríobh:
border = "1" >
Is é seo an tábla le teorainn
Tá tréithe HTML 4.01 atá i léig i HTML5. Má tá tú ag pleanáil ar dhoiciméid HTML 4.01 a scríobh, is féidir leat iad a fhoghlaim, ar shlí eile, is féidir leat neamhaird a dhéanamh orthu. Tá roghanna eile ag formhór na dtréithe seo, a bhfuil cur síos orthu thuas.
Déanaimid cur síos ar thréithe an ghné atá bailí i HTML5 (agus HTML 4.01). Déanann sé seo cur síos ar na tréithe TÁBLA atá bailí i HTML 4.01, ach tá siad i léig i HTML5. Má scríobhann tú fós doiciméid HTML 4.01, is féidir leat na tréithe seo a úsáid, ach tá roghanna eile ag an chuid is mó a dhéanfaidh níos mó do dhaingniú ar do leathanaigh nuair a bhogann tú go HTML5.
Gnéithe Valid HTML 4.01
An tréith a chuirimid síos thuas.
Is é an t-aon difríocht i HTML 4.01 ó HTML5 ná gur féidir leat aon slánuimhir iomlán (0, 1, 2, 15, 20, 200, etc.) a shonrú chun leithead na teorann i pixel a shainiú.
Chun tábla a thógáil le teorainn 5px, scríobh:
border = "5" >
Tá teorainn 5px ag an tábla seo.
Féach sampla de dhá bhord le teorainneacha.
Sainmhíníonn an tréith méid an spáis idir na teorainneacha cille agus ábhar na cille. Is é dhá réamhshocraithe an réamhshocraithe. Socraigh an cellpadding go 0 más mian leat aon spás idir an t-ábhar agus na teorainneacha.
Chun an stuáil cill a shocrú go 20, scríobh:
cellpadding = "20" >
Tá cealllódáil 20 Tá an tábla seo
Déanfar 20 picteilín a dheighilt le teorainneacha cille
Féach sampla de tábla le cellpadding
Sainmhíníonn an tréith méid an spáis idir na cealla tábla agus an t-ábhar cille. Cosúil le cellpadding, tá dhá phicteilín leagtha síos ar an réamhshocraithe, mar sin ní mór duit é a chur ar 0 más mian leat aon spásáil cille.
Le spásáil cille a chur le tábla, scríobh:
cellspacing = "20" >
Tá cealla ag an tábla seo de 20.
Beidh cealla scoite ag 20 picteilín.
Féach tábla le ceallaigh
Aithníonn an tréith cé na codanna den teorainn a bhaineann le taobh amuigh den tábla a bheidh le feiceáil. Is féidir leat do bhord a fhrámaíocht ar na ceithre thaobh, ar aon taobh amháin, barr agus bun, ar chlé agus ar dheis, nó gan aon cheann.
Seo an HTML le haghaidh tábla nach bhfuil ach an teorainn taobh clé:
frame = "lhs" >
Tá an tábla
beidh
ach an
taobh clé frámaithe
Agus sampla eile leis an bhfráma bun:
frame = "below" >
Tá fráma ag an tábla seo ar an mbun.
Amharc ar roinnt táblaí le frámaí
Tá an tréith cosúil leis an tréith fráma, ach ní dhéanann sé ach na teorainneacha timpeall cealla an tábla. Is féidir leat rialacha a leagan síos ar na cealla go léir, idir colúin, idir grúpaí cosúil le TBODY agus TFOOT nó aon cheann.
Chun tábla a thógáil le línte amháin idir na sraitheanna, scríobh:
rules = "sraitheanna" >
Tá an tábla 4x4 seo
na sraitheanna nach colúin
atá leagtha amach leis an
rialacha tréith.
Agus ceann eile le línte idir na colúin:
rules = "cols" >
Is é seo
tábla
i gcás an
colúin
atá
aibhsithe
Seo sampla de a tábla le rialacha
Soláthraíonn an tréith faisnéis faoin tábla do léitheoirí scáileáin agus do ghníomhairí úsáideora eile a d'fhéadfadh deacrachtaí a bheith ag léamh táblaí. Chun an tréith achoimre a úsáid, scríobhann tú tuairisc ghearr ar an tábla agus cuir é sin mar luach an tréith. Ní thaispeánfar an achoimre ar an leathanach gréasáin sa chuid is mó de na brabhsálaithe gréasáin caighdeánach.
Seo mar a scríobhtar tábla simplí le hachomair:
summary = "Is é seo an tábla sampla ina bhfuil faisnéis líonta. Is é cuspóir an tábla seo achoimre a léiriú." >
colún 1 as a chéile 1
colún 2 rás 1
colún 1 as a chéile 2
colún 2 sraith 2
Féach ar an tábla le hachomair
Sainmhíníonn an tréith leithead an tábla i gceachtar picteilín nó mar chéatadán den eilimint coimeádáin. Mura bhfuil an leithead leagtha síos, ní ghlacfaidh an tábla ach an oiread spáis a chaithfidh sé an t-ábhar a thaispeáint, le leithead uasta mar an leithead ar an máthairghné.
Chun tábla a thógáil le leithead ar leith i pixel, scríobh:
leithead = "300" >
Is é an tábla seo 80% de leithead an choimeádáin atá ann.
Agus tábla a thógáil le leithead is céatadán den mháthairghné, scríobh:
< leithead tábla = "80%" >
Is é an tábla seo 80% de leithead an choimeádáin atá ann.
Féach sampla de tábla le leithead
Íomhá Réamhshocraithe 4.01 TÁBLA
Tá tréith amháin de chuid an ghné TÁBLA atá léirithe i HTML 4.01 agus i léig i HTML5: ailíniú . Leagann an tréith seo leat socrú nuair ba chóir an tábla a bheith suite ar an leathanach i gcoibhneas leis an téacs atá in aice leis. Tá an tréith seo léirithe i HTML 4.01, agus ba cheart duit é a sheachaint. Ina áit sin, ba cheart duit an mhaoin CSS nó an imeall-chlé a úsáid: uathoibríoch; agus ceart corrlach: uathoibríoch; stíleanna. Tugann an t-ionad snámhphointe duit toradh go bhfuil sé níos gaire don méid a thugann an tréith ailínithe, ach féadfaidh sé difear a dhéanamh ar an gcaoi a thaispeánann an chuid eile den ábhar. An ceart corrlach: uathoibríoch; agus imeall-chlé: uathoibríoch; is é a mholadh an W3C mar mhalairt.
Seo sampla neamhráite ag baint úsáide as an tréith ailíniú:
ailíniú = "ceart" >
Tá an tábla seo ailíniú ceart
Téann an téacs timpeall air ar an taobh clé
Féach sampla neamhráite ag baint úsáide as an tréith ailínigh.
Agus an éifeacht chéanna a fháil leis an HTML bailí (neamh-léirithe), scríobh:
style = "snámhphointe: ceart;" >
Tá an tábla seo ailíniú ceart
Téann an téacs timpeall air ar an taobh clé
Míníonn an méid seo a leanas tréithe TÁBLA nach bhfuil mar chuid d'aon sonraíocht HTML.
Déanann an fhaisnéis roimhe seo cur síos ar thréithe an eilimint HTML atá bailí i HTML 4.01 ach tá siad i léig i HTML5.
Cur síos ar na tréithe TÁBLA seo a leanas nach bhfuil bailí in aon sonraíocht reatha. Mura bhfuil tú faoi chúram an bhfuil do leathanaigh bailí agus má úsáideann do úsáideoirí brabhsálaí a thacaíonn leis na heilimintí seo, ansin is féidir leat na heilimintí seo a úsáid. Ach ní thacaíonn an chuid is mó díobh i mbrabhsálaithe nua-aimseartha nó tá roghanna eile acu a bhfuil níos mó caighdeáin comhlíonta acu.
Ní mholfaimid na tréithe seo a úsáid ar do tháblaí HTML.
Is tréith d'aois an tréith a bhí san áireamh sular tugadh tacaíocht forleathan do CSS. Ligeann sé duit dath cúlra an tábla a athrú. Is féidir leat ainm dath nó cód heicseamach a shocrú. Oibríonn an tréith seo i go leor brabhsálaithe fós, ach ní mór duit é a úsáid, agus úsáid CSS a úsáid ina dhiaidh sin.
Is é an rogha is fearr leis an tréith seo ná an stíl maoine.
Chun dath cúlra an tábla a athrú, scríobh:
style = "background-color: #ccc;" >
Tá cúlra liath ag an tábla
Cosúil leis an tréith bgcolor, ligeann an tréith bordercolor duit dath an tréith a athrú. Ní thacaíonn Internet Explorer ach an tréith seo. Ina áit sin, ba cheart duit an stíl stíl dath teorann a úsáid.
Chun dath teorainn an tábla a athrú, scríobh:
style = "border-color: red;" >
Tá teorainn dearg ag an tábla seo.
Cuireadh tréithe bordercolorlight agus bordercolordark san áireamh i Internet Explorer chun deis a thabhairt duit teorainn 3D a chruthú thart ar do bhord. Mar sin féin, ó IE8 agus suas, ní thacaítear leis seo ach i Mód Caighdeáin IE7 agus Mód na gCeanna . Deir Microsoft nach dtacaítear leis na hairíonna seo a thuilleadh.
Ar feadh tréimhse ghearr, bhí sé beartaithe go gcuirfí saintréithe ar ghné an TÁBLA le cuidiú le brabhsálaithe cé mhéad colún a bhí ag tábla. Ba é an toradh gur chabhródh sé seo le dlús a chur le rollaí táblaí móra. Níor chuir Internet Explorer ach i bhfeidhm, áfach, agus ó IE8 agus suas, ní thacaítear leis seo ach i Mód Caighdeán IE7 agus Mód na gCeanna.
Toisc go bhfuil tréith leithead (i léig i HTML5) ghlac go leor daoine go raibh tréith airde le haghaidh táblaí chomh maith. Ach toisc go gcomhlíonann táblaí leithead a n-ábhar nó an leithead sainithe sa tréith CSS nó leithead, níor cheart srian a chur leis an airde. Mar sin féin, cheadaigh brabhsálaithe an tréith airde chun íosmhéid airde an tábla a shainmhíniú. Má bhí an tábla níos airde ná an airde sin, taispeánfadh sé níos airde. Ach ba cheart duit an mhaoin a úsáid
Leis an maoin airde CSS is féidir leat srian a chur ar an airde má úsáideann tú maoin CSS chomh maith le sainmhíniú a dhéanamh ar an méid a tharlaíonn le haon ábhar breise.
Chun an t-íosleibhéal a leagan síos ar thabla, scríobh:
style = "height: 30em;" >
Tá an tábla seo ar a laghad 30 ems ard.
An dá thréith agus an spás breise ar fud na láimhe clé / ar dheis (hspace) agus barr / bun (vspace) an tábla. Ba cheart duit an stíl maoine a úsáid ina ionad.
Chun an spás ingearach a shocrú go 20 picteilín agus an spás cothrománach le 40 picteilín, scríobh:
style = "margin: 20px 40px;"
Tá spás vs de 20 picteilín ag an tábla seo agus hspace de 40 picteilín
Is tréith boole an tréith a shainíonn cibé an ba chóir ábhar an tábla a fhilleadh ar imeall an mháthairghné nó an fhuinneog nó an scrollán cothrománach a fhorfheidhmiú. Ina áit sin, ba cheart duit saintréithe timfhilleadh gach cill tábla a úsáid a bhaineann le maoin CSS.
Chun colún a dhéanamh le go leor téacs, ní scríobh:
style = "white-space: nowrap;" > Is colún é seo le ton ábhar. Ach fiú má tá sé níos leithne ná an gcoimeádán níor cheart go gcuirfí an téacs go dtí an chéad líne eile, ach ina dhiaidh sin cuirfidh sé an fhuinneog brabhsálaí chun scrollaigh go cothrománach chun an t-ábhar go léir a fheiceáil.
Mar fhocal scoir, sainmhíníonn an tréith cén chaoi ar chóir ábhar gach cill a ailíniú go hingearach laistigh den chill. In ionad an tréith neamhbhailí seo, ba cheart duit an mhaoin CSS a úsáid ar gach cill ar mhaith leat athrú a dhéanamh ar. Ní thabharfaidh tú faoi deara éifeachtaí an stíl seo mura bhfuil ábhar na cille níos lú ná an spás atá ar fáil a chruthaíonn cealla eile, níos mó.
Chun cill a chur i bhfeidhm chun an bonn a ailíniú (seachas an lár, mar an réamhshocraithe), scríobh:
Tá an cille seo níos faide ná an chuid eile agus mar sin cuirfidh sé an airde níos airde. Mar sin, feicfidh tú go bhfuil an cille atá ailínithe go hingearach ailínithe go dtí an bun.
style = "ingearach-align: bottom;" > Ábhar ag bun.
Clár i lár.