Fáðu sem mest út úr HTML töflum með því að læra borðatriði
HTML töflur eiginleiki gefa þér meiri stjórn á HTML borðum. There ert a einhver fjöldi af eiginleikum í boði fyrir töflur til að gera þá áhugaverðari og breyta útliti á síðunni þinni.
HTML TABLE Element Eiginleikar
Í HTML5 notar þátturinn alþjóðlega eiginleika og annan eiginleika:. Og það hefur breyst til að aðeins hafa gildi 1 eða tómt (þ.e. landamæri = ""). Ef þú vilt breyta breidd landamæranna ættir þú að nota CSS eignina á landamærum.
Sjá hér að neðan til að læra um gilda HTML5 töflu eiginleika.
Það eru einnig nokkrir eiginleikar sem eru hluti af HTML 4.01 skilgreiningunni sem hefur orðið úreltur í HTML5:
- - Notaðu CSS padding eignina á TD og TH þætti töflunnar.
- - Notaðu CSS eigna landamæri á borðið.
- - Notaðu CSS stíl landamæris lit: svart; og landamæri á borðið.
- - Notaðu CSS stíl landamæris lit: svart; og landamæri á viðeigandi þætti töflunnar.
- -Í staðinn ættir þú að lýsa uppbyggingu borðarinnar í CAPTION eða setja allt borðið á mynd og lýsa því í myndrit. Að öðrum kosti gætirðu einfaldað uppbyggingu töflunnar þannig að engin skýring sé þörf.
- - Notaðu CSS breidd eignarinnar.
Og einn eiginleiki sem var fjarlægður í HTML 4.01 og er einnig úreltur í HTML5.
Frekari upplýsingar um eiginleika HTML 4.01 TABLE.
- taktu - Notaðu CSS mörk eignina í staðinn.
Það eru einnig nokkrir eiginleikar sem eru ekki hluti af HTML-forskriftum.
Notaðu þessar eiginleikar ef þú veist að vöfrum sem þú styður geti séð þau og þú hefur ekki sama um gilt HTML.
- - Notaðu CSS eign bakgrunnslit í staðinn.
- bordercolor-Notaðu CSS eignar landamærum lit í staðinn.
- bordercolorlight-Notaðu CSS eignar landamærum lit í staðinn.
- bordercolordark-Notaðu CSS eignarbendilinn í staðinn.
- kúlur -Það er ekkert val á þessum eiginleiki.
- hæð - Notaðu CSS eignarhæð í staðinn.
- - Notaðu CSS eignar framlegðina í staðinn.
- - Notaðu CSS eignar framlegðina í staðinn.
- - Notaðu CSS eignina hvítt rúm í staðinn.
- - Notaðu CSS eignina lóðrétt-stað í staðinn.
Frekari upplýsingar um vafra tilteknar TABLE eiginleikar.
HTML5 TAFLI Eiginleikar
Eins og áður var getið er aðeins einn eiginleiki, utan alþjóðlegra eiginleika, sem gildir á HTML5 TAFLI frumefni: landamæri.
Grunneiginleikurinn er notaður til að skilgreina landamæri um allt borðið og öll frumurnar innan þess. Það var einhver spurning um hvort það væri innifalið í HTML5 forskriftinni, en það var vegna þess að það veitti upplýsingar um borð uppbyggingu, utan einfaldlega stíl afleiðingar.
Til að bæta við landamerki eiginleiki seturðu gildið í 1 ef það er landamerki og tómt (eða sleppt frá eiginleiki) ef það er ekki. Flestir vafrar styðja einnig 0 fyrir enga landamæringu og önnur heiltala gildi (2, 3, 30, 500, etc) til að lýsa breidd landamæranna í punktum, en þetta er úreltur í HTML5. Þess í stað ættir þú að nota CSS landamæraeiginleika til að skilgreina breiddarbreidd og aðrar stíll.
Til að búa til töflu með landamærum skaltu skrifa:
border = "1" >
Þetta er borð með landamærum
Það eru HTML 4.01 eiginleikar sem eru úreltar í HTML5. Ef þú ætlar að skrifa HTML 4.01 skjöl, getur þú lært þau, annars geturðu hunsað þau. Flestir þessir eiginleiki hafa val, sem lýst er að ofan.
Við lýsum eiginleika hlutarins sem gilda í HTML5 (og HTML 4.01). Þetta lýsir TABLE eiginleikunum sem gilda í HTML 4.01, en eru úreltar í HTML5. Ef þú skrifar ennþá HTML 4.01 skjöl, getur þú notað þessar eiginleikar, en flestir þeirra hafa val til að gera síðurnar þínar betur í framtíðinni þegar þú færð HTML5.
Valid HTML 4.01 Eiginleikar
Eiginleikinn sem við lýstum hér að ofan.
Eini munurinn á HTML 4.01 frá HTML5 er að þú getur tilgreint hvaða heiltala sem er (0, 1, 2, 15, 20, 200, etc) til að skilgreina breidd landamæranna í punktum.
Til að búa til borð með 5 punkta landamæri, skrifaðu:
border = "5" >
Þessi tafla er með 5 punkta landamæri.
Sjá dæmi um tvær töflur með landamærum.
Eiginleikinn skilgreinir rýmið milli rýmisgrindanna og innihald frumunnar. Sjálfgefið er tveggja punkta. Stilltu cellpadding á 0 ef þú vilt ekki pláss á milli innihalds og landamæra.
Til að stilla reitinn á 20, skrifaðu:
cellpadding = "20" >
Í töflunni eru 20 stiklar.
Rammagreinar verða aðskilin með 20 punktum.
Skoðaðu dæmi um borð með cellpadding
Eiginleikinn skilgreinir rýmið milli borðfrumna og innihaldsefnisins. Eins og cellpadding er sjálfgefið stillt á tvo punkta, þannig að þú verður að setja það á 0 ef þú vilt ekki klefi bili.
Til að bæta við klefi bili við borð, skrifaðu:
cellspacing = "20" >
Í töflunni eru 20 stafir.
Frumur verður aðskilin með 20 punktum.
Sjá töflu með cellspacing
Eiginleikinn gefur til kynna hvaða hluti af landamærunum sem liggja utan við borðið verða sýnilegar. Þú getur ramma borðið þitt á öllum fjórum hliðum, hvorri hlið, efst og neðst, vinstri og hægri, eða enginn.
Hér er HTML fyrir borð með aðeins vinstra megin við landamærin:
frame = "lhs" >
Þessi tafla
mun hafa
aðeins
vinstra megin ramma.
Og annað dæmi með botnramma:
frame = "below" >
Þessi tafla hefur ramma neðst.
Skoðaðu sumar töflur með ramma
Eiginleikinn er svipaður ramma eiginleiki, aðeins það hefur áhrif á landamæri kringum frumurnar í töflunni. Þú getur stillt reglur á öllum frumum, milli dálka, milli hópa eins og TBODY og TFOOT eða enginn.
Til að búa til borð með línur aðeins á milli raða, skrifaðu:
rules = "rows" >
Þessi 4x4 borð hefur
línurnar ekki dálkar
lýst með
reglur eiginleiki.
Og annað með línur á milli dálka:
rules = "cols" >
Þetta er
borð
þar sem
dálkar
eru
hápunktur
Hér er dæmi um borð með reglum
Eiginleikinn veitir upplýsingar um töfluna fyrir skjálesendur og aðra notendur sem kunna að eiga í vandræðum með að lesa töflur. Til að nota samantekt eigindarinnar skrifar þú upp stutta lýsingu á töflunni og setur það sem gildi eigindarinnar. Samantektin birtist ekki á vefsíðunni í flestum venjulegum vafra.
Hér er hvernig á að skrifa einfalt borð með samantekt:
summary = "Þetta er sýnishornstafla sem inniheldur fylliefniupplýsingar. Tilgangur þessarar töflu er að sýna fram á samantekt." >
dálkur 1 röð 1
dálkur 2 röð 1
dálkur 1 röð 2
dálkur 2 röð 2
Skoðaðu töflu með samantekt
Eiginleikinn skilgreinir breidd töflunnar í annaðhvort dílar eða sem hundraðshluta gámahlutans. Ef breiddin er ekki stillt tekur töflunni aðeins eins mikið pláss og þarf að birta innihaldið, með hámarksbreidd sama og breidd foreldrahlutans.
Til að búa til borð með ákveðinni breidd í punktum skaltu skrifa:
width = "300" >
Þessi tafla er 80% af breiddum ílátsins sem hún er í.
Og til að búa til borð með breidd sem er hundraðshluti foreldrahlutans, skrifaðu:
width = "80%" >
Þessi tafla er 80% af breiddum ílátsins sem hún er í.
Sjá dæmi um borð með breidd
Ógilt HTML 4.01 TABLE eiginleiki
Það er ein eigindi TAFLI frumefnisins sem fellur niður í HTML 4.01 og úreltur í HTML5: samræma . Þessi eiginleiki leyfir þér að stilla hvar borðið ætti að vera staðsett á síðunni miðað við textann sem er við hliðina á henni. Þessi eiginleiki hefur verið fjarlægð í HTML 4.01 og þú ættir að forðast að nota það. Þess í stað ættir þú að nota CSS eignina eða vinstri-vinstri: sjálfvirkt; og framlegð-hægri: sjálfvirk; stíl. Flot eignin gefur þér afleiðing sem er nær því sem samræmdu eiginleiki fylgir, en það getur haft áhrif á hvernig restin af innihaldi síðunnar birtist. Framlegðin-hægri: sjálfvirk; og framlegð-vinstri: sjálfvirk; eru það sem W3C mælir með sem val.
Hér er úrfallið dæmi með því að nota jafna eiginleika:
align = "right" >
Þessi tafla er rétt í takt
Texti rennur í kringum það til vinstri
Sjá dæmi sem hefur verið fjarlægt með því að nota samræma eigindin.
Og til að fá sömu áhrif með gildan HTML-kóða, ekki skrifuð:
style = "fljóta: hægri;" >
Þessi tafla er rétt í takt
Texti rennur í kringum það til vinstri
Eftirfarandi útskýrir TABLE eiginleika sem eru ekki hluti af HTML-forskrift.
Fyrstu upplýsingar lýsa eiginleikum HTML-þáttanna sem gilda í HTML 4.01 en eru úreltar í HTML5.
Eftirfarandi lýsir TABLE eiginleikum sem eru ekki gildir í hvaða núverandi forskrift. Ef þú hefur ekki sama um hvort síðurnar þínar fullgilda og notendur þínir nota vafra sem styður þessi atriði þá geturðu notað þessi atriði. En flestir þeirra eru annaðhvort óstuddar í nútíma vafra eða hafa aðrar valkosti sem eru í samræmi við kröfur.
Við mælum ekki með því að nota þessar eiginleikar á HTML töflunum þínum.
Eiginleiki er gömul eiginleiki sem fylgdi áður en CSS var víða stutt. Það gerir þér kleift að breyta bakgrunnslitnum á borðið. Þú getur stillt litheiti eða sexkílómetra kóða. Þessi eiginleiki virkar enn í mörgum vöfrum, en fyrir framtíðarsvarandi HTML, ættirðu ekki að nota það og nota CSS í staðinn.
Því betra valkostur við þennan eiginleika er stíll eignarinnar.
Til að breyta bakgrunnslit á borði skrifaðu:
style = "bakgrunnslit: #ccc;" >
Þessi tafla er með gráa bakgrunn
Líkt og bgcolor eiginleiki leyfir landamerki eiginleika að breyta lit á eiginleikanum. Þessi eiginleiki styður aðeins Internet Explorer. Þess í stað ættir þú að nota landamærin í litastíl.
Til að breyta lit á landamærum borðsins, skrifaðu:
style = "border-color: red;" >
Þetta borð hefur rautt landamæri.
Skilyrði bordercolorlight og bordercolordark voru með í Internet Explorer til að leyfa þér að búa til 3D landamæri í kringum borðið þitt. Hins vegar, frá og með IE8 og upp, er þetta aðeins stutt í IE7 staðalstillingu og kvörnunarham . Microsoft segir að þessar eignir séu ekki lengur studdar.
Í stuttan tíma var ábendingin á TAFLI þátturinn lagt til að hjálpa vöfrum að vita hversu mörg dálkar borð hafði. Forsendur þess voru að þetta myndi hjálpa til við að flýta fyrir flutningi stórum borðum. Hins vegar var það aðeins hrint í framkvæmd með Internet Explorer, og frá og með IE8 og upp, er þetta aðeins studd í IE7 staðalstillingu og Quirks Mode.
Vegna þess að það er breidd eiginleiki (úreltur í HTML5) gerðu margir ráð fyrir að það væri hæð eiginleiki fyrir töflur eins og heilbrigður. En vegna þess að töflur eru í samræmi við breidd efnisins eða skilgreindrar breiddar í CSS eða breiddarfærslu, gæti hæðin ekki verið þvinguð. Í stað þess að leyfa vafra hæðinni að skilgreina lágmarkshæð töflunnar. Ef borðið var hærra en þá hæð, myndi það sýna hærri. En þú ættir að nota eignina
Með CSS hæð eigninni getur þú takmarkað hæðina ef þú notar einnig CSS eignina til að skilgreina hvað gerist með of mikið efni.
Til að stilla lágmarkshæðina á borði skrifaðu:
style = "height: 30em;" >
Þessi tafla er að minnsta kosti 30 ems hár.
Tvær eiginleiki og viðbótarpláss í kringum vinstri / hægri hliðina (hspace) og efst / neðst (vspace) töflunnar. Þú ættir að nota stíllinn í staðinn.
Til að stilla lóðrétta plássið í 20 punkta og lárétt pláss í 40 punkta, skrifaðu:
style = "framlegð: 20px 40px;"
Þessi tafla hefur vspace 20 pixlar og hspace 40 pixlar.
Eiginleiki er sveigjanlegur eiginleiki sem skilgreinir hvort innihald töflunnar skuli vefja á brún foreldraþáttarins eða gluggans eða þvinga lárétta hreyfingu. Þess í stað ættir þú að skilgreina umbúðir eiginleika hverrar töflu klefi með CSS eign.
Til að búa til dálk með fullt af texta ekki hula, skrifaðu:
style = "white-space: nowrap;" > Þetta er dálkur með tonn af efni. En jafnvel þótt það sé víðtækari en ílátið ætti ekki að henda textanum í næstu línu, heldur þvinga vafrann til að fletta lárétt til að sjá allt efni.
Að lokum skilgreinir eiginleiki hvernig innihald hverrar frumu skal samræma lóðrétt innan frumunnar. Í stað þessarar ógilda eiginda ættir þú að nota CSS eignina á hverjum klefi sem þú vilt breyta röðun. Þú munt ekki taka eftir áhrifum þessa stíls nema innihald frumunnar sé minni en laus pláss búin til af öðrum stærri frumum.
Til að þvinga klefi til að samræma við botninn (frekar en miðjan, sem sjálfgefið), skrifaðu:
Þessi flokkur er lengri en restin og svo mun þvinga hæðina að vera hærri. Þannig muntu sjá að línuna sem er lóðrétt, er á botninum.
style = "lóðrétt-takt: botn;" > Efnisyfirlit neðst.
Efnisyfirlit í miðju.