Mga pagpipilian sa hangganan. Paglikha ng mga hangganan sa CSS. hangganan ng ari-arian. Halimbawa. Baguhin ang kulay ng frame sa mouse hover

ang katawan ng mesa ay matatagpuan. Ang katawan ay binubuo ng mga row at column. Ang talahanayan ay napuno ng linya sa linya.

Bawat tag lumilikha ng bagong linya. Dagdag pa sa nested nagagawa ang mga column. Maaari kang lumikha ng maraming column. Sa kasong ito, kailangan mong subaybayan ang bilang ng mga column sa bawat row. Halimbawa, kung may 5 column ang unang row, dapat may 5 column din ang mga sumusunod na row. Kung hindi ay lumutang ang mesa. Posibleng pagsamahin ang mga cell.

Paano gumawa ng table sa html

Narito ang isang halimbawa, html code:

Halimbawang talahanayan
Hanay 1 Hanay 2

Bigyang-pansin ang cell . Ginagamit namin ang espesyal na katangian ng colspan upang i-span ang mga cell nang pahalang. Ang numeric na halaga nito ay nagpapahiwatig ng bilang ng mga column na isasama. Mayroon ding analogue ng katangiang ito: tag (table header), kung saan kailangan mo ring ipasok ang colspan. Magiging pareho ang resulta. Ngunit madalas ay gumagamit sila ng regular na td.

Ngayon tingnan natin ang lahat ng mga katangian ng tag

.

Mga Katangian at Katangian ng Tag

Sa pagbubukas ng tag

Maaari mong tukuyin ang iba't ibang mga katangian.

1. Property align="parameter" - itinatakda ang pagkakahanay ng talahanayan. Maaaring kunin ang mga sumusunod na halaga:

Sa halimbawa sa itaas, inihanay namin ang talahanayan sa center align="center" .

Ang katangiang ito ay maaaring ilapat hindi lamang sa talahanayan, kundi pati na rin sa mga indibidwal na mga cell ng talahanayan

. Kaya, ang pagkakahanay ay magiging iba sa iba't ibang mga cell.

Halimbawa

