Paggamit sa HTML TABLE Elementary attributes

Pagkuha sa labing daghang mga lamesa sa HTML pinaagi sa pagkat-on sa mga hiyas sa lamesa

Ang mga hiyas sa lamesa sa HTML naghatag kanimo ug daghang pagkontrol sa mga lamesa sa HTML. Adunay daghan nga mga hiyas nga anaa sa mga lamesa aron mahimong mas makaiikag ug usbon ang hitsura sa imong panid.

HTML TABLE Elementary attributes

Sa HTML5 ang elemento naggamit sa global nga mga hiyas ug usa sa uban nga mga hiyas:. Ug kini nausab nga adunay bili lamang sa 1 o walay sulod (ie border = ""). Kung gusto nimo usbon ang gilapdon sa utlanan, kinahanglang gamiton mo ang CSS nga utlanan sa gilapdon.

Tan-awa sa ubos aron makat-on mahitungod sa balido nga hiyas sa huwaran sa HTML5.

Adunay ubay-ubay nga mga hiyas nga kabahin sa HTML 4.01 nga paghingalan nga nahimong wala na sa HTML5:

Ug usa ka hiyas nga wala usba sa HTML 4.01 ug usab wala'y gamit sa HTML5.

Pagkat-on og dugang mahitungod sa HTML 4.01 MGA TABANG KATIGANAN.

Adunay ubay-ubay nga mga hiyas nga dili bahin sa bisan unsang paghingalan sa HTML.

Gamita kini nga mga hiyas kung nahibal-an nimo nga ang mga browser nga imong gisuportahan makahimo sa pagdumala niini ug wala ka mahunahuna mahitungod sa balido nga HTML.

Pagkat-on og dugang mahitungod sa Tukma nga Mga Kinaiya sa TALAAN sa Browser.

Mga HTML5 TABLE Elementary attribute

Sama sa atong gihisgutan sa ibabaw, adunay usa lamang ka hiyas, lapas sa global nga mga hiyas, nga balido sa elemento sa HTML5 TABLE: border.

Ang hiyas sa utlanan gigamit aron mahibal-an ang usa ka utlanan sa palibot sa tibuok lamesa ug sa tanan nga mga selula sulod niini. Adunay usa ka pangutana kung kini mahilakip sa paghulagway sa HTML5, apan nagpabilin kini tungod kay kini naghatag impormasyon bahin sa istraktura sa lamesa, nga labaw pa sa mga implikasyon sa estilo.

Aron idugang ang hiyas sa utlanan, imong ibutang ang bili sa 1 kon adunay utlanan ug walay sulod (o isalikway ang hiyas) kung wala. Ang kadaghanan sa mga browsers usab mosuporta sa 0 nga walay utlanan, ug bisan unsang integer nga bili (2, 3, 30, 500, etc) aron sa pagdeklarar sa gilapdon sa utlanan sa pixel, apan kini wala na usba sa HTML5. Hinunoa, kinahanglan nimo gamiton ang mga estilo sa estilo sa CSS aron mahibal-an ang lapad nga utlanan ug uban pang mga estilo.

Aron makahimo og lamesa nga adunay utlanan, isulat:

border = "1" >

Kini usa ka lamesa nga adunay utlanan

Adunay mga HTML 4.01 nga mga kinaiya nga wala'y gamit sa HTML5. Kon nagplano ka sa pagsulat sa HTML 4.01 nga mga dokumento, mahimo nimo kining makat-unan, kung dili, mahimo nimong balewala kini. Kadaghanan niini nga mga hiyas adunay mga kapilian, nga gihulagway sa ibabaw.

Gihubit namon ang mga kinaiya sa elemento nga balido sa HTML5 (ug HTML 4.01). Gihubit niini ang TABLE mga hiyas nga balido sa HTML 4.01, apan wala na usba sa HTML5. Kung nagsulat ka gihapon sa HTML 4.01 nga mga dokumento, mahimo nimo kining gamiton, apan kadaghanan kanila adunay mga alternatibo nga maghimo sa imong mga panid nga labaw pa sa umaabut nga pamatuod-kon ikaw mobalhin sa HTML5.

Valid HTML 4.01 Mga Kinaiya

Ang hiyas nga atong gihulagway sa ibabaw.

Ang bugtong kalainan sa HTML 4.01 gikan sa HTML5 mao nga imong mahibal-an ang bisan unsang tibuok integer (0, 1, 2, 15, 20, 200, ug uban pa) aron mahibal-an ang gilapdon sa utlanan sa pixel.

