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:
- -Gamit ang CSS padding property sa lamesa sa TD ug TH elements.
- -Gamita ang CSS nga propiedad sa border-spacing sa lamesa.
- -Gamita ang mga estilo sa CSS nga kolor sa border: itom; ug estilo sa utlanan sa lamesa.
- -Gamita ang mga estilo sa CSS nga kolor sa border: itom; ug estilo sa utlanan sa angay nga mga elemento sa lamesa.
- -Hinoon, kinahanglan nimo ihulagway ang istruktura sa lamesa sa usa ka CAPTION o ibutang ang tibuok nga lamesa sa usa ka hulagway ug ihulagway kini sa usa ka pagklaro. Sa laing paagi, mahimo nimong ipasimple ang istruktura sa lamesa aron walay katin-awan ang gikinahanglan.
- -Gamit ang CSS nga gilapdon nga propiedad.
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.
- ipahiuyon -Unang gamit ang CSS margin property.
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.
- -Gamiton ang CSS nga background sa kolor sa baylo.
- bordercolor -Unang gamit ang CSS property border-kolor.
- bordercolorlight -Gigamit ang CSS property nga border-kolor hinoon.
- bordercolordark -Gigamit ang CSS property nga kolor sa border hinoon.
- cols -Walay laing kapilian sa niini nga hiyas.
- Gitas-on -Usaha ang gitas-on sa propiedad sa CSS.
- -Gamita ang margin sa property sa CSS.
- -Gamita ang margin sa property sa CSS.
- -Gamita ang CSS property nga puti-luna sa baylo.
- -Gamita ang CSS property vertical-align sa baylo.
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 td>
tr>
table>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. td>
tr>
table>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. td>
tr>
Ang mga utlanan sa selula ibulag sa 20 ka pixel. td>
tr>
table>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. td>
tr>
Ang mga cell ibulag sa 20 ka pixel. td>
tr>
table>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 td>
adunay td>
tr>
lamang ang td>
wala gilayon nga gilakip. td>
tr>
table>Ug laing pananglitan sa ubos nga bayanan:
frame = "below" >
Kini nga lamesa adunay usa ka frame sa ubos. td>
tr>
table>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 td>
ang mga laray dili mga haligi td>
tr>
nga gilatid sa td>
mga lagda sa hiyas. td>
tr>
table>Ug ang usa nga adunay mga linya tali sa mga kolum:
rules = "cols" >
Kini mao ang td>
usa ka lamesa td>
diin ang td>
tr>
mga kolum td>
mga td>
gipasiugda td>
tr>
table>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 td>
kolum 2 laray 1 td>
tr>
kolum 1 nga laray 2 td>
kolum 2 laray 2 td>
tr>
table>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. td>
tr>
table>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. td>
tr>
table>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 td>
tr>
Ang teksto nag-agi sa palibot niini sa wala td>
tr>
table>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 td>
tr>
Ang teksto nag-agi sa palibot niini sa wala td>
tr>
table>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 td>
tr>
table>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. td>
tr>
table>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. td>
tr>
table>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. td>
tr>
table>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. Td>
tr>
table>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. Td>
style = "vertical-align: bottom;" > Mga sulod sa ubos. Td>
Mga sulod sa tunga-tunga. td>
tr>
table>