Pagkuha ng mga talahanayan ng HTML sa pamamagitan ng pag-aaral ng mga katangian ng talahanayan
Ang mga attribute ng talahanayan ng HTML ay nagbibigay sa iyo ng mas maraming kontrol sa mga talahanayan ng HTML. Maraming mga katangian na magagamit sa mga talahanayan upang gawing mas kawili-wiling at baguhin ang hitsura ng iyong pahina.
HTML TALAAN Mga Katangian ng Elemento
Sa HTML5 ginagamit ng elemento ang mga global na katangian at isa pang katangian:. At nagbago ito upang magkaroon lamang ng halaga ng 1 o walang laman (ibig sabihin, border = ""). Kung gusto mong baguhin ang lapad ng hangganan, dapat mong gamitin ang hangganan-lapad na ari-arian ng CSS.
Tingnan sa ibaba upang malaman ang tungkol sa wastong mga katangiang talahanayan ng HTML5.
Mayroon ding ilang mga katangian na bahagi ng HTML 4.01 na detalye na naging lipas na sa HTML5:
- -Gamitin ang CSS padding na ari-arian sa talahanayan TD at elemento ng TH.
- -Gamitin ang hangganan ng CSS na hangganan-spacing sa talahanayan.
- -Gamitin ang mga estilo ng CSS hangganan-kulay: itim; at estilo ng hangganan sa talahanayan.
- -Gamitin ang mga estilo ng CSS hangganan-kulay: itim; at estilo ng hangganan sa naaangkop na mga elemento ng talahanayan.
- -Sa halip, dapat mong ilarawan ang istraktura ng talahanayan sa isang CAPTION o ilagay ang buong talahanayan sa isang PAGKAROON at ilarawan ito sa isang FIGCAPTION. Bilang kahalili, maaari mong gawing simple ang istraktura ng talahanayan upang walang paliwanag ay kinakailangan.
- -Gamitin ang property ng CSS width.
At isang katangian na hindi na ginagamit sa HTML 4.01 at hindi na ginagamit sa HTML5.
Matuto nang higit pa tungkol sa HTML 4.01 TALAAN Mga Katangian.
- align -Gamitin ang property ng CSS margin sa halip.
Mayroon ding ilang mga katangian na hindi bahagi ng anumang detalye ng HTML.
Gamitin ang mga katangiang ito kung alam mo na ang mga browser na sinusuportahan mo ay maaaring hawakan ang mga ito at wala kang pakialam tungkol sa wastong HTML.
- -Gamitin ang kulay ng background ng property ng CSS sa halip.
- bordercolor -Gamitin ang kulay ng hangganan ng CSS sa halip na kulay.
- Bordercolorlight -Gamitin ang kulay ng hangganan ng CSS sa halip na kulay.
- bordercolordarkar -Gamitin ang halip na hangganan-kulay ng property ng CSS.
- cols -Walang alternatibo sa katangiang ito.
- taas -Gamitin ang taas ng ari-arian ng CSS sa halip.
- -Gamitin ang margin ng ari-arian ng CSS sa halip.
- -Gamitin ang margin ng ari-arian ng CSS sa halip.
- -Gamitin ang property ng CSS na white-space sa halip.
- -Gamitin ang property ng CSS na vertical-align sa halip.
Matuto nang higit pa tungkol sa Mga Tukoy na Mga Katangian ng TAMPINAN ng Browser.
HTML5 TABLE Element attribats
Tulad ng aming nabanggit sa itaas, mayroon lamang isang katangian, lampas sa mga global na katangian, na wasto sa isang elemento ng HTML5 TABLE: border.
Ang attribute ng hangganan ay ginagamit upang tukuyin ang isang hangganan sa paligid ng buong talahanayan at lahat ng mga selula sa loob nito. Mayroong ilang mga katanungan tungkol sa kung ito ay kasama sa pagtutukoy HTML5, ngunit ito ay nanatili dahil nagbigay ito ng impormasyon tungkol sa istraktura ng talahanayan, lampas lamang ng implikasyon ng estilo.
Upang idagdag ang attribute ng hangganan, itinakda mo ang halaga sa 1 kung may hangganan at walang laman (o iwanan ang katangian) kung wala. Sinusuportahan din ng karamihan sa mga browser ang 0 para sa walang hangganan, at anumang iba pang halaga ng integer (2, 3, 30, 500, atbp) upang idedeklara ang lapad ng border sa pixel, ngunit ito ay hindi na ginagamit sa HTML5. Sa halip, dapat mong gamitin ang mga katangian ng estilo ng border ng CSS upang tukuyin ang lapad ng border at iba pang mga estilo.
Upang lumikha ng isang table na may hangganan, isulat ang:
border = "1" >
Ito ay isang table na may hangganan
May mga HTML 4.01 na mga katangian na hindi na ginagamit sa HTML5. Kung plano mo sa pagsulat ng HTML 4.01 na mga dokumento, maaari mong malaman ang mga ito, kung hindi man, maaari mong huwag pansinin ang mga ito. Karamihan sa mga katangiang ito ay may mga alternatibo, na inilarawan sa itaas.
Inilarawan namin ang mga katangian ng sangkap na wasto sa HTML5 (at HTML 4.01). Inilalarawan nito ang mga katangian ng TALAAN na wasto sa HTML 4.01, ngunit hindi na ginagamit sa HTML5. Kung sumulat ka pa rin ng mga HTML 4.01 na dokumento, maaari mong gamitin ang mga katangiang ito, ngunit karamihan sa mga ito ay may mga alternatibo na gagawing mas katibayan sa iyong mga pahina para sa kapag lumipat ka sa HTML5.
Mga wastong HTML 4.01 Mga Katangian
Ang katangian na inilarawan natin sa itaas.
Ang pagkakaiba lamang sa HTML 4.01 mula sa HTML5 ay maaari mong tukuyin ang anumang buong integer (0, 1, 2, 15, 20, 200, atbp.) Upang tukuyin ang lapad ng hangganan sa mga pixel.
Upang bumuo ng isang table na may 5px border, isulat ang:
border = "5" >
Ang talahanayang ito ay may 5px border.
Tingnan ang isang halimbawa ng dalawang talahanayan na may mga hangganan.
Ang katangian ay tumutukoy sa dami ng espasyo sa pagitan ng mga hangganan ng cell at ng mga nilalaman ng cell. Ang default ay dalawang pixel. Itakda ang cellpadding sa 0 kung gusto mong walang espasyo sa pagitan ng mga nilalaman at mga hangganan.
Upang i-set ang cell padding sa 20, isulat ang:
cellpadding = "20" >
Ang table na ito ay may cellpadding na 20.
Ang mga hangganan ng cell ay ihihiwalay ng 20 pixels.
Tingnan ang isang halimbawa ng isang table na may cellpadding
Tinutukoy ng katangian ang halaga ng espasyo sa pagitan ng mga selula ng talahanayan at ng nilalaman ng cell. Tulad ng cellpadding, ang default ay naka-set sa dalawang pixel, kaya dapat mong itakda ito sa 0 kung gusto mo walang cell spacing.
Upang magdagdag ng cell spacing sa isang table, isulat ang:
cellspacing = "20" >
Ang table na ito ay may cellspacing ng 20.
Ang mga cell ay ihihiwalay ng 20 pixels.
Tingnan ang isang table na may cellspacing
Kinikilala ng katangian kung aling mga bahagi ng hangganan na nakapalibot sa labas ng isang talahanayan ay makikita. Maaari mong i-frame ang iyong talahanayan sa lahat ng apat na panig, anumang bahagi, tuktok at ibaba, kaliwa at kanan, o wala.
Narito ang HTML para sa isang table na may lamang sa kaliwang gilid hangganan:
frame = "lhs" >
Ang table na ito
ay may
lamang ang
na naka-frame sa kaliwa.
At isa pang halimbawa sa ilalim na frame:
frame = "below" >
Ang table na ito ay may isang frame sa ibaba.
Tingnan ang ilang mga talahanayan na may mga frame
Ang katangian ay katulad ng katangian ng frame, nakakaapekto lamang ito sa mga hangganan sa paligid ng mga selula ng talahanayan. Maaari kang magtakda ng mga panuntunan sa lahat ng mga cell, sa pagitan ng mga haligi, sa pagitan ng mga grupo tulad ng TBODY at TFOOT o wala.
Upang bumuo ng isang table na may mga linya lamang sa pagitan ng mga hilera, isulat ang:
rules = "row" >
Ang 4x4 table na ito ay may
ang mga hilera hindi haligi
na naka-outline sa
attribute attribute.
At isa pa sa mga linya sa pagitan ng mga haligi:
rules = "cols" >
Ito ay
isang talahanayan
kung saan ang
haligi
ay
naka-highlight
Narito ang isang halimbawa ng isang table na may mga panuntunan
Ang katangian ay nagbibigay ng impormasyon tungkol sa talahanayan para sa mga mambabasa ng screen at iba pang mga ahente ng gumagamit na maaaring magkaroon ng problema sa pagbabasa ng mga talahanayan. Upang gamitin ang buod na katangian, isulat mo ang isang maikling paglalarawan ng talahanayan at ilagay iyon bilang halaga ng katangian. Ang buod ay hindi ipapakita sa web page sa karamihan ng mga karaniwang web browser.
Narito kung paano sumulat ng isang simpleng mesa na may buod:
summary = "Ito ay isang sample na talahanayan na naglalaman ng impormasyon ng tagapuno. Ang layunin ng talahanayang ito ay upang ipakita ang isang buod." >
haligi 1 hilera 1
haligi 2 hilera 1
haligi 1 hilera 2
haligi 2 hilera 2
Tingnan ang isang talahanayan na may buod
Tinutukoy ng katangian ang lapad ng talahanayan sa alinman sa mga pixel o bilang isang porsyento ng elemento ng lalagyan. Kung ang lapad ay hindi naka-set, ang talahanayan ay kukuha lamang ng maraming espasyo na kinakailangan upang ipakita ang mga nilalaman, na may maximum na lapad katulad ng lapad ng elemento ng magulang.
Upang bumuo ng isang table na may isang partikular na lapad sa pixel, isulat ang:
width = "300" >
Ang mesa na ito ay 80% ng lapad ng lalagyan na ito.
At upang bumuo ng isang table na may isang lapad na isang porsyento ng elemento ng magulang, isulat ang:
width = "80%" >
Ang mesa na ito ay 80% ng lapad ng lalagyan na ito.
Tingnan ang isang halimbawa ng isang table na may lapad
Deprecated HTML 4.01 TABLE Attribute
May isang katangian ng elemento ng TALAAN na hindi na ginagamit sa HTML 4.01 at hindi na ginagamit sa HTML5: align . Hinahayaan ka ng katangiang ito na itakda mo kung saan naroroon ang talahanayan sa pahina na may kaugnayan sa teksto na nasa tabi nito. Ang katangiang ito ay hindi na ginagamit sa HTML 4.01, at dapat mong iwasan ang paggamit nito. Sa halip, dapat mong gamitin ang CSS property o ang margin-left: auto; at margin-right: auto; estilo. Ang float property ay nagbibigay sa iyo ng isang resulta na mas malapit sa kung ano ang ibinigay ng katangian, ngunit maaaring makaapekto ito sa paraan ng pagpapalabas ng mga nilalaman ng pahina. Ang margin-right: auto; at margin-left: auto; ay kung ano ang inirerekomenda ng W3C bilang isang alternatibo.
Narito ang isang deprecated na halimbawa gamit ang katangian ng pag-align:
align = "right" >
Ang talahanayang ito ay nakahanay nang tama
Ang teksto ay dumadaloy sa palibot nito sa kaliwa
Tingnan ang isang hindi na ginagamit na halimbawa gamit ang katangian ng pag-align.
At upang makakuha ng parehong epekto sa wastong (hindi na-deprecated) HTML, isulat ang:
style = "float: right;" >
Ang talahanayang ito ay nakahanay nang tama
Ang teksto ay dumadaloy sa palibot nito sa kaliwa
Ang mga sumusunod ay nagpapaliwanag ng mga katangian ng TALAAN na hindi bahagi ng anumang detalye ng HTML.
Ang nakaraang impormasyon ay naglalarawan ng mga katangian ng elemento ng HTML na wasto sa HTML 4.01 ngunit hindi na ginagamit sa HTML5.
Ang mga sumusunod ay naglalarawan ng mga katangian ng TALAAN na hindi wasto sa anumang kasalukuyang detalye. Kung hindi mo pag-aalaga ang tungkol sa kung napatunayan ng iyong mga pahina at gumagamit ang iyong mga gumagamit ng browser na sumusuporta sa mga elementong ito, maaari mong gamitin ang mga elementong ito. Ngunit karamihan sa kanila ay alinman sa hindi suportado sa mga modernong browser o may mga alternatibo na mas maraming mga pamantayan-sang-ayon.
Hindi namin inirerekomenda ang paggamit ng mga katangiang ito sa iyong mga talahanayan ng HTML.
Ang katangian ay isang lumang attribute na kasama bago ang CSS ay malawak na suportado. Pinapayagan ka nitong baguhin ang kulay ng background ng talahanayan. Maaari kang magtakda ng isang pangalan ng kulay o isang hexadecimal code. Ang katangian na ito ay gumagana pa rin sa maraming mga browser, ngunit para sa hinaharap-proofed HTML, hindi mo dapat gamitin ito, at gamitin ang CSS sa halip.
Ang mas mahusay na alternatibo sa katangiang ito ay ang estilo ng ari-arian.
Upang baguhin ang kulay ng background ng isang talahanayan, isulat ang:
style = "background-color: #ccc;" >
Ang talahanayan na ito ay may kulay abong background
Katulad ng katangian ng bgcolor, hinahayaan ka ng bordercolor na katangian na baguhin mo ang kulay ng katangian. Ang katangiang ito ay sinusuportahan lamang ng Internet Explorer. Sa halip, dapat mong gamitin ang ari-arian estilo ng hangganan-kulay.
Upang baguhin ang kulay ng hangganan ng iyong talahanayan, isulat ang:
style = "border-color: red;" >
Ang table na ito ay may pulang border.
Ang mga hangganan ng bordercolorlight at bordercolordark ay kasama sa Internet Explorer upang pahintulutan kang lumikha ng 3D na hangganan sa paligid ng iyong talahanayan. Gayunpaman, tulad ng IE8 at up, ito ay sinusuportahan lamang sa IE7 Pamantayan ng Mode at Quirks Mode . Sinasabi ng Microsoft na ang mga pag-aari na ito ay hindi na suportado.
Para sa isang maikling panahon, ang mga cols na katangian sa elemento ng TALAAN ay iminungkahi upang matulungan ang mga browser na malaman kung gaano karaming mga haligi ang may mesa. Ang saligan ay na ito ay makakatulong mapabilis ang pag-render ng mga malalaking talahanayan. Gayunpaman, ito ay ipinatupad lamang ng Internet Explorer, at sa IE8 at up, ito ay sinusuportahan lamang sa IE7 Standards Mode at Quirks Mode.
Sapagkat mayroong isang katangian ng lapad (hindi na ginagamit sa HTML5) maraming mga tao ang ipinapalagay na may taas na attribute para sa mga talahanayan pati na rin. Subalit dahil ang mga talahanayan ay sumunod sa lapad ng kanilang nilalaman o ang tinukoy na lapad sa CSS o lapad na katangian, ang taas ay hindi maaaring napigilan. Sa halip, pinapayagan ng mga browser ang katangian ng taas upang tukuyin ang minimum na taas ng talahanayan. Kung ang talahanayan ay mas mataas kaysa sa taas na iyon, ito ay magiging mas mataas. Ngunit dapat mong gamitin ang ari-arian
Gamit ang ari-arian ng taas ng CSS maaari mong pilitin ang taas kung gagamitin mo ang CSS property pati na rin upang tukuyin kung ano ang mangyayari sa anumang labis na nilalaman.
Upang itakda ang minimum na taas sa isang talahanayan, isulat ang:
style = "height: 30em;" >
Ang mesa na ito ay hindi bababa sa 30 em mataas.
Ang dalawang mga katangian at idinagdag ang puwang sa palibot ng kaliwa / kanang gilid (hspace) at itaas / ibaba (vspace) ng talahanayan. Dapat mong gamitin ang estilo ng ari-arian sa halip.
Upang itakda ang vertical space sa 20 pixels at ang pahalang na espasyo hanggang 40 pixels, isulat ang:
style = "margin: 20px 40px;"
Ang table na ito ay may isang vspace ng 20 pixels at isang hspace ng 40 pixels.
Ang attribute ay isang katangian ng boolean na tumutukoy kung ang mga nilalaman ng talahanayan ay dapat na balutin sa gilid ng elemento ng magulang o window o puwersahin ang pahalang na pag-scroll. Sa halip, dapat mong tukuyin ang mga katangian ng pambalot ng bawat cell ng talahanayan gamit ang CSS property.
Upang gumawa ng haligi na may maraming teksto na hindi balutin, isulat ang:
style = "white-space: nowrap;" > Ito ay isang hanay na may isang tonelada ng nilalaman. Ngunit kahit na mas malawak kaysa sa lalagyan ang teksto ay hindi dapat i-wrap sa susunod na linya, ngunit sa halip ay pilitin ang window ng browser na mag-scroll nang pahalang upang makita ang lahat ng nilalaman.
Sa wakas, ang katangian ay tumutukoy kung paano dapat ihanay ng mga nilalaman ng bawat cell patayo sa loob ng cell. Sa halip na di-wastong katangian na ito, dapat mong gamitin ang property ng CSS sa bawat cell na gusto mong baguhin ang pagkakahanay ng. Hindi mo mapansin ang mga epekto ng estilo na ito maliban kung ang mga nilalaman ng cell ay mas mababa kaysa sa magagamit na espasyo na nilikha ng iba, mas malaking mga cell.
Upang pilitin ang isang cell na ihanay sa ibaba (sa halip na sa gitna, bilang default), isulat ang:
Ang cell na ito ay mas mahaba kaysa sa iba pa at sa gayon ay pilitin ang taas na maging mas mataas. Kaya makikita mo na ang nakahanay na vertically aligned ay nakahanay sa ilalim.
style = "vertical-align: bottom;" > Mga nilalaman sa ibaba.
Mga nilalaman sa gitna.