Aron makatukod og lamesa nga adunay 5px nga utlanan, isulat:

border = "5" >

Kini nga lamesa adunay 5px nga utlanan.

Tan-awa ang usa ka pananglitan sa duha ka mga lamesa nga adunay mga utlanan

Ang hiyas naghubit sa gidaghanon sa luna tali sa mga utlanan sa selula ug sa sulod sa selula. Ang default mao ang duha ka pixel. Ibutang ang cellpadding sa 0 kon gusto nimo nga walay luna tali sa mga sulod ug mga utlanan.

Aron i-set ang cell padding sa 20, isulat:

cellpadding = "20" >

Kini nga lamesa adunay cellpadding nga 20.


Ang mga utlanan sa selula ibulag sa 20 ka pixel.

Tan-awa ang usa ka panig-ingnan sa lamesa nga adunay cellpadding

Ang hiyas naghubit sa gidaghanon sa luna tali sa mga lamesang selyula ug sa sulod sa selula. Sama sa cellpadding, ang default gibutang sa duha ka pixel, mao nga kinahanglan imong i-set kini sa 0 kon gusto nimo nga walay spacing sa cell.

Aron makadugang sa spacing sa cell ngadto sa usa ka lamesa, isulat:

cellspacing = "20" >

Kini nga lamesa adunay cellspacing nga 20.


Ang mga cell ibulag sa 20 ka pixel.

Tan-awa ang usa ka lamesa nga adunay cellspacing

Ang kinaiya nagpaila kung asa nga mga bahin sa utlanan nga naglibot sa gawas sa usa ka lamesa makita. Mahimo nimong ibutang ang imong lamesa sa tanang upat ka kilid, bisan usa ka kilid, ibabaw ug sa ubos, wala ug tuo, o wala.

Ania ang HTML alang sa usa ka lamesa nga adunay lamang sa wala nga kilid nga utlanan:

frame = "lhs" >

Kini nga lamesa

adunay

lamang ang
wala gilayon nga gilakip.

Ug laing pananglitan sa ubos nga bayanan:

frame = "below" >

Kini nga lamesa adunay usa ka frame sa ubos.

Susiha ang pipila ka mga lamesa nga adunay mga bayanan

Ang kinaiya susama sa frame nga kinaiya, kini nag-apekto lamang sa mga utlanan sa palibot sa mga selula sa lamesa. Mahimo nimong ibutang ang mga kalagdaan sa tanang mga selula, tali sa mga kolum, tali sa mga grupo sama sa TBODY ug TFOOT o wala.

Aron makatukod og usa ka lamesa nga adunay mga linya lamang tali sa mga linya, isulat:

rules = "rows" >

Kini nga 4x4 nga lamesa adunay

ang mga laray dili mga haligi

nga gilatid sa
mga lagda sa hiyas.

Ug ang usa nga adunay mga linya tali sa mga kolum:

rules = "cols" >


Kini mao ang
usa ka lamesa
diin ang

mga kolum
mga
gipasiugda

Ania ang usa ka panig-ingnan sa lamesa nga adunay mga lagda

Ang hiyas naghatag kasayuran mahitungod sa lamesa alang sa mga magbabasa sa screen ug uban pang mga ahente sa tiggamit nga tingali adunay problema sa pagbasa sa mga lamesa. Aron gamiton ang kinatibuk-ang hiyas, imong isulat ang usa ka mubo nga paghulagway sa lamesa ug ibutang kana ingon nga bili sa hiyas. Ang summary dili ipakita sa web page sa kadaghanan nga mga standard web browser.

Ania ang paagi sa pagsulat sa usa ka simple nga lamesa nga adunay usa ka summary:

summary = "Kini usa ka panig-ingnan nga lamesa nga adunay kasayuran sa pagpuno. Ang katuyoan niini nga lamesa mao ang pagpakita sa usa ka summary." >


kolum 1 nga laray 1
kolum 2 laray 1

kolum 1 nga laray 2
kolum 2 laray 2

Tan-awa ang usa ka lamesa nga adunay usa ka summary

Ang hiyas naghubit sa gilapdon sa lamesa sa bisan kinsang pixel o isip usa ka porsyento sa elemento sa sudlanan. Kung ang gilapdon dili ibutang, ang lamesa magamit lamang kutob sa luna nga gikinahanglan nga ipasundayag ang mga sulod, nga adunay kinatibuk-ang lapad sama sa lapad sa ginikanan nga elemento.