, , , o
  • cols - ipinapakita ang linya sa pagitan ng mga column
  • wala - lahat ng hangganan ay nakatago
  • mga hilera - iginuhit ang isang hangganan sa pagitan ng mga hilera ng talahanayan na ginawa sa pamamagitan ng tag

    • 12. Property width="number" - nagtatakda ng lapad ng talahanayan: alinman sa mga pixel o sa mga porsyento.

    13. Property class="class_name" - maaari mong tukuyin ang pangalan ng klase kung saan kabilang ang talahanayan.

    14. Property style="styles" - ang mga istilo ay maaaring itakda nang isa-isa para sa bawat talahanayan.

    Ngayon ay oras na upang sumisid sa loob ng talahanayan at tingnan ang mga katangian ng mga cell ng talahanayan. Ang mga katangiang ito ay dapat na nakasulat sa pambungad na tag

    At Ang parehong mga pagpipilian ay magagamit bilang para sa ay hierarchically ilalapat sa lahat (Table Row) at nagtatapos sa tag. Ang isang solong cell sa isang hilera ay naka-frame sa pamamagitan ng isang pares ng mga tag (Data ng Talahanayan) o (Ulo ng Talahanayan). Tag . Mga code ng pagkumpleto, At maaaring tanggalin. Sa kasong ito, ang dulo ng row o paglalarawan ng cell ay ang simula ng susunod na row o cell, o ang dulo ng talahanayan. End table tag
    o mga linya
    ... ... ...

    2. Property background="URL" - nagtatakda ng background na larawan. Sa halip na ang URL, dapat isulat ang address ng background na larawan.

    Halimbawa

    Halimbawang talahanayan
    Hanay 1 Hanay 2

    Nagko-convert sa sumusunod sa pahina:

    Sa halimbawa sa itaas, ang aming background na imahe ay matatagpuan sa img folder (na nasa parehong direktoryo ng html page), at ang imahe ay tinatawag na fon.gif. Pakitandaan na sa tag ay nagdagdag kami ng style="color:white;" . Dahil halos itim ang background, para maiwasang maghalo ang text sa background, ginawa naming puti ang text.

    3. Property bgcolor="color" - nagtatakda ng kulay ng background ng talahanayan. Maaari kang pumili ng anumang kulay mula sa buong palette (tingnan ang mga code at pangalan ng mga kulay ng html)

    4. Property border="number" - itinatakda ang kapal ng hangganan ng talahanayan. Sa mga nakaraang halimbawa, tinukoy namin ang border="1" , na nangangahulugang ang kapal ng hangganan ay 1 pixel.

    5. Property bordercolor="color" - nagtatakda ng kulay ng border. Kung border="0" pagkatapos ay walang hangganan at ang kulay ng hangganan ay walang kahulugan.

    6. Property cellpadding="number" - indent mula sa frame papunta sa mga nilalaman ng cell sa mga pixel.

    7. Property cellspacing="number" - ang distansya sa pagitan ng mga cell sa mga pixel.

    8. Property cols="number" - ang bilang ng mga column. Kung hindi mo ito itatakda, ang browser mismo ang tutukoy sa bilang ng mga column. Ang pagkakaiba lang ay ang pagtukoy sa parameter na ito ay malamang na mapabilis ang paglo-load ng talahanayan.

    9. Property frame="parameter" - kung paano ipakita ang mga hangganan sa paligid ng talahanayan. Maaaring kunin ang mga sumusunod na halaga:

    • walang bisa - huwag gumuhit ng mga hangganan
    • hangganan - hangganan sa paligid ng mesa
    • sa itaas - hangganan sa tuktok na gilid ng talahanayan
    • sa ibaba - hangganan sa ibaba ng talahanayan
    • hsides - magdagdag lamang ng mga pahalang na hangganan (itaas at ibaba ng talahanayan)
    • vsides - gumuhit lamang ng mga patayong hangganan (sa kaliwa at kanan ng talahanayan)
    • rhs - hangganan lamang sa kanang bahagi ng talahanayan
    • lhs - hangganan lamang sa kaliwang bahagi ng talahanayan

    10. Property height="number" - nagtatakda ng taas ng talahanayan: alinman sa mga pixel o sa mga porsyento.

    11. Property rules="parameter" - kung saan ipapakita ang mga hangganan sa pagitan ng mga cell. Maaaring kunin ang mga sumusunod na halaga:

    • lahat - isang linya ang iginuhit sa paligid ng bawat cell ng talahanayan
    • mga grupo - ipinapakita ang isang linya sa pagitan ng mga pangkat na nabuo ng mga tag
    .

    Mga Katangian at Katangian

    1. Property align="parameter" - nagtatakda ng alignment ng isang indibidwal na table cell. Maaaring kunin ang mga sumusunod na halaga:

    • kaliwa - kaliwang pagkakahanay
    • center - center alignment
    • kanan - tamang pagkakahanay

    2. Property background="URL" - nagtatakda ng background na larawan ng cell. Sa halip na ang URL, ang address ng background na larawan ay dapat na nakasulat.

    3. Property bgcolor="color" - nagtatakda ng kulay ng background ng cell.

    4. Property bordercolor="color" - nagtatakda ng kulay ng cell border.

    5. Property char="letter" - tumutukoy sa titik kung saan dapat gawin ang alignment. Ang halaga ng align attribute ay dapat itakda sa char.

    6. Property colspan="number" - nagtatakda ng bilang ng mga pahalang na cell na isasama.

    7. Property height="number" - itinatakda ang taas ng talahanayan: alinman sa mga pixel o bilang isang porsyento.

    8. Property width="number" - itinatakda ang lapad ng talahanayan: alinman sa mga pixel o bilang isang porsyento.

    9. Property rowspan="number" - nagtatakda ng bilang ng mga patayong cell na isasama.

    10. Property valign="parameter" - patayong pagkakahanay ng mga nilalaman ng cell.

    • itaas - ihanay ang mga nilalaman ng cell sa tuktok na gilid ng row
    • gitna - gitnang pagkakahanay
    • ibaba - pagkakahanay sa ilalim na gilid
    • baseline - pagkakahanay sa baseline
    Tandaan 1

    Para sa tag

    . Mga parameter para sa isang tag
    sa loob niya

    Paano mapipigilan ang mga hangganan ng cell sa isang talahanayan na magkadikit

    Kung gagamit ka ng border (cell border) at zero padding sa pagitan ng mga cell, nakadikit pa rin ang mga ito at makakakuha ka ng double border . Upang maiwasan ito, kailangan mong tukuyin ang border-collapse: collapse sa mga istilo ng talahanayan:

    ...

    Minamahal na mambabasa, ngayon ay marami ka nang natutunan tungkol sa html table tag. Ngayon ipinapayo ko sa iyo na magpatuloy sa susunod na aralin.


    Detalyadong tinatalakay ng lecture na ito ang mga prinsipyo ng paggamit ng mga talahanayan sa HTML markup. Kabilang dito ang isang tabular na organisasyon ng teksto, isang tabular na coordinate grid, at mga graphics na nakaayos sa mga talahanayan.

    Mga tool para sa paglalarawan ng mga talahanayan sa HTML

    Sa pagbuo ng WWW, naging malinaw na ang mga mapagkukunang nilalaman sa HTML ay hindi sapat upang magbigay ng mataas na kalidad na pagpapakita ng iba't ibang uri ng mga dokumento. Ang kawalan ng HTML ay ang kakulangan ng mga tool para sa pagpapakita ng mga talahanayan. Para sa layuning ito, preformatted text (tag 

    ), kung saan ang talahanayan ay nakabalangkas sa mga ASCII na character.  Ngunit ang anyo ng pagpapakita ng mga talahanayan ay hindi sapat na mataas ang kalidad at namumukod-tangi sa pangkalahatang istilo ng dokumento.  Pagkatapos ng pagpapakilala ng mga talahanayan sa HTML, ang mga Webmaster ay hindi lamang isang tool para sa paglalagay ng text at numerical na data, ngunit isang mahusay na tool sa disenyo para sa paglalagay ng mga graphic na larawan at teksto sa tamang lugar sa screen.
    

    Paglikha ng mga talahanayan sa HTML
    

    Ang tag ay ginagamit upang ilarawan ang mga talahanayan<ТАВLЕ>.  Tag<ТАВLЕ>, tulad ng marami pang iba, awtomatikong isinasalin ang linya bago at pagkatapos ng talahanayan.
    

    Paglikha ng isang table row - tag<ТR>
    

    Tag<ТR>(Table Row) ay gumagawa ng table row.  Ang lahat ng teksto, iba pang mga tag at mga katangian na kailangang ilagay sa isang linya ay dapat ilagay sa pagitan ng mga lt;TR> tag.
    

    Pagtukoy sa mga cell ng talahanayan - tag<ТD>
    

    Ang mga cell na may data ay karaniwang inilalagay sa loob ng isang hilera ng talahanayan.  Ang bawat cell na naglalaman ng teksto o larawan ay dapat na napapalibutan ng mga tag<ТD>.  Bilang ng mga tag<ТD>sa isang hilera ay tumutukoy sa bilang ng mga cell
    
 

 
    mesa
    Kung ang isang talahanayan ay may dalawang TR tag, pagkatapos ay mayroon itong dalawang row.
    Kung mayroong tatlong TD tag sa isang linya, pagkatapos ay sa loob nito tatlong hanay.

    Mga heading ng column ng talahanayan - tag<ТН>

    Nakatakda ang mga heading para sa mga column at row ng talahanayan gamit ang header tag<ТН>(TableHeader, pamagat ng talahanayan). Ang mga tag na ito ay magkatulad<ТD>. Ang pagkakaiba ay ang text na nakapaloob sa pagitan ng mga tag<ТН>, ay awtomatikong nakasulat sa bold at inilalagay sa gitna ng cell bilang default. Maaari mong alisin sa gitna ang teksto at ihanay ang teksto sa kaliwa o kanan. Kung gagamitin mo<ТD>may tag<В>at katangian<АLIGN=center>, ang teksto ay magmumukha ring pamagat. Gayunpaman, tandaan na hindi lahat ng browser ay sumusuporta sa bold na font sa mga talahanayan, kaya mas mainam na magtakda ng mga heading ng talahanayan gamit ang<ТН>.

    Ang header ay nakasentro bilang default Maaaring sumali ang header sa mga column
    Maaaring ilagay ang header bago ang mga column Teksto o data Teksto o data
    Maaaring pagdugtungin ng header ang mga linya Teksto o data Teksto o data
    Teksto o data Teksto o data
    Teksto o data Teksto o data

    Paggamit ng mga header ng talahanayan - tag<САРТIОN>

    Tag

    nagbibigay-daan sa iyo na lumikha ng mga header ng talahanayan. Bilang default, ang mga heading ay nakasentro at inilalagay sa itaas (<САРТION АLIGN=top>), o sa ilalim ng mesa (<САРТION ALIGN=bottom>). Ang pamagat ay maaaring binubuo ng anumang teksto at mga larawan. Ang teksto ay hahatiin sa mga linya na tumutugma sa lapad ng talahanayan. Minsan tag<САРТION>ginagamit upang pumirma sa isang larawan. Upang gawin ito, sapat na upang ilarawan ang isang talahanayan na walang mga hangganan.

    Header sa itaas ng talahanayan
    Teksto o data Teksto o data Teksto o data Teksto o data
    Heading sa ibaba ng table
    Teksto o data Teksto o data Teksto o data

    attribute ng NOWRAP

    Karaniwan, ang anumang text na hindi kasya sa isang row ng isang table cell ay lilipat sa susunod na row. Gayunpaman, kapag ginagamit ang NOWRAP attribute na may mga tag<ТН>o<ТD>Ang haba ng cell ay pinalawak upang ang tekstong nilalaman nito ay magkasya sa isang linya.

    katangian ng COLSPAN

    Mga tag<ТD>At<ТН>binago gamit ang COLSPAN attribute (Column Span, column connection). Kung gusto mong gawing mas malawak ang isang cell kaysa sa itaas o ibaba, maaari mong gamitin ang attribute na COLSPAN upang i-stretch ito sa anumang bilang ng mga regular na cell.

    Kung gusto mong gawing mas malawak ang anumang cell kaysa sa itaas o ibaba, maaari mong gamitin ang COLSPAN=2 attribute,
    upang iunat ito sa anumang bilang ng mga regular na selula.

    katangian ng ROWSPAN

    ROWSPAN attribute na ginagamit sa mga tag<ТD>At<ТН>, ay katulad ng COLSPAN= attribute, tanging ito ay tumutukoy sa bilang ng mga linya kung saan ang cell ay nakaunat. Kung tinukoy mo ang isang numerong mas malaki sa isa sa katangian ng ROWSPAN=s, ang katumbas na bilang ng mga row ay dapat nasa ilalim ng stretched cell. Hindi ito maaaring ilagay sa ibaba ng mesa.

    WIDTH attribute

    Ang WIDTH attribute ay ginagamit sa dalawang kaso. Maaari mo itong ilagay sa isang tag<ТАВLЕ>upang ibigay ang lapad ng buong talahanayan, o maaaring magamit sa mga tag<ТD>o<ТН>upang itakda ang lapad ng isang cell o grupo ng mga cell. Ang lapad ay maaaring tukuyin sa mga pixel o bilang isang porsyento. Halimbawa, kung itinakda mo sa tag<ТАВLЕ>WIDTH=250, makakakuha ka ng table na 250 pixels ang lapad anuman ang laki ng page sa iyong monitor. Kapag nagtatakda ng WIDТН=50% sa tag<ТАВLЕ>sasakupin ng talahanayan ang kalahati ng lapad ng pahina sa anumang laki ng larawan sa screen. Kaya kapag tinukoy ang lapad ng talahanayan bilang isang porsyento, tandaan na kung ang user ay may makitid na viewport, ang iyong pahina ay maaaring magmukhang medyo kakaiba. Kung gumagamit ka ng mga pixel at ang talahanayan ay mas malawak kaysa sa lugar ng pagtingin, isang scroll bar ay lilitaw sa ibaba upang lumipat pakaliwa at pakanan sa buong pahina. Depende sa mga gawain sa kamay, alinman sa paraan ng pagtatakda ng lapad ng talahanayan ay maaaring maging kapaki-pakinabang.

    Teksto o data - lapad 100%
    o
    Teksto o data - lapad 50%
    o
    Teksto o data - 200 pixels ang lapad
    o
    Teksto o data - 100 pixels ang lapad

    Paglalapat ng mga walang laman na cell

    Kung walang data ang isang cell, wala itong mga hangganan. Kung gusto mong magkaroon ng mga hangganan ang isang cell ngunit walang nilalaman, kailangan mong maglagay ng isang bagay dito na hindi makikita kapag tiningnan. Maaari kang gumamit ng walang laman na string<ВR>. Maaari mo ring tukuyin ang mga walang laman na column sa pamamagitan ng pagtukoy sa lapad ng mga ito sa pixels o relative units at hindi paglalagay ng anumang data sa mga resultang cell. Maaaring maging kapaki-pakinabang ang tool na ito kapag naglalagay ng text at graphics sa isang page.

    CELLADDING attribute

    Tinutukoy ng katangiang ito ang lapad ng walang laman na espasyo sa pagitan ng mga nilalaman ng cell at ng mga hangganan nito, iyon ay, itinatakda nito ang mga margin sa loob ng cell.

    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data

    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data

    ALIGN at VALIGN na mga katangian

    Mga tag<ТR>, <ТD>At<ТН>maaaring baguhin gamit ang ALIGN at VALIGN attributes. Tinutukoy ng attribute na ALIGN kung ang teksto at mga graphics ay nakahanay nang pahalang, ibig sabihin, kaliwa o kanan, o nakagitna. Maaaring itakda ang pahalang na pagkakahanay sa maraming paraan:

    ALIGN=bleedleft pinipindot ang mga nilalaman ng cell malapit sa kaliwang gilid.

    ALIGN=kaliwa Ini-align ang mga nilalaman ng isang cell sa kaliwa, na isinasaalang-alang ang indentation na tinukoy ng CELLPADDING attribute.

    ALIGN=gitna Nakasentro ang mga nilalaman ng cell.

    ALIGN=tama Ini-align ang mga nilalaman ng isang cell sa kanan, na isinasaalang-alang ang indentation na tinukoy ng CELLPADDING attribute.

    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data

    Ang VALIGN attribute ay patayo na ini-align ang text at graphics sa loob ng isang cell. Maaaring itakda ang vertical alignment sa maraming paraan:

    VALIGN=itaas Ini-align ang mga nilalaman ng isang cell sa tuktok na hangganan nito.

    VALIGN=gitna Nakasentro ang mga nilalaman ng cell patayo.

    VALIGN=ibaba Ini-align ang mga nilalaman ng isang cell sa ibabang hangganan nito.

    Ang VALIGN attribute ay patayo na ini-align ang text at graphics sa loob ng isang cell. tuktok, gitna, ibaba.
    VALIGN=top I-align ang mga nilalaman ng isang cell sa tuktok na hangganan nito. tuktok, tuktok, itaas.
    VALIGN=gitna Nakasentro sa mga nilalaman ng isang cell patayo. gitna, gitna, gitna.
    VALIGN=bottom I-align ang mga nilalaman ng isang cell sa ibabang hangganan nito. ibaba, ibaba, ibaba.

    BORDER attribute

    Sa tag<ТАВLЕ>madalas na matukoy kung paano titingnan ang mga hangganan, iyon ay, ang mga linya na nakapalibot sa mga cell ng talahanayan at ang talahanayan mismo. Kung hindi mo tinukoy ang isang frame, makakakuha ka ng isang talahanayan na walang mga linya, ngunit ang espasyo ay ilalaan para sa kanila. Ang parehong resulta ay maaaring makamit sa pamamagitan ng pagtatakda<ТАВLЕ ВОRDER=0>. Minsan gusto mong gawing mas makapal ang hangganan upang ito ay maging mas mahusay. Maaari kang magtakda ng napaka-bold na mga hangganan upang maakit ang pansin sa isang larawan o teksto. Kapag gumagawa ng mga nested table, kailangan mong gumawa ng mga hangganan ng iba't ibang kapal para sa iba't ibang mga talahanayan upang gawing mas madaling makilala ang mga ito.

    CELLSPACING attribute

    Tinutukoy ng katangian ng CELLSPACING ang lapad ng mga puwang sa pagitan ng mga cell sa mga pixel. Kung hindi tinukoy ang attribute na ito, ang default na value ay dalawang pixel. Gamit ang CELLSPACING= attribute, maaari kang maglagay ng text at graphics saanman mo kailangan ang mga ito. Kung gusto mong mag-iwan ng bakanteng espasyo, maaari kang magsulat ng puwang sa cell.

    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data

    BGCOLOR attribute

    Binibigyang-daan ka ng attribute na ito na itakda ang kulay ng background. Depende sa kung aling tag (TALAHANAYAN, TR, TD) ito ginagamit, ang kulay ng background ay maaaring itakda para sa buong talahanayan, para sa isang hilera, o para sa isang indibidwal na cell. Ang halaga ng katangiang ito ay ang RGB code o karaniwang pangalan ng kulay.

    Teksto o data Teksto o data Teksto o data
    Teksto o data Teksto o data Teksto o data

    BACKGROUND attribute

    Tinutukoy ng katangiang ito ang larawan sa background para sa mga talahanayan. Nalalapat sa TABLE at TD tags. Ang halaga nito ay ang URL ng background image file. Ang paggamit ng katangiang ito ay tinalakay sa ibaba.

    Paggamit ng mga talahanayan sa disenyo ng pahina

    Ang magandang bagay tungkol sa mga talahanayan ay maaari mong gawin ang kanilang mga hangganan na hindi nakikita kung gusto mo. Pinapayagan nito ang paggamit ng tag<ТАВLЕ>magandang ilagay ang text at graphics sa page. Bye tag<ТАВLЕ>nananatiling ang tanging makapangyarihang tool sa pag-format sa HTML. Ang mga taga-disenyo ng web page ay mayroon na ngayong halos kaparehong kalayaan hinggil sa paggamit ng puting espasyo bilang mga naka-print na taga-disenyo ng pahina. Ang mga talahanayan ay ang pinakamahusay na paraan upang lumayo sa hierarchical na pag-aayos ng teksto sa mga Web page.

    Kung sinusuportahan ng browser ang mga talahanayan, kadalasan ay tama nitong ipapakita ang mga pinakakawili-wiling epekto na nakuha gamit ang mga ito

    Ural State Pedagogical University

    Maligayang pagdating!

    Kurso sa pagsasanay na "Mga Pangunahing Kaalaman ng WEB mastering"

    Paglikha ng mga makukulay na talahanayan

    Pinapayagan ka ng ilang browser na magpakita ng mga kulay. Mayroong ilang mga paraan upang kulayan ang isang talahanayan, karamihan ay depende sa browser na iyong ginagamit.

    May kulay na mga hangganan sa Netscape Navigator. Hindi lamang maaari mong palibutan ang talahanayan ng isang magandang hangganan, ngunit maaari mo ring itakda ito sa isang kulay na naiiba sa mga kulay ng teksto at background. Gumawa ng simpleng gray na GIF (o anumang GIF na gusto mong magkaroon bilang background) at tukuyin ito sa isang tag<ВODY>bilang isang background ng pahina. Pagkatapos ay itakda ang kulay ng background ng pahina. Bilang resulta, ang iyong tag<ВОDY>magiging ganito ang hitsura:

    Nakagawa ka ng double background - GIF at isang tinukoy na kulay. Bilang resulta, ang kulay ng background ay makikita sa lahat ng mga hangganan ng talahanayan at mga pahalang na linya (<НR>). Gray man o hindi ang iyong background GIF, kapansin-pansin ang mga may kulay na linya at hangganan ng talahanayan. Kung ang background GIF ay hindi masyadong kumplikado, ang oras ng pag-load ng pahina ay tataas lamang nang bahagya.

    Kabanata 4

    Mga talahanayan sa HTML

    Ang isa sa pinakamakapangyarihan at malawakang ginagamit na mga tampok sa HTML ay mga talahanayan. Ang konsepto ng tabular presentation ng data ay hindi nangangailangan ng karagdagang paliwanag. Sa HTML, ang mga talahanayan ay ginagamit hindi lamang ayon sa kaugalian bilang isang paraan ng pagpapakita ng data, kundi pati na rin bilang isang paraan ng pag-format ng mga Web page. Magbigay tayo ng mga halimbawa ng totoong buhay na mga dokumento kung saan ang isang tabular na representasyon ay isang maginhawang paraan upang makabuo ng isang dokumento. Sa Fig. Ang Figure 4.1 ay nagpapakita ng isang tipikal na halimbawa ng paggamit ng mga talahanayan upang ipakita ang numerical data na nahahati sa mga row at column. Sa Fig. 4.2 ang paggamit ng isang talahanayan ay nagsisilbi lamang sa mga layunin ng pag-format ng dokumento at pagtukoy ng kaugnay na posisyon ng mga elemento ng pahina. Kapag tinitingnan ang naturang dokumento, hindi kaagad halata na ang isang talahanayan ay ginagamit upang itayo ito, dahil ang mga frame sa paligid ng mga cell nito ay hindi iginuhit.

    Ang unang bersyon ng wikang HTML ay hindi nagbibigay ng mga espesyal na tool para sa pagpapakita ng mga talahanayan, dahil ito ay pangunahing inilaan para sa pagsulat ng simpleng teksto. Sa pagbuo ng mga lugar ng aplikasyon ng mga dokumento ng HTML, ang gawain ng pagpapakita ng data, na karaniwang kinakatawan ng isang bilang ng mga hilera at haligi, ay naging apurahan. Ang paglikha ng mga dokumentong naglalaman ng column-aligned na data ay una nang isinagawa gamit ang preformatted text, kung saan ang kinakailangang alignment ay sinigurado sa pamamagitan ng pagpapakilala ng kinakailangang bilang ng mga puwang. Alalahanin na ang teksto sa loob ng isang pares ng mga tag 

    AT
    lalabas sa monospace na font, at lahat ng espasyo at tab ay makabuluhan. Ang gawain ng pag-align ng naturang teksto ay ginawa nang manu-mano, na makabuluhang nagpabagal sa paglikha ng mga dokumento. Ang suporta para sa pagtatanghal ng tabular na data ay naging isang de facto na pamantayan, dahil ito ay unang ipinatupad sa lahat ng nangungunang mga browser at pagkatapos lamang ng mahabang panahon ay na-enshrined sa HTML 3.2 na detalye.

    Ang mga espesyal na tool para sa paglikha ng mga talahanayan, gayunpaman, ay hindi nag-aalis ng posibilidad ng paggamit ng preformatted na teksto. Ang paggamit ng mga talahanayan ay hindi limitado sa data na binubuo ng mga row at column. Ang isang application ay upang ayusin ang pag-aayos ng iba't ibang data sa isang pahina, na maaaring binubuo ng simpleng teksto, mga imahe, iba pang mga talahanayan, atbp. Ang kabanatang ito ay nakatuon sa mga patakaran para sa paglikha ng mga talahanayan at mga halimbawa ng kanilang paggamit.

    kanin . 4.1. Karaniwang Halimbawa ng HTML Table


    kanin . 4.2. Halimbawa ng talahanayan na walang hangganan

    Paglikha ng mga simpleng HTML na talahanayan

    Isaalang-alang muna natin ang pinakamababang hanay ng mga tag at ang kanilang mga parameter, kinakailangan at sapat upang lumikha ng mga simpleng talahanayan, at pagkatapos ay magpatuloy sa kanilang detalyadong paglalarawan.

    Ang mga paglalarawan ng mga talahanayan ay dapat na matatagpuan sa loob ng seksyon ng dokumento . Ang isang dokumento ay maaaring maglaman ng isang di-makatwirang bilang ng mga talahanayan, at ang pagpupugad ng mga talahanayan sa loob ng bawat isa ay pinapayagan. Ang bawat talahanayan ay dapat magsimula sa tag

    at nagtatapos sa tag
    . Sa loob ng pares na ito ng mga tag ay isang paglalarawan ng mga nilalaman ng talahanayan. Ang anumang talahanayan ay binubuo ng isa o higit pang mga row, ang bawat isa ay naglalaman ng data para sa mga indibidwal na cell.

    Ang bawat linya ay nagsisimula sa tag

    AtAtkaraniwang ginagamit para sa mga cell ng header ng talahanayan, at - para sa mga cell ng data. Ang pagkakaiba sa paggamit ay ang uri lamang ng font na ginamit bilang default upang ipakita ang mga nilalaman ng mga cell, pati na rin ang lokasyon ng data sa loob ng cell. Mga nilalaman ng uri ng mga cell ay ipinapakita sa Bold font at matatagpuan sa gitna (ALIGN=CENTER, VALIGN=MIDDLE). Mga cell na tinukoy sa pamamagitan ng tag bilang default, ipinapakita ang data na nakahanay sa kaliwa (ALIGN=LEFT) at gitna (VALIGN=MIDDLE) sa patayong direksyon.

    Mga tag

    		At hindi maaaring lumabas sa labas ng paglalarawan ng row ng talahanayan
    hindi maaaring tanggalin.

    Ang bilang ng mga row sa talahanayan ay tinutukoy ng bilang ng mga pambungad na tag , at ang bilang ng mga column ay ang maximum na bilang o sa lahat ng linya. Ang ilang mga cell ay maaaring walang anumang data na inilalarawan ng isang pares ng mga tag na sumusunod sa isang hilera - , . Kung ang isa o higit pang mga cell na matatagpuan sa dulo ng isang hilera ay walang data, kung gayon ang kanilang paglalarawan ay maaaring tanggalin, at ang browser ay awtomatikong magdaragdag ng kinakailangang bilang ng mga walang laman na cell. Kasunod nito na ang pagtatayo ng mga talahanayan kung saan ang iba't ibang bilang ng mga haligi ng parehong laki ay matatagpuan sa iba't ibang mga hilera ay hindi pinahihintulutan.

    Ang talahanayan ay maaaring magkaroon ng isang header, na binubuo ng isang pares ng mga tag At. Ang paglalarawan ng header ng talahanayan ay dapat na matatagpuan sa loob ng mga tag

    At
    kahit saan, ngunit sa labas ng lugar ng paglalarawan ng alinman sa mga tag , o . Ayon sa detalye ng wikang HTML, ang lokasyon ng paglalarawan ng header ay mas mahigpit na kinokontrol: dapat itong matatagpuan kaagad pagkatapos ng tag at hanggang sa una . Inirerekomenda namin na sumunod ka sa panuntunang ito.

    Bilang default, ang teksto ng pamagat ng talahanayan ay nakaposisyon sa itaas nito (ALIGN=TOP) at nakagitna nang pahalang.

    Ang mga nakalistang tag ay maaaring may mga parameter, ang bilang at mga halaga ay iba. Gayunpaman, sa pinakasimpleng kaso, ang mga tag ay ginagamit nang walang mga parameter, na kumukuha ng mga default na halaga.

    Ang impormasyong ito ay sapat na upang bumuo ng mga elementarya na talahanayan. Magbigay tayo ng isang halimbawa ng isang simpleng talahanayan, na binubuo ng dalawang hanay at dalawang hanay, ang pagpapakita nito ay ipinapakita sa Fig. 4.3.

    Isang halimbawa ng isang simpleng talahanayan

    Cell 1 row 1 Cell 2 row 1
    Cell 1 row 2 Cell 2 row 2


    kanin. 4.Z. Isang halimbawa ng isang simpleng talahanayan

    Pagtatanghal ng mga talahanayan sa isang pahina

    Tingnan natin ang layunin ng iba't ibang mga parameter na maaaring magamit sa mga tag na naglalarawan sa mga talahanayan.

    Pamagat ng talahanayan

    Tag ng header ng talahanayan ay may iisang valid na parameter na ALIGN, na kumukuha ng mga value na TOP (header sa itaas ng table) o BOTTOM (header sa ibaba ng table). Maaaring tanggalin ang parameter ng ALIGN, na tumutugma sa value na ALIGN=TOP. Sa pahalang na direksyon, ang header ng talahanayan ay palaging matatagpuan sa gitna ng talahanayan. Maaaring walang header ang talahanayan. Sa karamihan ng mga kaso, ginagamit ang plain text bilang header ng talahanayan, na kinokontrol ng HTML na detalye, ngunit sa katotohanan sa pagitan ng mga tag At katanggap-tanggap na isulat ang anumang elemento ng HTML na ginamit sa seksyon . Narito ang isang halimbawa ng isang entry sa header ng talahanayan:

    Ang heading ay matatagpuan sa ibaba ng talahanayan

    Kung ang paglalarawan ng header na ito ay idinagdag sa halimbawa sa itaas, ang talahanayan ay ipapakita tulad ng ipinapakita sa Fig. 4.4.

    kanin. 4.4. Table na may header

    Nagbibigay ang Microsoft Internet Explorer ng mga karagdagang opsyon para sa pagpili ng placement ng header. Ang ALIGN parameter ay tumatanggap ng LEFT, CENTER, at RIGHT na mga halaga para sa pahalang na pagkakahanay, kasama ang mga halagang inilarawan sa itaas. Tandaan na ito ay isa sa mga bihirang kaso kung saan ang malawakang ginagamit na parameter ng ALIGN ay maaaring gamitin para sa parehong pahalang at patayong pagkakahanay. Halimbawa, ang pagsusulat ng ALIGN=RIGHT ay titiyakin na ang header ay nakaposisyon na flush sa kanang bahagi at nakaposisyon sa itaas ng talahanayan. Kung isusulat mo ang ALIGN=BOTTOM, kung gayon, tulad ng halimbawa sa itaas, ang header ay matatagpuan sa ibaba ng talahanayan. Gayunpaman, hindi pinapayagan ang paggamit ng parameter na ALIGN nang dalawang beses sa parehong header. Samakatuwid, ang isang espesyal na parameter para sa vertical alignment ay karagdagang ipinakilala - VALIGN, na kumukuha ng mga halaga TOP o BOTTOM. Halimbawa, para sa isang heading na matatagpuan sa ibaba ng isang left-aligned na talahanayan, ganito ang hitsura ng paglalarawan:

    Nakaposisyon ang heading sa ibaba, naka-align sa kaliwa

    Ang isang talahanayan na may ganitong paglalarawan ng header sa Microsoft Internet Explorer ay ipapakita bilang mga sumusunod (Larawan 4.5). Kung ang halimbawang ito ay titingnan sa Netscape, ang header ay ilalagay bilang default, ibig sabihin, sa itaas ng talahanayan at sa gitna sa pahalang na direksyon.

    kanin. 4.5. Horizontal table header alignment sa Microsoft Internet Explorer

    Ang mga kakayahan sa horizontal alignment ng table header ay isang extension ng HTML specification at hindi sinusuportahan ng Netscape Navigator at samakatuwid ay dapat lamang gamitin kapag talagang kinakailangan.

    Mga pagpipilian sa tag

    Ang pangunahing tag na ginagamit sa paggawa ng mga talahanayan ay ang tag

    . Maaari itong magamit sa isang bilang ng mga parameter, na lahat ay maaaring tanggalin. Ang hanay ng mga katanggap-tanggap na parameter ay depende sa browser. Ayon sa detalye ng HTML sa tag
    Maaaring gamitin ang mga sumusunod na parameter: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Ang mga browser ng NetScape at Microsoft Internet Explorer ay nagpapahintulot sa paggamit ng HEIGHT at BGCOLOR parameter bilang karagdagan sa limang parameter na nakalista. Pinapayagan ka rin ng ilang browser na magtakda ng iba pang mga opsyon. Isaalang-alang natin ang layunin ng mga karaniwang ginagamit na parameter ng tag
    .

    Parameter ng BORDER

    Kinokontrol ng parameter ng BORDER ang hitsura ng isang hangganan sa paligid ng bawat cell, na mahalagang mga linya ng grid ng talahanayan, at sa paligid ng buong talahanayan. Bilang default, hindi iginuhit ang mga frame, at makikita lang ng user ang pantay na espasyong text ng mga cell ng talahanayan sa screen. Mayroong maraming mga sitwasyon kapag ang paggamit ng mga talahanayan na walang mga frame ay lubos na makatwiran, halimbawa, para sa mga listahan ng multi-column na ipinatupad gamit ang mga talahanayan, o para sa pagtukoy ng eksaktong kamag-anak na posisyon ng mga larawan at teksto. Gayunpaman, sa karamihan ng mga kaso, para sa tradisyonal na paggamit ng talahanayan, kapaki-pakinabang na paghiwalayin ang mga cell nito mula sa isa't isa gamit ang mga linya ng grid, na ginagawang mas madaling makita at maunawaan ang impormasyong nasa talahanayan.

    Upang magdagdag ng mga frame sa talahanayan, dapat mong isama sa code

    BORDER parameter, na maaaring magkaroon ng numeric na halaga.

    Halimbawa,

    o
    .

    Tinutukoy ng numerical value ng parameter ang kapal ng hangganan sa mga pixel na iginuhit sa paligid ng buong talahanayan, ngunit hindi nakakaapekto ang halagang ito sa kapal ng mga hangganan sa paligid ng bawat cell. Kung walang numerong halaga, karaniwang ipinapalagay na ito ang pinakamababang halaga (1), kahit na ang istilo ng pagpapakita ng mga hangganan ay maaaring magkaiba sa pagitan ng mga browser. Walang kakayahang malayang kontrolin ang pagpapakita ng hangganan sa paligid ng buong talahanayan at ang mga hangganan sa paligid ng mga cell.

    Ang isang halimbawa ng isang talahanayan na may isang frame na 10 pixel ang kapal ay ipinapakita sa Fig. 4.6.


    kanin. 4.6. Talahanayan na may 10 pixel na hangganan

    Ang detalye ng HTML 3.0 ay walang kasamang halaga para sa parameter ng BORDER. Ginagawa lang ito sa HTML 3.2. Kaya, sa partikular, ang mga unang bersyon ng Microsoft Internet Explorer ay hindi pinapayagan ang pagtatakda ng numerical na halaga.

    Tandaan na kung ang parameter ng BORDER ay wala, ang mga hangganan ay hindi iguguhit, ngunit ang espasyo ay natitira para sa kanila (ito ay nalalapat lamang sa Netscape). Ang kabuuang sukat ng talahanayan ay hindi nagbabago sa kawalan o pagkakaroon ng parameter ng BORDER (ang pagbubukod ay kapag ang BORDER=0 ay tinukoy). Kaya, ang pinakamababang distansya sa pagitan ng dalawang katabing mga cell sa mga kasong ito ay magiging katumbas ng dalawang beses sa kapal ng frame, ibig sabihin, dalawang pixel. Posibleng maglagay ng mga cell nang malapit sa isa't isa hangga't maaari sa pamamagitan ng pagtatakda ng BORDER=0, na nangangahulugang walang mga frame. Maaaring hindi sinusuportahan ng ilang browser ang pagtatakda ng parameter ng BORDER sa isang numeric na halaga, kung saan ang isang halaga ng zero ay hindi papansinin at ang talahanayan ay iguguhit na may mga hangganan.

    Narito ang ilang halimbawa:

    Lahat ng tatlong halimbawang ibinigay sa itaas ay ipapakita nang iba ng Netscape browser. Tandaan na ito ay isang medyo kakaibang kaso kung saan hindi namin maaaring pag-usapan ang tungkol sa isang default na halaga. Ang ikatlong halimbawa, kung saan inalis ang parameter ng BORDER, ay iba sa anumang halimbawa kung saan naroroon ang parameter na ito. Para sa Microsoft Internet Explorer, ang pangalawa at pangatlong halimbawa ay magkapareho, kaya para sa browser na iyon ang default na halaga para sa parameter ng BORDER ay zero.

    Parameter ng CELLSPACING

    Parameter writing form: CELLSPACING=num, kung saan ang num ay ang numerical value ng parameter sa pixels, na hindi maaaring tanggalin. Tinutukoy ng value num ang distansya sa pagitan ng mga katabing cell (mas tiyak, sa pagitan ng mga cell frame) nang pahalang at patayo. Ang default na halaga ay nakatakda sa dalawa. Tandaan na ayon sa kaugalian sa mga sistema ng pag-publish, ang mga katabing table ng mga cell ay may isang karaniwang hangganan. Sa mga HTML na talahanayan, bilang default, ang espasyo ay natitira sa pagitan ng mga ito, tulad ng malinaw na makikita sa figure sa itaas (Figure 4.6). Kapag nagtakda ka ng CELLSPACING=0, magsasama-sama ang mga frame ng mga katabing cell at lilikha ng impresyon ng iisang table grid (Fig. 4.7).


    kanin. 4.7. Talahanayan na may CELLSPACING=0 na halaga

    CELLPADDING parameter

    Ang paraan ng pagtatala ng parameter ay katulad ng CELLSPACING. Tinutukoy ng num value ang dami ng libreng espasyo (margin) sa pagitan ng cell frame at ng data sa loob ng cell. Bilang default, ang halaga ay nakatakda sa isa. Ang pagtatakda ng parameter ng CELLPADDING sa zero ay maaaring maging sanhi ng pagpindot ng ilan sa mga text ng cell sa hangganan ng cell, na hindi masyadong aesthetically kasiya-siya.

    Sa Fig. Ipinapakita ng Figure 4.8 ang isang halimbawang talahanayan na may halagang CELLPADDING=10.


    kanin. 4.8. Talahanayan na may halagang CELLPADDING=10

    Ang epekto ng mga parameter ng CELLPADDING at CELLSPACING ay halos magkapareho sa isa't isa. Para sa isang talahanayan na walang mga hangganan, ang pagbabago ng isa o isa pang parameter ay humahantong sa parehong resulta. Ang parehong mga parameter ay nakakaapekto sa kaukulang mga indent nang sabay-sabay nang pahalang at patayo. Sa kasamaang palad, hiwalay na kontrol ng pahalang at patayong mga indent sa paraan na ginagawa, halimbawa, para sa mga indent mula sa mga larawan (mga parameter na HSPACE at VSPACE ng tag ), hindi ibinigay.

    Ang lahat ng tatlong mga parameter - BORDER, CELLPADDING at CELLSPACING ay kumikilos nang hiwalay sa isa't isa kung alinman sa mga ito ay tinanggal, kung gayon ang default na halaga nito ay kukunin. Sa partikular, kung ang lahat ng nakalistang parameter ay tinanggal, ang pinakamababang distansya sa pagitan ng data mula sa mga katabing cell ay magiging 6 na pixel (para sa Netscape). Ang value na ito ay ang kabuuan ng dalawang pixel para sa CELLSPACING, isang pixel para sa CELLPADDING, at isang pixel para sa border ng bawat cell. Ang pinaka-compact na talahanayan ay makukuha sa pamamagitan ng pagtukoy sa sumusunod na paglalarawan:

    Sa bersyong ito lamang makikita ang mga cell na malapit sa isa't isa. Ang isang halimbawa ng use case ay isang table na ang mga cell ay naglalaman ng lahat ng mga larawan ng parehong laki na kailangang ilagay sa tabi ng bawat isa.

    WIDTH at HEIGHT na mga parameter

    Kapag nagpapakita ng mga talahanayan, ang kanilang lapad at taas ay awtomatikong kinakalkula ng browser at nakasalalay sa maraming mga kadahilanan: ang mga halaga ng mga parameter na tinukoy sa paglalarawan ng buong dokumento, ang talahanayan na ito, ang mga indibidwal na hilera at mga cell nito, ang mga nilalaman ng mga cell , pati na rin ang mga parameter na tinukoy kapag tinitingnan ang dokumento sa isang partikular na browser , halimbawa, uri at laki ng font, mga laki ng window sa pagtingin, atbp. Kapag ipinakita, awtomatikong kinakalkula ang mga sukat ng talahanayan na isinasaalang-alang ang mga salik na ito, at ang pagtatangka ay ginawa upang ipakita ang talahanayan sa pinaka-maginhawang anyo - upang ayusin ang talahanayan upang magkasya ito sa window ng pagtingin. Ang pangkalahatang pamamaraan para sa pagtingin sa mga malalaking dokumento, bilang panuntunan, ay bumababa sa linear na pag-scroll ng mga nilalaman ng dokumento nang patayo at pagbabasa ng teksto na pinagsasama-sama ng iba't ibang mga talahanayan, mga larawan, atbp. Nalalapat ito sa parehong mga HTML na dokumento at regular na mga dokumento na nilikha sa anumang text editor . Karamihan sa mga text editor (gaya ng Microsoft Word) at HTML browser ay awtomatikong nagfo-format ng text (kung posible) upang ang mga linya ay hindi lalampas sa lapad ng viewport. Iniiwasan nito ang pangangailangang mag-scroll nang pahalang sa dokumento. Ang mga browser ay nagsasagawa ng mga katulad na pagkilos sa mga talahanayan - kung maaari, i-format ang mga ito sa paraang ang lapad ng talahanayan ay hindi lalampas sa lapad ng window ng pagtingin. Maaari nating tapusin na ang lapad ng mga talahanayan ay isang mas mahalaga, pangunahing parameter, ang pagkalkula kung saan ay isinasagawa muna kung ihahambing sa taas.

    Sa karamihan ng mga kaso, ang dynamic na sukat ng talahanayan ay nagreresulta sa isang aesthetically proportionate na imahe na mahusay na gumagamit ng aktwal na viewport area. Gayunpaman, maaaring kailanganin na pilitin na tukuyin ang lapad o taas ng talahanayan. Para sa layuning ito, ginagamit ang WIDTH (lapad ng talahanayan) at HEIGHT (taas ng talahanayan) ng tag.

    . Form ng notasyon: WIDTH=num o WIDTH=num%, kung saan ang num ay ang numerical na halaga ng lapad ng buong talahanayan sa mga pixel o bilang isang porsyento ng buong laki ng window. Tandaan na katanggap-tanggap na magtakda ng mga halaga na higit sa 100%, kahit na mahirap isipin ang isang kaso kung saan ito ay kinakailangan. Halimbawa:

    .

    Maaaring itakda ang mga katulad na parameter para sa mga indibidwal na cell. Tandaan na ang pagtatakda ng isang partikular na halaga ng parameter, halimbawa WIDTH=200, ay hindi nangangahulugan na ang talahanayan ay magkakaroon ng tinukoy na lapad sa anumang kaso, ngunit tinutukoy lamang ang inirerekomendang lapad, na papanatilihin hangga't maaari. Ipaliwanag natin ito sa mga halimbawa. Hayaang magkaroon ng isang talahanayan na, sa ilalim ng mga kundisyong ito, bilang default ay may lapad na mas mababa kaysa sa tinukoy. Sa kasong ito, tataas ng browser ang lapad ng talahanayan sa kinakailangang isa sa pamamagitan ng proporsyonal na pagpapalawak ng lahat ng mga column ng talahanayan. Kung paliitin mo ang viewport, hindi magbabago ang lapad ng talahanayan at maaaring kailanganin mong mag-scroll nang pahalang upang tingnan ito. Kung ang default na talahanayan ay may lapad na mas malaki kaysa sa tinukoy, susubukan ng browser na bawasan ang lapad nito sa pamamagitan ng, una, pagbabawas ng lapad ng mga indibidwal na column kung saan ang tinukoy na lapad ay mas malaki kaysa sa kinakailangan, at pangalawa, sa pamamagitan ng paghahati ng teksto sa indibidwal na mga cell sa ilang mga linya na may pagtaas ng taas ng talahanayan. Ang mga pagkilos na ito ay maaaring hindi magbigay ng kinakailangang laki ng talahanayan, kung saan magkakaroon ito ng pinakamababang posibleng lapad. Ang parehong mga aksyon ay ginagawa para sa mga talahanayan na walang mga tinukoy na laki kapag ang viewport ay pinaliit.

    Ang mga partikular na algorithm para sa pag-set up ng mga talahanayan para sa iba't ibang mga browser ay maaaring bahagyang magkaiba.

    ALIGN parameter

    Ang parameter ng tag na ito

    tinutukoy ang pahalang na posisyon ng talahanayan sa lugar ng pagtingin. Ang mga wastong halaga ay LEFT (left alignment) at RIGHT (right alignment). Bilang default, ang mga talahanayan ay nakahanay sa kaliwa. Tandaan na kabilang sa mga wastong halaga ay walang karaniwang halaga para sa alignment na parameter - CENTER. Ang ilang HTML literature ay naglilista ng CENTER bilang katanggap-tanggap sa kasong ito. Ito ay pare-pareho sa HTML na detalye, ngunit sa pagsasanay parehong Netscape Navigator at Microsoft Internet Explorer ay nagpapatupad lamang ng dalawang halaga. Ang katotohanan ay ang pagkakaroon ng ALIGN parameter sa tag
    hindi lamang tinutukoy ang lokasyon ng talahanayan, ngunit nagbibigay-daan din sa iyo na balutin ang teksto sa paligid ng talahanayan mula sa kabaligtaran, katulad ng pagbabalot sa mga larawan. Walang probisyon para sa text na ibalot sa mesa sa magkabilang panig. Para sa mas tumpak na kontrol sa pagbabalot, gamitin ang tag
    na may CLEAR parameter sa parehong paraan tulad ng para sa . Kung aalisin ang ALIGN, ang puwang sa kanan at/o kaliwa ng talahanayan ay palaging walang laman, anuman ang lapad nito. Kung ang talahanayan ay hindi nangangailangan ng teksto na balot dito, maaari mong tiyakin na ito ay nakaposisyon sa gitna ng viewport. Upang gawin ito, halimbawa, maaari mong ilagay ang buong paglalarawan ng talahanayan sa loob ng isang pares ng mga tag
    At
    .

    Magbigay tayo ng isang halimbawa ng isang talahanayan na may pambalot na teksto, ang pagpapakita nito ay ipinapakita sa Fig. 4.9.

    Mesa na may text na nakapalibot dito


    nasa hustong gulang

    populasyon ng St. Petersburg

  • Abram
  • Alexander
  • Alexey
  • Albert
  • Anatoly
  • Andrey

  • Arkady
  • Boris
  • Vadim
  • Valentine
  • Valery
  • Vasily

  • Victor
  • Vitaly
  • Vladimir
  • Vladislav
  • Vyacheslav

  • Gennady
  • Georgiy
  • Hermann
  • Gregory
  • Dmitry

    		•

  • Evgeniy
  • Efim
  • Ivan
  • Igor
  • Ilya
  • Joseph
  • Konstantin

  • leon
  • Leonid
  • Michael
  • Nikolay
  • Oleg
  • Paul
  • Peter

  • nobela
  • Semyon
  • Sergey
  • Stanislav
  • Edward
  • Yuri
  • Yakov

    		•








    Ang 43 pinakamadalas na pangalang ito ay sumasaklaw sa 92% ng sample.

    kanin. 4.9. Borderless table na may wrapping text

    Ang dokumentong ito ay binubuo ng isang table na walang hangganan na may setting ng alignment na ALIGN=LEFT, na nagbibigay-daan sa text na sumusunod sa talahanayan na lumabas sa kanan nito. Ang talahanayan ay binubuo lamang ng isang row, na naglalaman ng dalawang cell. Ang bawat cell ay naglalaman ng bahagi ng isang hindi nakaayos na listahan

      . Ang paggamit ng isang talahanayan upang magpakita ng isang listahan ay isang paraan upang pilitin ang isang listahan sa maramihang mga hanay, gaya ng inilalarawan din ng halimbawang ito. Ang tekstong matatagpuan sa kanan ng talahanayan ay maaaring hindi lahat ay magkasya doon, ngunit ito ay magpapatuloy pagkatapos ng talahanayan. Subukang gamitin ang halimbawang ito upang bawasan ang lapad ng viewport ng browser, at sa isang punto ay lalabas ang lahat ng teksto sa ibaba ng talahanayan. Paalalahanan ka namin na para pilitin na matakpan ang daloy ng teksto sa talahanayan (halimbawa, kung ang kasunod na teksto ay hindi lohikal na konektado sa talahanayan at dapat na matatagpuan sa ibaba nito), dapat mong gamitin ang code
      gamit ang CLEAR parameter set. Para sa halimbawang ito, kailangan mong magsulat
      o
      . Pinapayagan ng ilang browser ang CLEAR na parameter na maisulat nang walang halaga, ngunit hindi ito inirerekomenda. Upang magawa ang parehong gawain, pagtukoy ng maraming line feed
      nang walang CLEAR parameter (tulad ng ginagawa sa halimbawa bago ang teksto upang ilipat ito sa ilang linya) o ilang mga code para sa simula ng isang bagong talata

      Maling desisyon.

      Magbigay tayo ng isang bahagyang naiibang halimbawa para sa paglikha ng naturang pahina, ang pagpapakita nito ay ipinapakita sa Fig. 4.10.

      Table na walang pambalot na text

      Ang pinakakaraniwang pangalan ng lalaki

      populasyon ng may sapat na gulang ng St. Petersburg

    • Abram
    • Alexander
    • Alexey
    • Albert
    • Anatoly
    • Andrey

    • Arkady
    • Boris
    • Vadim
    • Valentine
    • Valery
    • Vasily

    • Victor
    • Vitaly
    • Vladimir
    • Vladislav
    • Vyacheslav

    • Gennady
    • Georgiy
    • Hermann
    • Gregory
    • Dmitry

      		•

    • Evgeniy
    • Efim
    • Ivan
    • Igor
    • Ilya
    • Joseph
    • Konstantin

    • leon
    • Leonid
    • Michael
    • Nikolay
    • Oleg
    • Paul
    • Peter

    • nobela
    • Semyon
    • Sergey
    • Stanislav
    • Edward
    • Yuri
    • Yakov

      		•

      Ang data na ipinakita ay nakuha batay sa pagsusuri ng isang kinatawan na sample na naglalaman ng impormasyon tungkol sa 5,000 lalaki sa edad na 18 na naninirahan sa St. Petersburg.
      Ang 43 na pinakamadalas na nakakaharap na mga pangalan ay sumasaklaw sa 92% ng sample.
      Ang dalas ng paglitaw ng bawat isa sa iba pang mga pangalan ay hindi hihigit sa 0.3%

      kanin. 4.10. Talahanayan na walang mga hangganan na naglalaman ng tatlong hanay

      Hindi tulad ng nakaraang halimbawa, walang text wrapping sa paligid ng talahanayan. Ang buong dokumento ay binubuo ng isang talahanayan na may isang header na naglalaman ng tatlong mga cell sa isang hilera. Ang unang dalawang cell ay ganap na inuulit ang nakaraang halimbawa. Ang ikatlong cell ay naglalaman ng teksto na nagkomento sa mga nilalaman ng unang dalawang cell. Hindi na kailangang pilitin ang pagwawakas ng text dito, gaya ng inilarawan sa nakaraang kaso. Ang lahat ng teksto na nauugnay sa talahanayan ay dapat na matatagpuan sa loob ng ikatlong cell, at ang kasunod na teksto ay dapat na matatagpuan pagkatapos ng pagtatapos ng paglalarawan ng buong talahanayan. Ang parehong mga halimbawa ay mukhang magkapareho kapag tiningnan sa buong screen, maliban sa header, na sa unang kaso ay matatagpuan sa gitna ng isang listahan ng dalawang hanay, at sa pangalawa, ito ay matatagpuan sa gitna ng lahat ng tatlong mga haligi ng talahanayan . Gayunpaman, sa pamamagitan ng pagbabawas ng viewport sa huling halimbawa, walang bahagi ng teksto ang maaaring pumunta sa ibaba ng talahanayan, sa gayon ay masisira ang istraktura nito.

      Pag-format ng data sa loob ng isang talahanayan

      Ang bawat indibidwal na cell sa loob ng isang talahanayan ay maaaring ituring bilang isang lugar para sa independiyenteng pag-format. Ang lahat ng mga panuntunan na may bisa upang kontrolin ang pagpapakita ng teksto ay maaaring gamitin upang i-format ang teksto sa loob ng isang cell. Sa loob ng isang cell, katanggap-tanggap na gamitin ang halos lahat ng elemento ng HTML na maaaring lumitaw sa loob ng katawan ng isang dokumento , kabilang ang mga tag na kumokontrol sa paglalagay ng teksto -

      ,
      ,

      , mga code ng header - mula sa

      sa

      , mga tag sa pag-format ng character -<В>, , , , , , , paglalagay ng mga tag ng mga graphic na larawan , mga hypertext na link<А>atbp. Kaagad naming binibigyang-diin na ang saklaw ng mga tag na tinukoy sa loob ng isang hiwalay na cell ay limitado sa mga hangganan ng cell na ito, anuman ang pagkakaroon ng isang trailing tag. Halimbawa, kung ang isang kulay ng teksto ay tinukoy sa loob ng isang cell - , pagkatapos ay kahit na walang termination code o paglalagay nito sa maraming mga cell o mga hilera ng talahanayan, ang teksto ng susunod na cell ay makikita sa default na kulay.

      Ang mga sumusunod na opsyon ay magagamit upang i-format ang data sa loob ng mga cell ng talahanayan.

      Ang mga opsyon sa pag-align ng nilalaman ng cell ay ALIGN at VALIGN. Maaaring gamitin sa mga code , At . Maaaring kunin ng horizontal alignment parameter ALIGN ang mga value na LEFT, RIGHT at CENTER (ang default ay LEFT para sa at CENTER para sa ). Ang vertical alignment parameter na VALIGN ay maaaring tumagal ng mga sumusunod na value: TOP (top edge), BOTTOM (bottom edge), MIDDLE (sa gitna), BASELINE (baseline). Ang default ay MIDDLE. Tinitiyak ng baseline alignment na ang text sa isang linya sa lahat ng cell ay nakahanay sa isang linya. Pagtatakda ng mga opsyon sa pag-align sa antas ng code tinutukoy ang pagkakahanay para sa lahat ng mga cell ng isang partikular na row, habang ang bawat indibidwal na cell ng row ay maaaring magkaroon ng sarili nitong mga parameter na tinukoy na nag-o-override sa epekto ng mga parameter na tinukoy sa .

      Narito ang isang halimbawa ng isang talahanayan kung saan ang data sa mga cell ng unang column ay nakahanay sa kanan, ang pangalawang column ay nakasentro, at ang pangatlo ay nakahanay sa kaliwa (default):

      Pag-align ng mga elemento ng talahanayan

      Cell 1 Cell 2 Cell 3
      Cell 4 Cell 5 Cell 6

      Ang pagpapakita ng browser ng halimbawang ito ay ipinapakita sa Fig. 4.11.

      kanin. 4.11. Pag-align ng data sa mga cell ng talahanayan

      Ang NOWRAP na opsyon ay hindi pinapagana ang kakayahang awtomatikong hatiin ang cell text sa mga linya. Maaaring gamitin sa mga code , At . Ang hindi kinakailangang paggamit ng parameter na ito ay dapat na iwasan, dahil maaari itong makabuluhang bawasan ang kakayahang baguhin ang laki ng mga talahanayan at mapahina ang kanilang pagiging madaling mabasa. Sa karamihan ng mga kaso, sapat na ang paggamit ng NOWRAP para sa mga indibidwal na cell na talagang nangangailangan ng pagbabawal sa pagbabalot ng salita. Ang pagbalot ng salita ay isinasagawa lamang ng mga naghihiwalay sa pagitan ng mga salita (mga puwang), at sa ilang mga kaso, upang ipagbawal ang pagsira ng teksto sa ilang partikular na lugar, sa halip na ang character na espasyo, dapat mong itakda ang non-breaking space code (NonBreaking Space). Kasama sa mga halimbawa ang mga kaso kung saan hindi inirerekomenda ang isang agwat - sa pagitan ng isang numerical na halaga at ng mga yunit ng pagsukat ng isang ibinigay na halaga; sa pagitan ng apelyido at inisyal. Kaya, ang teksto ay 650 km o Yeltsin B.N. Inirerekomenda na isulat ito sa form 650 km at Yeltsin B.N.

      Ang mga parameter ng WIDTH at HEIGHT ay maaaring gamitin sa mga code At . Ang kanilang syntax ay katulad ng syntax ng mga parameter na ito para sa tag

      . Tinutukoy ng kanilang halaga ang lapad o taas ng cell kung saan naitala ang mga parameter na ito. Ang mga halaga ay maaaring tukuyin sa mga pixel o bilang isang porsyento ng laki ng buong talahanayan. Pinapayagan lamang ng Microsoft Internet Explorer ang WIDTH na tukuyin sa mga pixel. Dahil ang talahanayan ay isang magkakaugnay na istraktura na binubuo ng mga row at column, ang pagtatakda ng lapad para sa anumang cell ay nakakaapekto sa lapad ng buong column kung saan matatagpuan ang cell, at ang pagtatakda ng taas ay nakakaapekto sa buong row. Kung ang halaga ng lapad ng column ay tinukoy sa isang cell lamang, ang halagang ito ay magiging lapad ng buong column. Kung mayroong ilang mga naturang indications, pagkatapos ay ang maximum na halaga ay pinili. Ang parehong mga katangian ay nalalapat sa mga string.

      Ang mga kumplikadong talahanayan ay nailalarawan sa pamamagitan ng pangangailangan na pagsamahin ang ilang katabing mga cell nang pahalang o patayo sa isa. Ang feature na ito ay ipinatupad gamit ang COLSPAN (COLiimn SPANning) at ROWSPAN (ROW SPANning) na mga parameter na tinukoy sa mga code

      ang mga setting para sa mga indibidwal na column ng pangkat na ito ay tinukoy. Kasabay nito, sa tag Kung kinakailangan, maaaring tukuyin ang mga parameter ng alignment, ang mga halaga nito ay nalalapat sa lahat ng mga column ng isang partikular na grupo. Mga value ng parameter na tinukoy sa tag , i-override ang mga halaga mula sa tag . Tandaan na sa tag sa halimbawang ito, hindi tulad ng nauna, walang parameter ng SPAN. Dito ay walang kabuluhan ang paggamit nito, dahil ang bilang ng mga elemento sa pangkat ay tutukuyin ng mga sumusunod sa tag mga tag . Samakatuwid, ang anumang ibinigay na halaga ng parameter ng SPAN tag ay mapapatungan.

      Sa Fig. Ipinapakita ng Figure 4.17 ang resulta ng pagpapatupad ng code sa itaas, pati na rin ang isang opsyon para sa pagpapakita ng naturang talahanayan na may entry na RULES=GROUPS sa tag

      o . Form ng notasyon: COLSPAN=num, kung saan ang num ay isang numeric na halaga na tumutukoy kung gaano karaming mga column ang kasalukuyang cell na dapat palawakin nang pahalang. Ang paggamit ng parameter na ROWSPAN ay magkatulad, dito mo lang tukuyin ang bilang ng mga row na ang kasalukuyang cell ay dapat sumasaklaw nang patayo. Bilang default, ang mga parameter na ito ay nakatakda sa isa. Pinapayagan na sabay na itakda ang mga halaga ng parehong mga parameter para sa isang cell. Ang tamang pagtatakda ng mga halaga ng mga parameter na ito ay maaaring hindi isang napakasimpleng gawain, lalo na dahil pinapayagan ka ng karamihan sa mga editor ng HTML na biswal na magdisenyo at pagkatapos ay bumuo ng mga HTML code lamang ang pinakasimpleng mga talahanayan.

      Sa Fig. Ipinapakita ng Figure 4.12 ang isang halimbawa ng pagpapakita ng talahanayan na nakuha mula sa sumusunod na HTML code:

      Gamit ang mga parameter ng COLSPAN at ROWSPAN

      Cell na sumasaklaw sa dalawang hanay Cell na sumasaklaw sa dalawang column
      Cell 3 Cell 4
      Cell 5 Cell 6 Cell 7


      kanin. 4.12. Table na may mga cell na sumasaklaw sa maraming row o column

      Ang hindi maingat na pagtatakda ng mga halaga ng mga parameter ng pag-slide ng cell ay maaaring humantong sa kanilang magkasanib na pagsasanib at mga salungatan, kung saan ang resulta ay hindi mahuhulaan. Ang karaniwang paggamit ng mga extended na cell ay isang karaniwang heading para sa ilang katabing column o row.

      Narito ang isang halimbawa ng HTML code (ang pagpapakita nito ay ipinapakita sa Fig. 4.13), kung saan mali ang nabuong mga extended na cell.

      Maling paggamit ng pinahabang mga cell

      Cell 1 Cell 2

      Cell 3
      (karaniwan
      Ha tatlo
      linya)
      Cell 4Cell 5
      Cell 6 Cell 7 (kumalat sa dalawang column)

      kanin. 4.13. Resulta ng maling kahulugan ng pinalawak na mga cell (text overlay)

      Tinutukoy ng parameter ng BGCOLOR ang kulay ng background ng buong talahanayan, mga indibidwal na row, o mga cell. Maaaring lumitaw sa mga tag

      , , walang impormasyon o isa o higit pang mga puwang na hindi itinuturing bilang data. Ang mga cell na naglalaman ng invisible data, halimbawa, ay maaaring maglaman ng code o line feed code
      , o anumang teksto na ang kulay ay tumutugma sa kulay ng background ng cell. Habang ang mga cell na naglalaman ng data (kahit na hindi nakikita) ay ire-render ng pareho ng lahat ng mga browser, ang mga walang laman na cell ay ire-render sa ibang paraan. Ang browser ng Netscape ay hindi nagpapakita ng isang walang laman na cell, ibig sabihin, ang lugar kung saan matatagpuan ang cell na ito ay mapupuno ng kulay ng background ng pahina, at hindi ang kulay ng background ng cell, hindi katulad ng mga cell na naglalaman ng data. Walang iginuhit na hangganan sa paligid ng mga walang laman na cell. Ang isang halimbawa ng isang talahanayan na may isang walang laman na cell ay ipinapakita sa Fig. 4.15.


      kanin. 4.15. Iba ang pagpapakita ng walang laman na table cell sa iba't ibang browser

      Ipinapakita ng Microsoft Internet Explorer ang parehong mga cell gamit ang kulay ng background ng mga cell. Ang isang browser tulad ng NSCA Mosaic ay nagbibigay sa user ng pagkakataong matukoy ang likas na katangian ng pagpapakita ng mga walang laman na cell ng talahanayan sa pamamagitan ng pagpili ng mga naaangkop na opsyon. Ang kaalaman sa naturang mga tampok ay magbibigay-daan sa iyo na bumuo ng mga talahanayan na ipapakita nang naaangkop, anuman ang napiling browser ng user. Sa ilang mga kaso, ito ay sapat na upang lumikha ng mga cell na naglalaman ng isang solong code sa halip ng ilang mga walang laman na mga cell.

      Pag-align ng data sa mga column ng talahanayan

      Ang isang karaniwang problema kapag gumagawa ng mga talahanayan ay ang pagtatakda ng mga parameter ng alignment para sa mga indibidwal na row o column. Upang ihanay ang mga nilalaman ng lahat ng mga cell ng kasalukuyang hilera, itakda lamang ang mga kinakailangang parameter sa code

      . Gayunpaman, mas madalas na kinakailangan upang matiyak ang parehong pagkakahanay para sa lahat ng mga elemento ng parehong haligi, dahil sa karamihan ng mga kaso ang haligi ay naglalaman ng homogenous na data. Sa mga unang bersyon ng HTML, iminungkahi na gamitin ang parameter na COLSPEC (COLumn SPECification) para dito, na tinukoy sa tag
      At . Ang tampok na ito ay hindi ibinigay ng HTML na detalye, ngunit sinusuportahan ng parehong Netscape at Microsoft Internet Explorer. Ang entry form ay kapareho ng para sa tag , ibig sabihin: BGCOLOR=value, kung saan ang value ay ang nilalaman ng kulay sa RGB na format o ang pangalan nito.

      Halimbawa:

      		o .

      Mga nested table

      Ang mga indibidwal na cell ng talahanayan ay maaaring maglaman ng halos anumang mga tag ng wika at data na pinapayagan sa seksyon dokumento. Sa partikular, ang isa pang talahanayan ay maaaring ganap na mailagay sa loob ng isang cell ng talahanayan. Ang ganitong mga talahanayan ay tinatawag na nested. Ang mga patakaran para sa kanilang pagtatayo ay hindi naiiba sa pagtatayo ng mga talahanayan at hindi nangangailangan ng isang hiwalay na paglalarawan. Tandaan lang namin na hindi lahat ng browser na sumusuporta sa mga talahanayan ay nagpapakita ng mga kumplikadong talahanayan na may ilang antas ng nesting, kaya ang paggamit ng mga ito ay nangangailangan ng pag-iingat.

      Magbigay tayo ng halimbawa ng talahanayan na gumagamit ng isang antas ng nesting.

      Mga lungsod ng rehiyon ng Leningrad

      Mga lungsod ng rehiyon ng Leningrad

      H - populasyon ng lungsod (libong naninirahan, 1992)

      P - distansya mula sa St. Petersburg (km)

      Mga lungsod sa ilalim ng St. Petersburg
      lungsodHP
      Zelenogorsk 13.6

      50

      Kolpino144.6

      26

      Kronstadt 45.2

      48

      Lomonosov 42.0

      40

      Pavlovsk 25.4

      30

      Petrodvorets 83.8

      29

      Pushkin 95.1

      24

      Sestroretsk 34.9

      35

      Lahat ng lungsod na napapailalim sa
      pangangasiwa
      St. Petersburg, mayroon
      direktang lungsod
      mga numero ng telepono.

      Mga lungsod ng regional subordination
      lungsodHP
      Boksitogorsk 21.6

      ALIGN=RIGHT>245

      Bolkhov 50.3

      ALIGN=RIGHT>122

      Bsevolozhsk 32.9

      24

      Vyborg 80.9 130
      Vysotsk 1.0

      ALIGN=RIGHT>159

      Gatchina 80.9 46
      Ivangorod 11.9

      ALIGN=RIGHT>147

      Kamennogorsk 5.9 157
      Kingisepp 51.5

      ALIGN=RIGHT>138

      Kirishi 53.8

      ALIGN=RIGHT>115

      Kirovsk 23.8

      55

      Lodeynoye Pole 27.3

      ALIGN=RIGHT>244

      Lyga 41.8139

      (patuloy ang talahanayan)
      lungsodHP
      Lyuban 4.7

      85

      Novaya Ladoga 11.2

      ALIGN=RIGHT>141

      Otradnoe 22. 9

      ALIGN=RIGHT>40

      Pikalevo 25.1

      ALIGN=RIGHT>246

      Podporozhye 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      ALIGN=RIGHT>145

      Svetogorsk 15.8

      ALIGN=RIGHT>201

      Mga slate 42.6

      ALIGN=RIGHT>192

      Sosnovy Bor 57.6

      81

      Tikhvin 72.0

      ALIGN=RIGHT>200

      Tosno 33.8

      53

      S Lisselburg 12.5

      64

      kanin. 4.14. Halimbawa ng mga nested table

      Ang pagpapakita ng resulta ng halimbawang ito ay ipinapakita sa Fig. 4.14.

      Sa unang tingin, tila walang nesting ng mga talahanayan sa halimbawa. Sa katunayan, ang buong dokumento ay isang talahanayan na walang mga hangganan at binubuo ng isang header at isang hilera lamang na naglalaman ng limang mga cell. Ang organisasyon ng naturang talahanayan ay nagsisilbi sa nag-iisang layunin ng pag-aayos ng data sa pahina. Sa loob ng unang cell ay isa pang talahanayan, na may sariling pamagat at binubuo ng tatlong column, na sinusundan ng tekstong nakahanay sa gitna. Ang ikatlo at ikalimang mga cell ay naglalaman din ng magkahiwalay na mga talahanayan. Ang pangalawa at ikaapat na mga cell ay walang laman, wala silang anumang data at may isang solong WIDTH parameter na tumutukoy sa lapad nito. Ang kanilang layunin ay upang itakda ang indent sa pagitan ng una at pangatlo, pati na rin ang ikatlo at ikalimang mga cell kung saan matatagpuan ang mga talahanayan. Ito ay isa sa mga posibleng opsyon para sa pagtatakda ng naturang indent. Ang isa pang pagpipilian ay ang paggamit ng parameter na CELLSPACING, na tumutukoy sa distansya sa pagitan ng mga cell, gayunpaman, tinutukoy ng parameter na ito ang parehong pahalang at patayong padding, na hindi kinakailangan sa ngayon. Bilang karagdagan, ang isang walang laman na cell na may ibinigay na lapad ay liliit kapag ang viewport ay pinaliit, kabaligtaran sa espasyo na tinukoy ng parameter ng CELLSPACING (pati na rin ang CELLPADDING). Gamit ang halimbawang ito, subukang bawasan ang lapad ng lugar ng pagtingin sa browser o, na hahantong sa parehong mga resulta, pagtaas ng laki ng font kung saan ipinapakita ang teksto. Ang distansya sa pagitan ng mga talahanayan ay mababawasan sa zero, na ginagawang posible na makita ang lahat ng impormasyon nang sabay-sabay hangga't maaari, gayunpaman, ang mga karagdagang pagbabago ay hindi hahantong sa pinsala sa talahanayan, ngunit magbibigay ng kakayahang mag-scroll nang pahalang. Gamit ang isang katulad na pamamaraan, maaari mong ayusin ang paglalagay ng impormasyon na binubuo hindi lamang ng mga talahanayan, kundi pati na rin ang mga imahe, mga fragment ng teksto, atbp.

      Mga tampok ng pagtatayo ng mesa

      Tinatalakay ng seksyong ito ang ilang partikular na kakayahan ng mga indibidwal na browser, pati na rin ang ilang mga subtlety ng pagbuo at pagpapakita ng mga talahanayan.

      Ipakita ang mga walang laman na cell sa mga talahanayan

      Ang isa sa mga tampok ng pagtatanghal ng talahanayan sa iba't ibang mga browser ay ang pagpapakita ng mga walang laman na cell. Ayon sa paglalarawan ng wika, ang lahat ng mga browser ay dapat maglagay ng mga row na may mga walang laman na cell kung sa anumang row ang kanilang numero ay nakatakda sa mas mababa kaysa sa iba pang mga row. Bilang karagdagan, maaaring may mga cell saanman sa talahanayan na hindi naglalaman ng data. May pagkakaiba sa pagitan ng mga walang laman na cell at mga cell na naglalaman ng hindi nakikitang data. Sa mga walang laman na cell sa loob ng isang pares ng mga tag

      		At
      at tinukoy ang pagkakahanay at lapad ng bawat column ng talahanayan. Halimbawa, tinukoy ng task colspec="L40 R50 C80" ang alignment ng data sa mga cell para sa tatlong column ng table: para sa unang column - LEFT, para sa pangalawa - RIGHT at para sa third - CENTER, pati na rin ang lapad ng bawat column. Habang umuunlad ang HTML, ang opsyong ito ay inabandona at kasalukuyang hindi bahagi ng detalye ng wika at hindi sinusuportahan ng karamihan sa mga browser. Bilang resulta, ang Netscape Navigator ay walang mga espesyal na tool para sa paglutas ng problemang ito, at ang tanging pagpipilian ay ang alinman sa paggamit ng default na pagkakahanay o upang itakda ang naaangkop na mga halaga sa bawat cell kung saan ito kinakailangan.

      Nagbibigay ang Microsoft Internet Explorer ng mga espesyal na tag -

      At . Ang mga tag na ito ay dapat na matatagpuan kaagad pagkatapos ng paglalarawan
      bago ang unang hitsura ng tag .

      Mga parameter ng tag

      At maaaring SPAN, na tumutukoy sa bilang ng mga katabing column na apektado ng mga value ng parameter, at ALIGN, na tumutukoy sa pahalang na alignment ng data sa lahat ng cell ng kaukulang column (o column). Ang mga wastong value para sa ALIGN ay LEFT, RIGHT, at CENTER. Ang parameter ng SPAN ay default sa isa.

      Tag

      Bilang karagdagan, pinapayagan ka nitong itakda ang parameter ng VALIGN, na tumutukoy sa patayong pagkakahanay ng data sa mga cell. Ang mga wastong halaga para sa VALIGN ay MIDDLE, TOP, at BOTTOM.

      Pagkakaiba sa pagitan ng mga tag

      At na ang una sa mga ito, bilang karagdagan sa pagtatakda ng mga parameter ng alignment ng data para sa mga column, ay nagsasagawa rin ng conditional union ng ilang column sa isang pangkat. Ang epekto ng kumbinasyong ito ay makikita kapag ginagamit ang RULES parameter, na inilalarawan sa ibaba. Bilang default, ang lahat ng mga column ng talahanayan ay itinuturing na isang pangkat. Tag dapat lamang gamitin upang matukoy ang pagkakahanay ng data sa mga indibidwal na column sa isang pangkat.

      Magbigay tayo ng halimbawa. Ipagpalagay na kailangan mong bumuo ng isang talahanayan na naglalaman ng 6 na mga haligi, at ang data sa unang tatlo sa mga ito ay dapat na nakahanay sa kanan, at ang susunod na tatlo - sa gitna. Upang malutas ang problemang ito, dapat mong isulat ang sumusunod na fragment ng HTML code:

      (data para sa talahanayan)

      Ang resulta ng pagpapakita ng code na ito ay ipinapakita sa Fig. 4.16.

      kanin. 4.16. Talahanayan na may iba't ibang opsyon sa pag-align ng data sa mga pangkat ng mga cell

      Isa pang halimbawa. Ipagpalagay na sa nakaraang talahanayan, ang unang dalawang column ay dapat na nakahanay sa kanan, at ang pangatlo ay dapat na nakahanay sa gitna, at lahat ng tatlong column ay dapat na pinagsama sa isang grupo. Ang susunod na tatlong column ay dapat ding igrupo at may katulad na pagkakahanay sa unang pangkat. Upang malutas ang problemang ito, dapat mong isulat ang sumusunod na fragment ng HTML code:

      (data para sa talahanayan)

      Sa halimbawang ito, pagkatapos ng tag

      , kung saan malinaw ang kahulugan ng pagsasama-sama sa mga grupo.

      Payo

      Dahil ang saklaw ng mga tag

      At limitado sa isang browser, ang Microsoft Internet Explorer, dapat mong gamitin ang mga ito nang may pag-iingat. Ang kaginhawahan ng paggamit ng mga tag na ito ay halata, ngunit sa pagsasanay karamihan sa mga talahanayan ay binuo gamit ang naaangkop na ALIGN alignment parameter para sa bawat table cell kung saan ito kinakailangan, na makabuluhang pinapataas ang laki ng source code ng talahanayan, ngunit tinitiyak na maaari itong matingnan sa anumang browser.


      kanin. 4.17. Talahanayan na may mga nakagrupong column

      Pagtatakda ng kulay ng hangganan ng talahanayan

      Marami pang mga opsyon, na natatangi sa Microsoft Internet Explorer, ay nagbibigay-daan sa iyong piliin ang kulay ng mga hangganan ng talahanayan - BORDERCOLOR, BORDERCOLORLIGHT at BORDERCOLORDARK. Maaaring tukuyin ang mga parameter na ito sa mga tag

      , . Ang halaga ng mga parameter na ito ay maaaring ang pangalan ng kulay o ang hexadecimal na halaga nito. Tinutukoy ng parameter ng BORDERCOLOR ang kulay ng lahat ng elemento ng hangganan ng talahanayan, at ang iba pang dalawang parameter ay tumutukoy sa kulay ng mga hangganan ng indibidwal na bahagi, na nag-o-override sa halaga ng BORDERCOLOR. Pinipinta ng parameter ng BORDERCOLORLIGHT ang kaliwa at tuktok na mga gilid ng buong talahanayan at, nang naaayon, ang kanan at ibabang mga gilid ng bawat cell sa tinukoy na kulay. Ang pangalawang parameter ng BORDERCOLORDARK ay tumutukoy sa mga kulay ng magkasalungat na gilid. Dahil sa kumbinasyon ng mga parameter na ito, ang talahanayan ay lilitaw na bahagyang nakataas sa ibabaw ng pahina o naka-recess. Ang lahat ay nakasalalay sa napiling kumbinasyon ng kulay.

      Tandaan

      Sinusuportahan din ng bersyon 4.x ng Netscape browser ang setting ng BORDERCOLOR.

      Magtakda ng larawan sa background para sa isang talahanayan

      Binibigyang-daan ka ng Microsoft Internet Explorer (pati na rin ang bersyon ng Netscape 4.x) na gamitin ang parameter na BACKGROUND, na tumutukoy sa isang larawan sa background para sa isang talahanayan sa parehong paraan na magagamit ito para sa isang buong HTML na dokumento. Maaaring itakda ang parameter na ito sa mga tag

      , At
      , , w

      Binibigyang-daan ka ng browser ng Microsoft Internet Explorer na gumamit ng ilang bagong mga tag upang buuin ang mga talahanayan at madaling kontrolin ang pagguhit ng mga frame at grid lines.

      Mga tag

      , At itakda ang istraktura ng paglalarawan ng talahanayan nang mas mahigpit, na i-highlight ang mga cell ng header ng talahanayan, ang mga pangunahing nilalaman ng talahanayan at ang linya ng buod. Ang mga tag na ito ay maaari lamang lumitaw sa mga paglalarawan ng talahanayan sa loob ng isang pares ng tag
      At .

      Mga tag sa pagbubuo ng talahanayan

      At
      .

      Mga tag At ay ginagamit upang ilarawan ang header at footer ng isang talahanayan. Ang mga tag na ito ay maaaring lumitaw nang hindi hihigit sa isang beses sa talahanayan. Maaaring tanggalin ang end tag para sa mga ito. Ang paggamit ng mga tag na ito ay maginhawa kapag gumagawa ng malalaking talahanayan na lumalampas sa isang pahina.

      Tag maaaring lumitaw nang maraming beses sa isang paglalarawan ng talahanayan, na nangangailangan ng paggamit ng isang pangwakas na tag. Ang tag na ito ay gumaganap ng lohikal na pagpapangkat ng data sa parehong paraan tulad ng , na nagsasagawa ng pagpapangkat ng mga katabing column.

      Sa pamamagitan ng paggamit ng mga bagong tag, mas flexible mong makontrol ang mga hangganan at gridline ng iyong talahanayan.

      Ang pagguhit ng mga frame sa paligid ng talahanayan ay kinokontrol ng FRAME tag parameter

      , at mga linya ng grid ng talahanayan - sa pamamagitan ng parameter ng RULES. Halimbawa, nagiging posible na gumuhit lamang ng mga patayong linya sa pagitan ng mga column at sa halip na isang frame sa paligid ng buong talahanayan, magbigay ng mga pahalang na linya sa itaas at ibaba ng talahanayan.

      Maaaring kunin ng parameter ng FRAME ang mga sumusunod na halaga:

      • BOX o BORDER - ang frame ay iginuhit sa lahat ng apat na panig
      • ITAAS - mula lamang sa itaas na bahagi
      • IBABA - mula lamang sa ibabang bahagi
      • MGA HSIDE - ang ibaba at itaas na mga gilid ay iginuhit
      • MGA VIDES - ang kaliwa at kanang bahagi ay iginuhit
      • LHS - sa kaliwang bahagi lamang
      • R.H.S. - sa kanang bahagi lamang
      • WALANG saysay - talahanayan na walang panlabas na mga frame

      Kinokontrol ng parameter ng RULES ang pagguhit ng mga panloob na linya ng grid ng talahanayan at maaaring kunin ang mga sumusunod na halaga:

      • LAHAT - lahat ng panloob na linya ay iginuhit
      • MGA GRUPO - mga linya lamang na naghahati sa mga grupo ang iguguhit
      • MGA HANAY - ang mga linya ay iginuhit na naghihiwalay sa mga linya
      • COLS - Ang mga linya ay iginuhit na naghahati sa mga hanay
      • WALA - ang mga panloob na linya ay hindi iginuhit

      Halimbawa:

      .

      Tandaan

      Ang mga linya at frame ng grid ng talahanayan ay iguguhit lamang kung naroroon ang parameter ng tag ng BORDER

      . Kung ang parameter na ito ay wala o ang halaga nito ay zero, ang mga linya ng grid at mga frame ay mawawala para sa anumang mga halaga ng mga parameter ng FRAME at RULES.

      Narito ang isang halimbawa ng kumpletong HTML code na lumilikha ng isang talahanayan gamit ang inilarawang mga kakayahan:

      Pagha-highlight ng mga linya ng header at buod

      Halimbawa ng flexible na pamamahala ng linya
      grid table
      Column 1 heading Pamagat ng Hanay 2 Column 3 heading
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      Bottom lineBottom lineBottom line


      kanin. 4.18. Flexible na pagguhit ng mga linya ng grid ng talahanayan gamit ang browser ng Microsoft Internet Explorer

      Sa halimbawang ito, ang pagpapakita kung saan ang browser ay ipinapakita sa Fig. Ipinapakita ng Figure 4.18 ang isa sa mga posibleng opsyon para sa pagkontrol sa mga linya ng grid at mga hangganan sa paligid ng talahanayan. Ang isang 5 pixel na makapal na frame (BORDER=S) ay iginuhit sa paligid ng talahanayan lamang sa itaas at ibabang gilid (FRAME=HSIDES). Ang mga linya ng grid ay iginuhit sa loob ng talahanayan upang magkahiwalay na mga pangkat ng data (RULES=GROUPS). Ang mga pangkat ng data ay tinukoy, una, sa pamamagitan ng pagkakaroon ng tatlong tag , bawat isa nagdedeklara ng isang haligi ng talahanayan pangkat. Pangalawa, tag , At<тгоот>Hinahati din nila ang data ng talahanayan sa mga pangkat, na tumutukoy sa pagguhit ng mga panloob na pahalang na linya.

      Pagtatakda ng bilang ng mga column ng talahanayan

      Ang browser ng Microsoft Internet Explorer (pati na rin ang bersyon ng Netscape browser 4.x) ay nagbibigay-daan sa iyo na tukuyin sa tag

      COLS parameter, ang halaga nito ay tumutukoy sa bilang ng mga column sa talahanayan. Ang pagsusulat ng parameter na ito ay nagbibigay-daan sa iyo na pabilisin ang pamamaraan ng layout ng talahanayan kapag ipinapakita sa isang browser, dahil nagiging posible na matukoy ang bilang ng mga column bago i-load ang code ng paglalarawan ng talahanayan. Sa kasalukuyan, ang pagpapagana sa opsyong ito ay walang epekto sa pag-usad ng paglo-load ng dokumento.

      Vertical alignment ng mga table

      Huling parameter ng tag

      , natatangi sa Microsoft Internet Explorer, ay VALIGN, na tumutukoy sa patayong pagkakahanay ng talahanayan na may kaugnayan sa teksto. Ang epekto nito ay katulad ng parehong parameter para sa mga imahe.

      Tandaan

      Tandaan na ang paggamit ng parehong parameter ay maaaring mag-iba nang malaki kapwa sa layunin at sa mga posibleng halaga para sa iba't ibang mga tag, kahit na para sa parehong browser at sa loob ng detalye ng wika. Samakatuwid, imposibleng mag-compile ng isang talahanayan ng buod sa paggamit ng iba't ibang mga parameter sa labas ng konteksto ng kanilang aplikasyon. Halimbawa, ang parameter na ALIGN sa mga talahanayan lamang ay ginagamit sa tatlong magkakaibang paraan:

      • para sa tag
      ang ALIGN parameter ay maaaring kunin ang mga halaga ng KALIWA o KANAN, at nangangahulugang ang lokasyon ng talahanayan, pinindot sa kaliwa o kanang gilid, ayon sa pagkakabanggit;
    • para sa tag
      • ,
      kinukuha ng parameter ng ALIGN ang mga halagang TOP o BOTTOM, at nangangahulugang ang lokasyon ng header ng talahanayan sa itaas o ibaba ng talahanayan;
    • para sa mga tag
      • At kinukuha ng parameter ng ALIGN ang mga value na LEFT, RIGHT o CENTER, at nangangahulugan ng pag-align ng mga nilalaman ng kaukulang table cell (o mga cell) nang pahalang.

      Alternatibo sa view ng talahanayan

      Ang suporta sa talahanayan ay naging isang malawak na tampok ng mga Web browser, kaya mayroong maliit na dahilan upang maiwasan ang paggamit nito. Gayunpaman, isasaalang-alang namin ang mga posibleng opsyon para sa alternatibong presentasyon ng data na maaaring gamitin sa halip na mga talahanayan o bilang karagdagan sa mga ito.

      Ang ilang iba pang mga pamamaraan na hindi gumagamit ng konsepto ng mga talahanayan:

      • Gumamit ng preformatted text. Ang pamamaraang ito ay tradisyonal na ginagamit sa mga unang bersyon ng HTML, noong hindi pa umiiral ang suporta sa talahanayan. Ang paggamit nito ay hindi nawala ang kaugnayan nito hanggang sa araw na ito, dahil ang mga naturang teksto ay ipapakita nang tama ng anumang browser, kabilang ang mga puro text.
      • Paggamit ng larawang naglalaman ng talahanayan. Ang talahanayan ay maaaring gawin ng anumang text editor o kahit na ipapakita sa isang Web browser at pagkatapos ay i-save bilang isang larawan sa isa sa mga graphic na format. Hindi ito ang pinakamahusay na opsyon, dahil nawawala ang lahat ng flexibility ng dynamic na pag-customize ng display ng mga talahanayan. Bilang karagdagan, mayroong pangangailangan na mag-imbak ng karagdagang file na may isang imahe, ang laki nito, bilang panuntunan, ay magiging mas malaki kaysa sa laki ng teksto na naglalarawan sa talahanayan ng HTML. Ang isang posibleng lugar ng aplikasyon ay ang mga talahanayan ng mahigpit na tinukoy na mga sukat, kung saan ang pag-asa ng pagpapakita nito sa anumang panlabas na mga kadahilanan (mga font, mga mode ng pagpapatakbo ng browser, atbp.) ay hindi katanggap-tanggap.
      • Paggamit ng mga listahan sa halip na mga talahanayan. Para sa mga pinakasimpleng kaso, sa halip na mag-ayos ng mga talahanayan, medyo posible na makayanan ang isa sa mga uri ng mga listahan na magagamit sa wikang HTML.

      Paghahanda ng mga mesa

      Maaaring gamitin ang anumang editor upang maghanda ng mga HTML na talahanayan, karamihan sa mga ito ay may mga tool para sa biswal na paglikha ng mga talahanayan. Magbigay tayo ng halimbawa ng paghahanda ng talahanayan sa editor ng HotDog Professional. Upang lumikha ng isang talahanayan, piliin lamang ang item na Mga Talahanayan mula sa menu ng Insert, pagkatapos nito ang dialog box na ipinapakita sa Fig. 4.19. Ang paglikha ng isang talahanayan ay binubuo ng pagpuno sa naaangkop na mga patlang sa window. Pagkatapos matukoy ang bilang ng mga row at column sa talahanayan, maaari kang magpatuloy sa direktang pagpuno ng mga indibidwal na cell ng talahanayan, na ipapakita sa parehong dialog box. Ang dialog box ay may pindutan ng Preview, ang pag-click na nagbibigay-daan sa iyong tingnan ang resultang talahanayan gamit ang built-in na browser (Larawan 4.20).

      kanin. 4.19. Dialog box para sa paglikha ng mga talahanayan


      kanin. 4.20. Ipinapakita ang talahanayan gamit ang built-in na browser

      Kapag nakumpleto mo na ang paghahanda ng data para sa talahanayan, i-click ang OK. Pagkatapos ay ilalagay ang nabuong code ng paglalarawan ng talahanayan sa na-edit na HTML na dokumento. Para sa halimbawang ipinapakita sa Fig. 4.19, ang sumusunod na code ay bubuo:

      (bahagi ng code ay tinanggal)

      3 table header
      Hanay 1 Hanay 2 Hanay 3 Hanay 4
      1 2 3 4

      Ang gawaing ito ay nalulutas sa katulad na paraan kapag gumagamit ng bahagi ng Netscape Composer ng programang Netscape Communicator. Sa Fig. Ipinapakita ng Figure 4.21 ang isang dialog box kung saan kailangan mong punan ang mga kinakailangang field. Upang maglagay ng mga karagdagang parameter ng tag

      Mayroong Extra HTML na button. Matapos punan ang mga patlang ng dialog box, i-click ang pindutang Ilapat at pagkatapos ay bibigyan ka ng pagkakataong punan ang mga cell ng talahanayan (Fig. 4.22).

      kanin. 4.21. Dialog Box para sa Pagtatakda ng Netscape Composer Table Options


      kanin. 4.22. Paunang posisyon ng input cursor sa isang walang laman na talahanayan



      MGA KAUGNAY NA ARTIKULO

      Inirerekomenda namin

      Copyright 2024 - Pagkumpuni ng computer at laptop. Mga video card, hard drive, Internet, mga monitor.