Aron makatukod og usa ka lamesa nga adunay usa ka piho nga gilapdon sa mga pixel, isulat:

width = "300" >

Kini nga lamesa mao ang 80% sa gilapdon sa sudlanan nga anaa niini.

Ug aron sa pagtukod sa usa ka lamesa nga adunay gilapdon nga usa ka porsyento sa parent element, isulat:

width = "80%" >

Kini nga lamesa mao ang 80% sa gilapdon sa sudlanan nga anaa niini.

Tan-awa ang usa ka panig-ingnan sa lamesa nga adunay gilapdon

Wala na usba ang HTML 4.01 TABLE Atribute

Adunay usa ka hiyas sa elemento sa TABLE nga wala na usba sa HTML 4.01 ug karaan na sa HTML5: pag-align . Kini nga hiyas nagtugot kanimo sa pagtino kon asa nahimutang ang lamesa diha sa panid nga may kalabutan sa teksto nga tupad niini. Kini nga kinaiya wala na usba sa HTML 4.01, ug kinahanglan nimo nga likayan ang paggamit niini. Hinunoa, kinahanglan nimong gamiton ang CSS property o ang margin-left: auto; ug kilid-tuo: auto; estilo. Ang float property naghatag kanimo og usa ka sangputanan nga mas duol sa unsa ang gitagana nga hiyas nga gihatag, apan kini makaapekto sa paagi nga gipakita sa ubang mga pahina sa mga sulod. Ang kilid-tuo: auto; ug ang margin-left: auto; mao ang gisugyot sa W3C isip alternatibo.

Aniay usa ka wala'y panig-ingnan nga panig-ingnan gamit ang hiyas nga hiyas:

align = "right" >

Kini nga lamesa husto nga gipatuman


Ang teksto nag-agi sa palibot niini sa wala

Tan-awa ang usa ka wala'y pananglitan nga panig-ingnan nga naggamit sa pag-align sa hiyas

Ug aron makabaton sa samang epekto sa balido (wala'y deprecated) HTML, isulat:

style = "float: right;" >

Kini nga lamesa husto nga gipatuman


Ang teksto nag-agi sa palibot niini sa wala

Ang mosunod nagpatin-aw sa TABLE nga mga hiyas nga dili bahin sa bisan unsang paghingalan sa HTML.

Ang miaging impormasyon naghulagway sa mga hiyas sa HTML nga elemento nga balido sa HTML 4.01 apan karaan na sa HTML5.

Ang mosunod naghulagway sa TABLE mga hiyas nga dili balido sa bisan unsang kasamtangan nga paghingalan. Kon wala ka mahunahuna kon ang imong mga panid ma-validate ug ang imong tiggamit mogamit sa usa ka browser nga nagsuporta niini nga mga elemento, nan mahimo nimo kining gamiton. Apan ang kadaghanan niini dili suportado sa modernong mga browser o adunay mga alternatibo nga mas daghan ang mga sukaranan.

Dili kami morekomendar sa paggamit niini nga mga hiyas sa imong mga lamesang HTML.

Ang hiyas usa ka karaan nga kinaiya nga gilakip sa wala pa gisuportahan sa CSS. Kini nagtugot kanimo nga usbon ang kolor sa lamesa. Mahimo nimong itakda ang usa ka ngalan nga kolor o usa ka code sa hexadecimal. Kini nga hiyas nagpadayon gihapon sa daghang mga browser, apan alang sa umaabot nga proofed HTML, kinahanglan nga dili nimo kini gamiton, ug gamita ang CSS.

Ang mas maayo nga kapilian sa niini nga hiyas mao ang estilo nga kabtangan.

Aron mausab ang kolor sa background sa lamesa, isulat:

style = "background-color: #ccc;" >

Kini nga lamesa adunay abuhon nga background

Sama sa bgcolor nga kinaiya, ang hiyas sa bordercolor makapausab sa kolor sa hiyas. Kini nga hiyas gisuportahan lang sa Internet Explorer. Hinunoa, kinahanglan nimo gamiton ang estilo nga kolor sa border nga kabtangan.

Aron mausab ang kolor sa utlanan sa imong lamesa, isulat:

style = "border-color: red;" >

Kini nga lamesa adunay pula nga utlanan.

Ang bordercolorlight ug mga hiyas sa bordercolordark gilakip sa Internet Explorer aron ikaw makahimo og 3D nga utlanan sa imong lamesa. Apan, sa IE8 ug sa, kini gisuportahan lang sa IE7 Standards Mode ug Quirks Mode . Ang Microsoft nag-ingon nga kini nga mga kabtangan dili na suportado.

Sa usa ka mubo nga panahon, ang mga kolor nga kinaiya sa TABLE element gisugyot aron sa pagtabang sa mga browerers nga mahibal-an kung pila ang mga kolum nga adunay lamesa. Ang panguna mao nga kini makatabang sa pagpadali sa paghubad sa daghang mga lamesa. Apan kini gipatuman lamang sa Internet Explorer, ug sa IE8 ug sa, kini gisuportahan lang sa IE7 Standards Mode ug Quirks Mode.

Tungod kay adunay usa ka gilapdon nga kinaiya (wala'y karaan sa HTML5) daghang mga tawo ang nagtuo nga adunay taas nga hiyas alang sa mga lamesa usab. Apan tungod kay ang mga lamesa nahiuyon sa gilapdon sa ilang sulod o sa gibatbat nga gilapdon sa CSS o gilapdon nga kinaiya, ang gitas-on dili mapugngan. Busa sa baylo, ang mga browser nagtugot sa gitas-on nga hiyas aron ipaila ang minimum nga taas sa lamesa. Kon ang lamesa mas taas kay sa gitas-on, kini mas taas nga makita. Apan kinahanglan nimo gamiton ang propiedad

Uban sa CSS taas nga propyedad mahimo nimong pugngan ang gitas-on kung imong gamiton ang propiedad sa CSS ingon man aron ipasabut kung unsa ang mahitabo sa bisan unsa nga sobra nga sulod.

Aron ibutang ang minimum nga taas sa lamesa, isulat:

style = "height: 30em;" >

Kini nga lamesa labing menos 30 ka mga em nga taas.

Ang duha ka mga kinaiya ug dugang nga luna sa palibot sa wala / tuo nga kilid (hspace) ug ibabaw / ubos (vspace) sa lamesa. Kinahanglan nimong gamiton ang estilo sa kabtangan sa baylo.

Aron ibutang ang vertikal nga luna ngadto sa 20 ka pixel ug ang pinahigpit nga luna ngadto sa 40 ka pixel, isulat:

style = "margin: 20px 40px;"

Kini nga lamesa adunay usa ka vspace nga 20 ka pixel ug usa ka hspace nga 40 ka pixel.

Ang kinaiya usa ka boolean nga kinaiya nga naghubit kung ang mga sulod sa lamesa kinahanglan nga ibutang sa ngilit sa parent element o bintana o mopugos sa pinahit nga pag-scroll. Hinunoa, kinahanglan nimo ipasabut ang mga kinaiya sa pagputos sa matag lamesa nga cell gamit ang CSS property.

Aron makahimo og usa ka kolum nga adunay daghang teksto nga dili ibutang, isulat:



style = "white-space: nowrap;" > Kini usa ka kolum nga adunay usa ka tonelada nga sulod. Apan bisan pa kini mas lapad kaysa sa sudlanan ang teksto dili kinahanglan nga ibutang sa sunod nga linya, apan hinoon pugsa ang browser window aron mag-scroll sa pahayag aron makita ang tanan nga sulod.

Sa kataposan, ang hiyas naghubit kon sa unsa nga paagi ang mga sulod sa matag selula kinahanglan nga mag-align sa vertikal sulod sa selula. Imbis niining dili balido nga hiyas, kinahanglan nimo gamiton ang CSS nga kabtangan sa matag selula nga gusto nimong usbon ang paglinya. Dili nimo mamatikdan ang mga epekto niini nga estilo gawas kung ang mga sulod sa cell dili kaayo kay sa nabatonan nga luna nga gibuhat sa laing, mas dako nga mga selula.

Aron pagpugos sa usa ka selula nga ipahiangay sa ubos (imbes sa tunga-tunga, isip default), isulat:



Kini nga selula mas taas kaysa sa uban ug busa pugson ang taas nga taas. Busa imong makita nga ang vertically aligned cell gipaangay sa ubos.
style = "vertical-align: bottom;" > Mga sulod sa ubos.
Mga sulod sa tunga-tunga.