Paano magsulat ng table code sa c. Ural State Pedagogical University

Kabanata 4

Mga talahanayan sa HTML

Ang mga talahanayan ay isa sa pinakamakapangyarihan at malawakang ginagamit na tool sa HTML. Ang konsepto ng isang tabular na presentasyon ng data ay hindi nangangailangan ng karagdagang paliwanag. SA Mga HTML na talahanayan ay ginagamit hindi lamang ayon sa kaugalian bilang isang paraan ng paglalahad ng data, ngunit bilang isang paraan din ng pag-format ng mga Web page. Magbigay tayo ng mga tunay na halimbawa umiiral na mga dokumento, kung saan ang table view ay isang maginhawang paraan upang bumuo ng isang dokumento. Sa fig. Ang Figure 4.1 ay nagpapakita ng tipikal na halimbawa ng paggamit ng mga talahanayan upang kumatawan sa numerical data na hinati-hati sa mga row at column. Sa fig. 4.2 ang paggamit ng talahanayan ay nagsisilbi lamang sa mga layunin ng pag-format ng dokumento, pagtatakda ng kamag-anak na posisyon ng mga elemento ng pahina. Kapag tinitingnan ang naturang dokumento, hindi agad malinaw 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 HTML ay hindi nagbigay espesyal na paraan para sa pagpapakita ng mga talahanayan, dahil ito ay pangunahing inilaan para sa pagsulat ng payak na teksto. Sa pagbuo ng mga lugar ng aplikasyon ng HTML-documents, ang gawain ng pagpapakita ng data, na karaniwang isang serye ng mga hilera at column, ay naging may kaugnayan. Ang paglikha ng mga dokumento na naglalaman ng data na nakahanay sa pamamagitan ng mga haligi, sa una, ay isinasagawa gamit ang preformatted na teksto, sa loob kung saan ang kinakailangang pagkakahanay ay ibinigay sa pamamagitan ng pagpapakilala ng kinakailangang bilang ng mga puwang. Alalahanin na ang teksto sa loob ng isang pares ng mga tag 

AT
ay ipinapakita sa isang monospaced na font, at lahat ng mga puwang at tab ay makabuluhan. Ang pagkakahanay 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 orihinal na ipinatupad sa lahat ng nangungunang mga browser at pagkatapos lamang ng mahabang panahon ay naayos sa HTML 3.2 na detalye.

Ang mga espesyal na tool para sa paglikha ng mga talahanayan, gayunpaman, ay hindi kanselahin ang 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 gamit ay upang ayusin ang layout ng iba't ibang data sa isang pahina, na maaaring binubuo ng payak na teksto, mga larawan, iba pang mga talahanayan, at iba pa. Ang kabanatang ito ay nakatuon sa mga panuntunan para sa paglikha ng mga talahanayan at mga halimbawa ng kanilang paggamit.

kanin . 4.1. Karaniwang halimbawa ng talahanayan ng HTML


kanin . 4.2. Halimbawa ng isang table na walang hangganan

Paglikha ng Basic HTML Tables

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

Ang 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 mga talahanayan ay maaaring ilagay sa loob ng bawat isa. Ang bawat talahanayan ay dapat magsimula sa tag

at tapusin 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 isang tag (Table Row) at nagtatapos sa tag. Ang isang solong cell sa isang hilera ay naka-frame sa pamamagitan ng isang pares ng mga tag At(Data ng Talahanayan) o At(header ng talahanayan). Tag karaniwang ginagamit para sa mga cell ng header ng isang talahanayan, at - para sa mga cell ng data. Ang pagkakaiba sa paggamit ay nasa 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. Uri ng nilalaman ng cell ipinapakita sa Bold at nakasentro (ALIGN=CENTER, VALIGN=MIDDLE). Mga cell na tinukoy sa pamamagitan ng tag bilang default, ipakita ang data na naka-align sa kaliwa (ALIGN=LEFT) at sa gitna (VALIGN=MIDDLE) sa patayong direksyon.

Mga tag At hindi maaaring lumabas sa labas ng paglalarawan ng row ng talahanayan . Mga code ng pagwawakas, 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. Tag sa dulo 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 - ang maximum na bilang o sa lahat ng linya. Ang ilang mga cell ay maaaring walang anumang data, ang mga naturang cell ay 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 anumang linya ay walang data, maaaring tanggalin ang kanilang paglalarawan, at awtomatikong idaragdag ng browser ang kinakailangang bilang ng mga walang laman na cell. Kasunod nito, hindi pinapayagan ang pagbuo ng mga talahanayan kung saan ang iba't ibang mga hilera ay naglalaman ng ibang bilang ng mga column na may parehong laki.

Ang isang talahanayan ay maaaring may pamagat na nakapaloob sa isang pares ng mga tag At. Ang paglalarawan ng table header ay dapat ilagay 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 bago ang una . Inirerekomenda namin na sundin mo ang panuntunang ito.

Bilang default, ang teksto ng header ng talahanayan ay inilalagay sa itaas nito (ALIGN=TOP) at nakasentro sa pahalang na direksyon.

Ang mga nakalistang tag ay maaaring magkaroon ng 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 halimbawa ang pinakasimpleng mesa, na binubuo ng dalawang hilera at dalawang hanay, ang pagpapakita nito ay ipinapakita sa Fig. 4.3.

Isang halimbawa ng isang simpleng talahanayan

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


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

Representasyon ng mga talahanayan sa isang pahina

Isaalang-alang ang pagtatalaga ng iba't ibang mga parameter na maaaring gamitin sa mga tag na naglalarawan sa mga talahanayan.

Header ng talahanayan

Tag ng header ng talahanayan ay may iisang valid na parameter, 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 nakasentro. Maaaring walang pamagat ang talahanayan. Sa karamihan ng mga kaso, ang plain text ay ginagamit bilang table header, na kinokontrol ng HTML specification, ngunit sa katotohanan, sa pagitan ng mga tag. At pinahihintulutang magsulat ng anumang elemento ng HTML na ginamit sa seksyon . Narito ang isang halimbawa ng isang entry sa header ng talahanayan:

Tumungo sa ibaba ng mesa

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

Microsoft Browser Internet Explorer nagbibigay karagdagang mga tampok upang piliin ang lokasyon ng header. Ang ALIGN parameter ay tumatanggap ng LEFT, CENTER, at RIGHT para sa pahalang na pagkakahanay kasama ang mga value na inilalarawan 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 na pagkakahanay at patayong pagkakahanay. Halimbawa, ang entry na ALIGN=RIGHT ay magbibigay ng posisyon ng heading na pinindot laban sa kanang bahagi at inilagay sa itaas ng mesa. Kung isusulat mo ang ALIGN=BOTTOM, pagkatapos ay tulad ng sa halimbawa sa itaas, ang header ay matatagpuan sa ilalim ng talahanayan. Gayunpaman, hindi pinapayagan ang dobleng paggamit sa parehong ALIGN parameter 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 nakalagay sa ibaba ng isang left-aligned na talahanayan, ang paglalarawan ay ang mga sumusunod:

Naka-align sa ibaba na heading na naka-align sa kaliwa

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

kanin. 4.5. Pahalang na Alignment ng Table Header Microsoft browser Internet Explorer

Ang mga tampok ng pahalang na pagkakahanay ng table header ay isang extension ng detalye ng HTML, ay hindi sinusuportahan ng browser ng Netscape Navigator, at samakatuwid ay dapat lamang gamitin kapag talagang kinakailangan.

Mga Opsyon sa Tag

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

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

Parameter BORDER

Kinokontrol ng parameter ng BORDER ang pagpapakita ng mga hangganan sa paligid ng bawat cell, na mahalagang nagbibigay ng mga linya ng grid ng talahanayan, at sa paligid ng buong talahanayan. Bilang default, ang mga frame ay hindi iginuhit, at sa screen ay makikita lamang ng user ang teksto ng mga cell ng talahanayan na eksaktong matatagpuan. Maraming mga sitwasyon kung saan nabibigyang-katwiran ang paggamit ng mga table na walang hangganan, halimbawa, para sa mga listahan ng multi-column na ipinatupad gamit ang mga talahanayan, o pagtukoy ng eksaktong kamag-anak na posisyon ng mga numero at teksto. Gayunpaman, sa karamihan ng mga kaso, para sa tradisyonal na paggamit ng mga 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 nakapaloob sa talahanayan.

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

ang parameter ng BORDER, na maaaring isang numeric na halaga.

Halimbawa,

o
.

Tinutukoy ng numerical value ng parameter ang kapal ng frame sa mga pixel na iginuhit sa paligid ng buong talahanayan, gayunpaman, hindi naaapektuhan ng value na ito ang kapal ng mga frame sa paligid ng bawat cell. Sa kawalan ng isang numerical na halaga, ito ay karaniwang kinuha katumbas ng pinakamababang halaga (1), kahit na ang estilo ng pagpapakita ng mga frame ay maaaring mag-iba para sa iba't ibang mga browser. Walang posibilidad na malayang kontrolin ang pagpapakita ng frame sa paligid ng buong talahanayan at ang mga frame sa paligid ng mga cell.

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


kanin. 4.6. Talahanayan na may 10 px makapal na hangganan

Ang HTML 3.0 na detalye ay walang kasamang halaga para sa Parameter ng BORDER. Ginagawa lang ito sa HTML 3.2. Kaya, sa partikular, maaga Mga bersyon ng Microsoft Hindi pinayagan ng Internet Explorer ang pagtatakda ng numerical value.

Tandaan na kung walang parameter ng BORDER, walang iguguhit na mga hangganan, ngunit natitira ang espasyo para sa kanila (nalalapat lamang ito sa Netscape). Ang kabuuang sukat ng talahanayan sa kawalan ng parameter ng BORDER o ang presensya nito ay hindi nagbabago (ang pagbubukod ay ang kaso ng pagtatakda ng BORDER=0). 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 ayusin ang mga cell nang malapit sa isa't isa hangga't maaari sa pamamagitan ng pagtatakda ng BORDER=0, na nangangahulugang walang mga hangganan. Maaaring hindi sinusuportahan ng ilang browser ang pagtatakda ng numeric na halaga para sa parameter ng BORDER, kung saan ang halaga ng zero ay babalewalain at ang talahanayan ay iguguhit na may mga hangganan.

Narito ang ilang halimbawa:

Lahat ng tatlong halimbawang ito ay ire-render nang iba ng Netscape browser. Tandaan na ito ay isang kakaibang kaso kung saan hindi mo 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 ang default na halaga ng parameter ng BORDER ay zero para sa browser na ito.

Parameter ng CELLSPACING

Parameter notation form: CELLSPACING=num, kung saan ang num ay ang numeric na halaga ng parameter sa mga pixel, na hindi maaaring tanggalin. Tinutukoy ng num value 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 dalawa. Tandaan na ayon sa kaugalian sa mga sistema ng pag-publish, ang mga katabi ng mga cell ng talahanayan ay may isang karaniwang hangganan. Sa mga HTML na talahanayan, bilang default, natitira ang espasyo sa pagitan ng mga ito, tulad ng makikita sa larawan sa itaas (Figure 4.6). Kapag nakatakda ang 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 halagang CELLSPACING=0

CELLPADDING parameter

Ang anyo ng parameter ay katulad ng CELLSPACING. Tinutukoy ng num value ang dami ng libreng espasyo (padding) sa pagitan ng cell border at ng data sa loob ng cell. Bilang default, ang halaga ay kinukuha ng katumbas ng isa. Ang pagtatakda ng CELLPADDING parameter sa zero ay maaaring maging sanhi ng ilang bahagi ng text ng cell na hawakan ang hangganan nito, na hindi masyadong aesthetically kasiya-siya.

Sa fig. Ang 4.8 ay nagpapakita ng isang halimbawa ng isang talahanayan na may halagang CELLPADDING=10.


kanin. 4.8. Talahanayan na may CELLPADDING=10 na halaga

Ang operasyon ng mga parameter ng CELLPADDING at CELLSPACING ay halos magkapareho sa isa't isa. Para sa isang table na walang hangganan, ang pagpapalit ng isa o iba pang parameter ay humahantong sa parehong resulta. Ang parehong mga opsyon ay nakakaapekto sa kaukulang mga offset nang pahalang at patayo. Sa kasamaang palad, hiwalay na kontrol ng pahalang at vertical indents ang paraan ng paggawa nito, halimbawa, para sa pag-indent ng mga larawan (ang HSPACE at VSPACE na mga parameter 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 ang tinanggal, ang default na halaga nito ay kukunin. Sa partikular, kung ang lahat ng mga parameter sa itaas 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:

Tanging sa embodiment na ito, ang mga cell ay matatagpuan malapit sa isa't isa. Ang isang halimbawa ng paggamit ay isang talahanayan kung saan ang lahat ng mga cell ay naglalaman ng mga larawan ng parehong laki na kailangang ilagay sa tabi ng bawat isa.

Mga Parameter WIDTH at HEIGHT

Kapag ipinakita ang 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, laki ng viewport, atbp. Kapag ipinapakita, awtomatikong kinakalkula ang mga sukat ng talahanayan, na isinasaalang-alang ang mga salik na ito, habang ginagawa ang pagtatangka upang ipakita ang talahanayan sa pinaka-maginhawang anyo - ayusin ang talahanayan upang magkasya ito sa viewport. Ang pangkalahatang pamamaraan para sa pagtingin sa mga malalaking dokumento, bilang panuntunan, ay nabawasan sa isang 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 imahe, atbp. Nalalapat ito sa parehong mga HTML na dokumento at ordinaryong mga dokumento na nilikha sa anumang teksto mga editor. Karamihan tulad ng mga text editor (halimbawa, Microsoft Word), at ang mga HTML browser ay awtomatikong nag-format ng teksto upang (kung posible) na ang haba ng mga linya ay hindi lalampas sa lapad ng viewport. Iniiwasan nito ang pangangailangang mag-scroll nang pahalang sa dokumento. Ang mga katulad na aksyon ay ginagawa ng mga browser na may mga talahanayan - kung maaari, i-format ang mga ito sa paraang ang lapad ng talahanayan ay hindi lalampas sa lapad ng viewport. Maaari itong tapusin na ang lapad ng mga talahanayan ay isang mas mahalaga, pinakamahalagang parameter, ang pagkalkula kung saan ay ginanap una sa lahat kumpara sa taas.

Sa karamihan ng mga kaso, ang dynamic na sukat ng talahanayan ay magreresulta sa isang aesthetically sized na imahe na may mahusay na paggamit ang tunay na lugar ng viewport. Gayunpaman, maaaring kailanganin na pilitin 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 pag-record: 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 ito ay 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 pananatilihin hangga't maaari. Ipaliwanag natin ito sa mga halimbawa. Hayaang magkaroon ng isang talahanayan na, sa ilalim ng mga ibinigay na kundisyon, bilang default ay magkakaroon ng lapad na mas mababa kaysa sa tinukoy. Sa kasong ito, tataas ng browser ang lapad ng talahanayan sa kinakailangang lapad sa pamamagitan ng proporsyonal na pagpapalawak ng lahat ng mga column ng talahanayan. Ang pagpapaliit sa viewport ay hindi magbabago sa lapad ng talahanayan, at maaaring mangailangan ng pahalang na pag-scroll upang matingnan ito. Kung ang talahanayan bilang default 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 mga 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, at pagkatapos ay magkakaroon ito ng pinakamababang posibleng lapad. Ang parehong mga aksyon ay ginagawa para sa mga talahanayan na walang mga sukat na tinukoy kapag nagpapaliit sa viewport.

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

Parameter ALIGN

Ibinigay na parameter ng tag

tumutukoy sa pahalang na posisyon ng talahanayan sa viewport. Ang mga wastong halaga ay LEFT (left alignment) at RIGHT (right alignment). Bilang default, ang mga talahanayan ay naka-left-align. Tandaan na kabilang sa mga pinahihintulutang halaga ay walang karaniwang halaga para sa alignment na parameter - CENTER. Sa ilang mga mapagkukunan ng wika HTML na halaga CENTER (centered) ay ibinibigay bilang wasto sa kasong ito. Ito ay sumusunod sa HTML na detalye, ngunit sa pagsasagawa ng 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 pinapayagan din ang pagbabalot ng talahanayan na may teksto mula sa kabaligtaran, katulad ng mga larawan sa pagbabalot. Ang pagbabalot ng talahanayan na may teksto sa magkabilang panig ay hindi ibinigay sa anumang mga kaso. Para sa mas pinong kontrol sa pambalot, gamitin ang tag
na may CLEAR parameter sa parehong paraan tulad ng para sa . Kung aalisin ang parameter na 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 text wrapping, maaari mong makuha ang lokasyon nito 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.

Table na may wrapping text


nasa hustong gulang

populasyon ng St. Petersburg

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

  • Arkady
  • Boris
  • Vadim
  • Valentine
  • Valery
  • Basil

  • Victor
  • Vitaly
  • Vladimir
  • Vladislav
  • Vyacheslav

  • Gennady
  • George
  • Hermann
  • Gregory
  • Dmitry

    		•

  • Eugene
  • Yefim
  • Ivan
  • Igor
  • Ilya
  • Joseph
  • Konstantin

  • isang leon
  • Leonid
  • Michael
  • Nicholas
  • Oleg
  • Paul
  • Peter

  • nobela
  • Semyon
  • Sergei
  • Stanislav
  • Edward
  • Yuri
  • Jacob

    		•








    Ang 43 na pinakamadalas na nakakaharap na mga pangalan ay sumasaklaw sa 92% ng sample.

    kanin. 4.9. Borderless table na may wrapping text

    Ang dokumentong ito ay binubuo ng isang walang hangganang talahanayan na ang pagkakahanay ay nakatakda sa ALIGN=LEFT, na nagbibigay-daan sa tekstong sumusunod sa talahanayan na maiposisyon 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 talahanayan upang magpakita ng listahan ay isang paraan upang pilitin ang isang listahan sa maraming column, na inilalarawan din ng halimbawang ito. Maaaring hindi magkasya ang teksto sa kanan ng talahanayan, ngunit magpapatuloy ito pagkatapos ng talahanayan. Subukang bawasan ang lapad ng viewport ng browser sa halimbawang ito, at sa isang punto ang lahat ng teksto ay nasa ibaba ng talahanayan. Alalahanin na upang pilitin ang isang break sa daloy ng teksto sa paligid ng talahanayan (halimbawa, kung ang kasunod na teksto ay hindi lohikal na nauugnay 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 bagong linya
      nang walang CLEAR parameter (tulad ng ginawa 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 isang katulad na pahina, ang pagpapakita nito ay ipinapakita sa Fig. 4.10.

      Table na walang pambalot na text

      Ang pinakakaraniwang pangalan ng lalaki

      populasyon ng nasa hustong gulang ng St. Petersburg

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

    • Arkady
    • Boris
    • Vadim
    • Valentine
    • Valery
    • Basil

    • Victor
    • Vitaly
    • Vladimir
    • Vladislav
    • Vyacheslav

    • Gennady
    • George
    • Hermann
    • Gregory
    • Dmitry

      		•

    • Eugene
    • Yefim
    • Ivan
    • Igor
    • Ilya
    • Joseph
    • Konstantin

    • isang leon
    • Leonid
    • Michael
    • Nicholas
    • Oleg
    • Paul
    • Peter

    • nobela
    • Semyon
    • Sergei
    • Stanislav
    • Edward
    • Yuri
    • Jacob

      		•

      Ang ibinigay na data ay nakuha sa batayan ng 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 pinakakaraniwang pangalan na ito ay sumasaklaw sa 92% ng sample.
      Ang dalas ng paglitaw ng bawat isa sa iba pang mga pangalan ay hindi lalampas sa 0.3%

      kanin. 4.10. Borderless table na naglalaman ng tatlong column

      Hindi tulad ng nakaraang halimbawa, walang tekstong dumadaloy 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 magtakda ng sapilitang pahinga sa teksto dito, tulad ng inilarawan sa nakaraang kaso. Ang lahat ng teksto na nauugnay sa talahanayan ay dapat ilagay sa loob ng ikatlong cell, at ang kasunod na teksto pagkatapos ng pagtatapos ng paglalarawan ng buong talahanayan. Pareho ang hitsura ng parehong mga halimbawa kapag tiningnan sa buong screen, maliban sa header, na sa unang kaso ay matatagpuan sa gitna ng isang listahan ng dalawang hanay, at sa pangalawang kaso ito ay matatagpuan sa gitna ng lahat ng tatlong mga haligi ng talahanayan . Gayunpaman, kapag ang viewport ay nabawasan sa huling halimbawa, walang bahagi ng teksto ang maaaring pumunta sa ibaba ng talahanayan, sa gayon ay lumalabag sa istraktura nito.

      Pag-format ng data sa loob ng isang talahanayan

      Ang bawat indibidwal na cell sa loob ng isang talahanayan ay maaaring isipin bilang isang lugar para sa independiyenteng pag-format. Ang lahat ng mga patakaran na namamahala sa pagpapakita ng teksto ay maaaring gamitin upang i-format ang teksto sa loob ng isang cell. Sa loob ng isang cell, maaari mong gamitin ang halos lahat ng mga elemento ng HTML na maaaring lumitaw sa loob ng katawan ng isang dokumento. , kabilang ang mga tag na kumokontrol sa lokasyon ng teksto -

      ,
      ,

      , mga code ng header - mula sa

      dati

      , mga tag sa pag-format ng character -<В>, , , , , , , mga tag na naglalagay ng mga graphic na larawan , mga hypertext na link<А>atbp. Agad nating bigyang-diin na ang saklaw ng mga tag na tinukoy sa loob ng isang cell ay limitado sa mga hangganan ng cell na ito, anuman ang presensya ng end tag. Halimbawa, kung ang isang kulay ng teksto ay tinukoy sa loob ng isang cell - , pagkatapos kahit na sa kawalan ng panghuling code o pagpoposisyon 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 para sa pag-format ng 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 kunin ang mga value na TOP (sa itaas), BOTTOM (sa ibaba), MIDDLE (sa gitna), BASELINE (kasama ang baseline). Ang default ay MIDDLE. Ang baseline alignment ay nagbubuklod sa teksto ng isang linya sa lahat ng mga cell sa isang linya. Itakda ang Alignment Options sa Code Level tumutukoy sa pagkakahanay para sa lahat ng mga cell ng isang naibigay na row, habang ang bawat indibidwal na cell ng row ay maaaring magkaroon ng sarili nitong mga parameter 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 naka-align sa kanan, ang pangalawang column ay nakagitna, at ang ikatlong column ay naka-left-align (default na halaga):

      Pag-align ng mga elemento ng talahanayan

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

      Ang pag-render 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 opsyong ito ay dapat na iwasan, dahil maaari nitong makabuluhang bawasan ang kakayahang baguhin ang laki ng mga talahanayan at mapahina ang kanilang pang-unawa. Sa karamihan ng mga kaso, ito ay sapat na upang gamitin ang NOWRAP para sa mga indibidwal na mga cell na talagang nangangailangan ng pagbabawal ng word wrapping sa isang bagong linya. 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 mga text break sa ilang partikular na lugar, sa halip na isang space character, 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 isang naibigay na dami; sa pagitan ng apelyido at inisyal. Kaya, ang teksto ay 650 km o Yeltsin B.N. inirerekumenda na magsulat 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 isinulat 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 value na maitakda sa mga pixel. Dahil ang talahanayan ay isang konektadong 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 linya. Kung ang isang 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 indikasyon, pagkatapos ay pipiliin ang maximum na halaga. 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

      nakatakda ang mga setting ng mga indibidwal na column ng pangkat na ito. Gayunpaman, sa tag kung kinakailangan, maaaring itakda ang mga parameter ng alignment, ang mga halaga nito ay nalalapat sa lahat ng mga column ng pangkat na ito. Mga halaga 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 ng tag ay muling tukuyin.

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

      o . Notation: COLSPAN=num, kung saan ang num ay isang numeric na value na tumutukoy kung ilang column ang papalawakin nang pahalang ang kasalukuyang cell. Ang paggamit ng parameter na ROWSPAN ay magkatulad, dito mo lang tinukoy ang bilang ng mga hilera na ang kasalukuyang cell ay dapat sumasaklaw nang patayo. Bilang default, ang mga parameter na ito ay nakatakda sa isang halaga ng isa. Posibleng itakda ang mga halaga ng parehong mga parameter para sa isang cell nang sabay. Ang pagtatakda ng mga halaga ng mga parameter na ito nang tama ay maaaring hindi isang napakasimpleng gawain, lalo na dahil pinapayagan ka ng karamihan sa mga editor ng HTML na biswal na magdisenyo gamit ang kasunod na henerasyon ng mga HTML code lamang ang pinakasimpleng mga talahanayan.

      Sa fig. Ang 4.12 ay nagpapakita ng isang halimbawa ng isang table display, na nakuha ng sumusunod na HTML code:

      Gamit ang COLSPAN at ROWSPAN Options

      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. Talahanayan na may mga cell na sumasaklaw sa maraming row o column

      Ang hindi nag-iingat na setting ng mga parameter ng pagkalat 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 (na ipinapakita sa Figure 4.13) kung saan mali ang pagkakabuo ng 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 pag-detect ng mga extended na cell (text overlay)

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

      , , naglalaman ng 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. Kung ang mga cell na naglalaman ng data (kahit na hindi nakikita) ay ipinapakita sa parehong paraan ng lahat ng mga browser, ang mga walang laman na cell ay ipapakita sa ibang paraan. Ang Netscape browser 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 tulad ng mga cell na naglalaman ng data. Walang hangganang iginuhit 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. Magkaiba ang pagre-render ng walang laman na table cell sa iba't ibang browser

      Ipinapakita ng Microsoft Internet Explorer ang parehong mga cell sa kulay ng background ng mga cell. Ang isang browser tulad ng NSCA Mosaic ay nagbibigay-daan sa gumagamit na matukoy ang likas na katangian ng pagpapalabas ng mga walang laman na cell sa talahanayan sa pamamagitan ng pagpili ng mga naaangkop na opsyon. Ang pag-alam sa mga naturang feature ay magbibigay-daan sa iyong magdisenyo ng mga talahanayan na ipapakita nang naaangkop, anuman ang browser na pinili 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 karaniwang problema kapag gumagawa ng mga talahanayan ay ang pagtatakda ng mga opsyon sa pag-align para sa mga indibidwal na row o column. Upang ihanay ang mga nilalaman ng lahat ng mga cell ng kasalukuyang hilera, sapat na upang itakda ang mga kinakailangang parameter sa code

      . Mas madalas, gayunpaman, ito ay kinakailangan upang matiyak na ang lahat ng mga elemento sa parehong column ay nakahanay sa parehong paraan, dahil sa karamihan ng mga kaso ang column ay naglalaman ng homogenous na data. Sa mga naunang bersyon ng HTML, iminungkahi na gamitin ang parameter na COLSPEC (COLumn SPECification), na itinakda 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. Napansin 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 kanilang paggamit ay nangangailangan ng pag-iingat.

      Narito ang isang halimbawa ng isang talahanayan na gumagamit ng isang antas ng nesting.

      Mga lungsod sa rehiyon ng Leningrad

      Mga lungsod sa rehiyon ng Leningrad

      H - populasyon ng lungsod (libong naninirahan, 1992)

      P - distansya mula sa St. Petersburg (km)

      Mga lungsod na sakop 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 ay nasasakupan
      pangangasiwa
      Petersburg, mayroon
      direktang urban
      numero sa telepono.

      Mga lungsod ng regional subordination
      lungsodHP
      Boksitogorsk 21.6

      ALIGN=RIGHT>245

      Volkhov 50.3

      ALIGN=RIGHT>122

      Vsevolozhsk 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

      (Pagpapatuloy ng talahanayan)
      lungsodHP
      Luban 4.7

      85

      Novaya Ladoga 11.2

      ALIGN=RIGHT>141

      Otradnoe 22. 9

      ALIGN=RIGHT>40

      Pikalevo 25.1

      ALIGN=RIGHT>246

      Sa ilalim ng lupa 23.1285
      Primorsk 6.7137
      Priozersk 20.5

      ALIGN=RIGHT>145

      Svetogorsk 15.8

      ALIGN=RIGHT>201

      Mga slate 42.6

      ALIGN=RIGHT>192

      Pinery 57.6

      81

      Tikhvin 72.0

      ALIGN=RIGHT>200

      Tosno 33.8

      53

      Shlisselburg 12.5

      64

      kanin. 4.14. Halimbawa ng mga Nested Table

      Ang ipinapakitang resulta ng halimbawang ito ay ipinapakita sa fig. 4.14.

      Sa unang sulyap, tila walang nesting ng mga talahanayan sa halimbawa. Sa katunayan, ang buong dokumento ay isang table na walang hangganan na binubuo ng isang header at isang row lang na naglalaman ng limang cell. Ang organisasyon ng naturang talahanayan ay nagsisilbi sa tanging layunin ng pag-aayos ng data sa pahina. Sa loob ng unang cell ay isa pang table na may sariling header at binubuo ng tatlong column, na sinusundan ng text na naka-align 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, ngunit itinatakda ng parameter na ito ang mga indent nang pahalang at patayo, na hindi kinakailangan sa ngayon. Bilang karagdagan, ang isang walang laman na cell na may ibinigay na lapad ay liliit kapag ang viewport ay makitid, kabaligtaran sa espasyo na tinukoy ng parameter ng CELLSPACING (pati na rin ang CELLPADDING). Para sa halimbawang ito, subukang bawasan ang lapad ng viewport ng browser, o, sa parehong epekto, pataasin ang 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 karagdagang pagbabago ay hindi makakasira sa talahanayan, ngunit magbibigay-daan sa pahalang na pag-scroll. Ayon sa 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 pagbuo ng mga talahanayan

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

      Pagpapakita ng mga blangkong cell sa mga talahanayan

      Ang isa sa mga tampok ng pagtatanghal ng mga talahanayan ng 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 mag-pad ng mga linya na may mga walang laman na cell kung ang kanilang numero ay nakatakda sa mas kaunti sa anumang linya kaysa sa iba pang mga linya. Bilang karagdagan, maaaring mayroong 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, ang pagtatakda ng colspec="L40 R50 C80" ay tinukoy para sa tatlong column ng alignment ng data ng talahanayan sa mga cell: para sa unang column - LEFT, para sa pangalawa - KANAN at para sa pangatlo - CENTER, pati na rin ang lapad ng bawat column. . Habang umuunlad ang wikang HTML, hindi na ito ginagamit 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 upang malutas ang problemang ito, at ang tanging pagpipilian ay gamitin ang default na pagkakahanay o itakda ang naaangkop na mga halaga sa bawat cell kung kinakailangan.

      Nagbibigay ang Microsoft Internet Explorer ng mga espesyal na tag -

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

      Mga pagpipilian sa tag

      At ay 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 mga cell ng kaukulang column (o column). Ang mga wastong halaga para sa ALIGN parameter ay KALIWA, KANAN, at GITNA. Para sa parameter ng SPAN, ang default na halaga ay isa.

      Tag

      Binibigyang-daan ka din nito na itakda ang parameter ng VALIGN, na tumutukoy sa patayong pagkakahanay ng data sa mga cell. Ang mga wastong value para sa VALIGN parameter ay MIDDLE, TOP, at BOTTOM.

      Ang 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 pagsasama-samang ito ay ipinapakita kapag ginagamit ang parameter ng RULES, na inilalarawan sa ibaba. Bilang default, ang lahat ng column sa isang table ay itinuturing bilang isang grupo. Tag dapat lamang gamitin upang matukoy ang pagkakahanay ng data sa mga indibidwal na column sa isang pangkat.

      Kumuha tayo ng isang halimbawa. Ipagpalagay na kinakailangan upang 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 ay dapat na nasa gitna. Upang malutas ang problemang ito, isulat ang sumusunod na piraso 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 para sa data sa mga pangkat ng mga cell

      Isa pang halimbawa. Ipagpalagay na sa nakaraang talahanayan, ang unang dalawang haligi ay dapat na nakahanay sa kanan, at ang pangatlo - sa gitna, at ang lahat ng tatlong mga haligi ay dapat na pinagsama sa isang pangkat. Ang susunod na tatlong column ay dapat ding pinagsama-sama at may parehong alignment gaya ng unang grupo. Upang malutas ang problemang ito, isulat ang sumusunod na piraso ng HTML code:

      (data para sa talahanayan)

      Sa halimbawang ito, pagkatapos ng tag

      , kung saan makikita ang kahulugan ng pagpapangkat.

      Payo

      Dahil ang saklaw ng mga tag

      At limitado sa isang browser, ang Microsoft Internet Explorer, dapat itong gamitin nang may pag-iingat. Ang kaginhawahan ng paggamit ng mga tag na ito ay kitang-kita, ngunit sa pagsasagawa, karamihan sa mga talahanayan ay binuo gamit ang naaangkop na alignment parameter ALIGN para sa bawat table cell kung saan kinakailangan, na lubos na nagpapataas sa laki ng source code ng talahanayan, ngunit ginagawang posible na tingnan sa anumang browser.


      kanin. 4.17. Talahanayan na may mga nakapangkat na column

      Pagtatakda ng kulay ng mga hangganan ng talahanayan

      Ang ilang higit pang mga opsyon, partikular lamang sa Microsoft Internet Explorer, ay nagbibigay-daan sa iyong piliin ang kulay ng mga hangganan ng talahanayan - BORDERCOLOR, BORDERCOLORLIGHT at BORDERCOLORDARK. Maaaring itakda ang mga parameter na ito sa mga tag

      , . Ang pangalan ng kulay o ang hexadecimal na halaga nito ay maaaring gamitin bilang halaga ng mga parameter na ito. Tinutukoy ng parameter ng BORDERCOLOR ang kulay ng lahat ng elemento ng hangganan ng talahanayan, habang ang iba pang dalawang parameter ay tumutukoy sa kulay ng mga hangganan ng indibidwal na bahagi, na nag-o-override sa halaga ng BORDERCOLOR. Ang parameter na BORDERCOLORLIGHT ay nagbibigay kulay sa kaliwa at itaas na mga gilid ng buong talahanayan, at sa kanan at ibabang mga gilid ng bawat cell, ayon sa pagkakabanggit. Ang pangalawang parameter na BORDERCOLORDARK ay tumutukoy sa mga kulay ng magkasalungat na gilid. Dahil sa kumbinasyon ng mga parameter na ito, ang talahanayan ay magmumukhang medyo nakataas sa ibabaw ng pahina o recessed. Ang lahat ay nakasalalay sa napiling kumbinasyon ng mga kulay.

      Tandaan

      Sinusuportahan din ng Netscape 4.x browser ang opsyong BORDERCOLOR.

      Magtakda ng larawan sa background para sa isang talahanayan

      Ang Microsoft Internet Explorer (pati na rin ang Netscape version 4.x) ay nagbibigay-daan sa paggamit ng BACKGROUND parameter, na tumutukoy sa background na larawan para sa isang table, tulad ng magagawa nito para sa isang buong HTML na dokumento. Maaaring itakda ang parameter na ito sa mga tag

      , At
      , , w

      Binibigyang-daan ka ng Microsoft Internet Explorer na gumamit ng ilang bagong tag para sa pagbubuo ng mga talahanayan at nababaluktot na kontrol sa pagguhit ng mga frame at grid lines.

      Mga tag

      , At mas mahigpit na itakda ang istraktura ng paglalarawan ng talahanayan, na i-highlight ang mga cell ng header ng talahanayan, ang pangunahing nilalaman ng talahanayan at ang huling hilera. Ang mga tag na ito ay maaari lamang lumitaw sa mga paglalarawan ng talahanayan sa loob ng isang pares ng mga 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 maaari lamang lumitaw nang isang beses sa isang talahanayan. Maaaring tanggalin ang end tag para sa kanila. Ang paggamit ng mga tag na ito ay kapaki-pakinabang kapag gumagawa ng malalaking talahanayan na lampas sa isang pahina.

      Tag maaaring mangyari nang maraming beses sa paglalarawan ng talahanayan, at nangangailangan ng paggamit ng end tag. Ang tag na ito ay gumaganap ng lohikal na pagpapangkat ng data sa parehong paraan tulad ng tag A na nagpapangkat sa mga katabing column.

      Kapag gumagamit ng mga bagong tag, nagiging posible na mas flexible na pamahalaan ang mga frame at grid lines ng talahanayan.

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

      , at mga linya ng grid ng talahanayan - na may parameter na RULES. Halimbawa, nagiging posible na gumuhit lamang ng mga patayong linya sa pagitan ng mga hanay, at sa halip na isang hangganan 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 mula sa lahat ng apat na panig
      • ITAAS - itaas na bahagi lamang
      • IBABA - mula lamang sa ibabang bahagi
      • MGA HSIDE - iguhit ang ibaba at itaas na bahagi
      • MGA VIDES - pagguhit sa kaliwa at kanang bahagi
      • LHS - left side lang
      • RHS - kanang bahagi lang
      • 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 - tanging mga linya na naghihiwalay sa mga pangkat ang iginuhit
      • MGA HANAY - gumuhit ng mga linya na naghihiwalay sa mga linya
      • COLS - gumuhit ng mga linya na naghihiwalay sa mga hanay
      • WALA - ang mga panloob na linya ay hindi iginuhit

      Halimbawa:

      .

      Tandaan

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

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

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

      I-highlight ang header at bottom line

      Halimbawa ng flexible na kontrol sa linya
      grid ng talahanayan
      Pamagat ng column 1 Pamagat ng column 2 Pamagat ng hanay 3
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      DataDataData
      kinalabasankinalabasankinalabasan


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

      Sa halimbawang ito, ang pagpapakita kung saan ang browser ay ipinapakita sa Fig. 4.18, isa sa mga posibleng opsyon para sa pagkontrol ng mga linya ng grid at mga frame sa paligid ng talahanayan ay ipinapakita. 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 paghiwalayin ang mga pangkat ng data (RULES=GROUPS). Ang mga pangkat ng data ay tinukoy, una, sa pamamagitan ng pagkakaroon ng tatlong tag , kung saan ang bawat isa nagdedeklara ng isang haligi ng talahanayan pangkat. Pangalawa, mga tag , At<тгоот>hatiin din ang data ng talahanayan sa mga pangkat, na tumutukoy sa pagguhit ng mga panloob na pahalang na linya.

      Itakda ang bilang ng mga column sa isang table

      Binibigyang-daan ka ng Microsoft Internet Explorer (pati na rin ang bersyon ng Netscape 4.x) na tukuyin sa tag

      ang parameter ng COLS, ang halaga nito ay tumutukoy sa bilang ng mga column sa talahanayan. Ang pagre-record ng parameter na ito ay nagbibigay-daan sa iyo na pabilisin ang pamamaraan ng layout ng talahanayan kapag ipinakita sa browser, dahil nagiging posible na matukoy ang bilang ng mga column bago ma-load ang code ng paglalarawan ng talahanayan. Sa ngayon, ang pagpapagana sa opsyong ito ay hindi makakaapekto sa proseso ng pag-load ng dokumento sa anumang paraan.

      Vertical alignment ng talahanayan

      Huling parameter ng tag

      , na natatangi sa Microsoft Internet Explorer, ay isang VALIGN na tumutukoy sa patayong pagkakahanay ng isang talahanayan na nauugnay 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 balangkas ng detalye ng wika. Samakatuwid, hindi posible na mag-compose pivot table sa paggamit ng iba't ibang mga parameter sa labas ng konteksto ng kanilang aplikasyon. Halimbawa, ang ALIGN parameter lamang sa mga talahanayan 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 value na 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 pahalang na pagkakahanay ng mga nilalaman ng kaukulang cell (o mga cell) ng talahanayan.

      Alternatibo sa view ng talahanayan

      Ang suporta sa talahanayan ay naging isang malawak na tampok ng mga Web browser, kaya may kaunting dahilan na natitira upang maiwasan ang paggamit ng mga ito. Gayunpaman, isaalang-alang posibleng mga opsyon alternatibong representasyon ng data na maaaring gamitin sa halip na mga talahanayan o bilang karagdagan sa mga ito.

      Ilang iba pang paraan na hindi gumagamit ng konsepto ng mga talahanayan:

      • Gamit ang preformatted text. Ang pamamaraang ito ay tradisyonal na ginagamit sa maagang bersyon Wika 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 tama na ipapakita ng anumang mga browser, kabilang ang mga puro text.
      • Paggamit ng isang imahe na naglalaman ng isang talahanayan. Ang talahanayan ay maaaring likhain ng sinuman text editor o kahit na nai-render ng isang Web browser at pagkatapos ay nai-save bilang isang imahe sa isa sa mga graphic na format. Ay hindi ang pinakamahusay na paraan, dahil nawawala ang lahat ng flexibility ng dynamic na pag-customize ng display ng mga table. Bilang karagdagan, mayroong isang pangangailangan na mag-imbak ng isang karagdagang file na may isang imahe, ang laki kung saan, bilang isang patakaran, 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 pagtitiwala sa pagpapakita nito sa anumang panlabas na mga kadahilanan (mga font, mga mode ng browser, atbp.) ay hindi katanggap-tanggap.
      • Paggamit ng mga listahan sa halip na mga talahanayan. Para sa pinakasimpleng mga kaso, sa halip na ayusin ang mga talahanayan, ito ay lubos na posible upang makamit ang isa sa mga uri ng mga listahan na magagamit sa HTML na wika.

      Paghahanda ng mesa

      Upang maghanda ng mga HTML na talahanayan, maaaring gamitin ang anumang mga editor, karamihan sa mga ito ay may mga tool para sa biswal na paglikha ng mga talahanayan. Narito ang isang 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 upang punan ang naaangkop na mga patlang sa window. Matapos 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, pagpindot na nagpapahintulot sa iyo na tingnan ang resultang talahanayan gamit ang built-in na browser (Larawan 4.20).

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


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

      Kapag natapos mo nang ihanda ang data para sa talahanayan, i-click ang OK. Pagkatapos ay ilalagay ang nabuong code ng paglalarawan ng talahanayan sa nae-edit na HTML na dokumento. Para sa halimbawang ipinapakita sa fig. 4.19, ang sumusunod na code ay bubuo:

      (bahagi ng code ay tinanggal)

      Ulo ng mesa
      Hanay 1 Hanay 2 Hanay 3 Hanay 4
      1 2 3 4

      Katulad nito, nalutas ang gawaing ito gamit ang bahagi ng Netscape Composer ng Netscape Communicator. Sa fig. 4.21 ay nagpapakita ng isang dialog box kung saan kailangan mong punan ang mga kinakailangang field. Upang maglagay ng mga karagdagang parameter ng tag

      ang Extra HTML na button ay ibinigay. Pagkatapos punan ang mga patlang ng dialog box, dapat mong 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 mga opsyon sa talahanayan ng Netscape Composer


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

      Isang gawain

      Gumawa ng talahanayan at tukuyin ang mga parameter nito (mga margin at espasyo sa pagitan ng mga cell) sa pamamagitan ng mga istilo.

      Solusyon

      Ang talahanayan ay binubuo ng mga row at column ng mga cell na maaaring maglaman ng text at graphics. Ginagamit ang tag upang magdagdag ng talahanayan sa isang web page.

      . Ang elementong ito ay nagsisilbing lalagyan para sa mga elementong tumutukoy sa mga nilalaman ng talahanayan. Ang anumang talahanayan ay binubuo ng mga row at cell, na nakatakda ayon sa pagkakabanggit gamit ang mga tag At
      . Ang talahanayan ay dapat maglaman ng hindi bababa sa isang cell (halimbawa 1). Pinapayagan sa halip na tag gumamit ng tag . Text sa isang cell na may istilong tag , ay ipinapakita ng browser sa bold at nakasentro sa cell. Kung hindi, ang mga pagkakaiba sa pagitan ng mga cell na ginawa sa pamamagitan ng mga tag At hindi.

      Halimbawa 1: Gumawa ng talahanayan

      HTML5 IE Cr Op Sa Fx

      tag ng talahanayan

      Cell 1 Cell 2
      Cell 3 Cell 4

      Ang pag-aayos ng mga cell at ang kanilang hitsura ay ipinapakita sa fig. isa.

      kanin. 1. Ang resulta ng paglikha ng isang talahanayan na may apat na mga cell

      Ang katangian ng hangganan ng tag

      pinahihintulutang magdagdag lamang ng walang laman na halaga (
      ) o katumbas ng 1. Ang lahat ng iba pang mga halaga ay nabigo sa pagpapatunay.

      Upang kontrolin ang mga margin sa loob ng mga cell, ginagamit ang padding style property, na idinaragdag sa td selector. Ang spacing sa pagitan ng mga cell ay binago ng border-spacing property (halimbawa 2) na idinagdag sa tagapili ng talahanayan, naiintindihan lang ito ng IE mula sa bersyon 8.0.

      Halimbawa 2: Mga margin sa loob ng mga cell

      HTML5 CSS 2.1 IE Cr Op Sa Fx

      tag ng talahanayan

      Pamagat 1Pamagat 2
      Cell 3Cell 4

      Ang talahanayan na may mga patlang at distansya sa pagitan ng mga cell ay ipinapakita sa fig. 2. Ang isang katulad na resulta ay maaaring makamit sa isang puting frame sa paligid ng mga cell.

      kanin. 2. Mga patlang sa mga cell ng talahanayan

      Dahil sa versatility ng mga talahanayan, isang malaking bilang ng mga parameter na kumokontrol sa kanilang hitsura, ang mga talahanayan ay matagal nang naging isang tiyak na pamantayan para sa layout ng mga web page. Isang mesa na may hindi nakikitang hangganan ang hitsura modular grid, sa mga bloke kung saan maginhawang maglagay ng mga elemento ng isang web page. Gayunpaman, hindi ito ang tamang diskarte, dahil ang bawat HTML object ay tinukoy para sa sarili nitong mga layunin, at kung ito ay ginagamit nang hindi naaangkop, at saanman, nangangahulugan ito na walang mga alternatibo. Ganyan talaga matagal na panahon, hanggang sa pinalitan ng mga layer ang mga talahanayan kapag naglalagay ng mga site. Hindi ito nangangahulugan na ang mga layer ay ginagamit na ngayon sa lahat ng oras, ngunit ang trend ay malinaw na nakabalangkas - ang mga talahanayan ay ginagamit upang mapaunlakan ang tabular na data, at ang mga layer ay ginagamit para sa layout at disenyo.

      Gumawa ng table

      Ang talahanayan ay binubuo ng mga row at column ng mga cell na maaaring maglaman ng text at graphics. Ang mga talahanayan ay karaniwang ginagamit upang ayusin at ipakita ang data, ngunit ang mga talahanayan ay hindi limitado doon. Sa tulong ng mga talahanayan, ito ay maginhawa upang gumawa ng mga layout ng pahina, pag-aayos ng mga fragment ng teksto at mga imahe kung kinakailangan.

      Ginagamit ang tag upang magdagdag ng talahanayan sa isang web page.

      . Ang elementong ito ay nagsisilbing lalagyan para sa mga elementong tumutukoy sa mga nilalaman ng talahanayan. Ang anumang talahanayan ay binubuo ng mga row at cell, na nakatakda ayon sa pagkakabanggit gamit ang mga tag At lumilikha ng bagong linya. Sunod sa nested
      . Ang talahanayan ay dapat maglaman ng hindi bababa sa isang cell (halimbawa 12.1). Pinapayagan sa halip na tag gumamit ng tag . Text sa isang cell na may istilong tag , ay ipinapakita ng browser sa bold at nakasentro sa cell. Kung hindi, ang mga pagkakaiba sa pagitan ng mga cell na ginawa sa pamamagitan ng mga tag At hindi.

      Halimbawa 12.1. Gumawa ng table

      TABLE tag

      Cell 1 Cell 2
      Cell 3 Cell 4

      Ang pag-aayos ng mga cell at ang kanilang hitsura ay ipinapakita sa fig. 12.1.

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

      Bawat tag

      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 ang unang hilera ay may 5 mga hanay, kung gayon ang sumusunod na mga linya dapat ay 5 column. Kung hindi ay lumutang ang mesa. Posibleng pagsamahin ang mga cell.

      Paano gumawa ng table sa html

      Narito ang isang halimbawa, html code:

      Halimbawa ng 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. Tinutukoy ng numeric value nito ang bilang ng mga column na pagsasamahin. Mayroon ding analogue ng katangiang ito: tag (table header), kung saan kailangan mo ring magsulat ng colspan. Magiging pareho ang resulta. Ngunit madalas ay gumagamit sila ng isang regular na td.

      Ngayon tingnan natin ang lahat ng mga katangian ng tag nang detalyado.

      .

      I-tag ang mga katangian at katangian

      Sa pagbubukas ng tag

      Maaari kang magdagdag ng iba't ibang mga katangian.

      1. Property align="parameter" - itinatakda ang pagkakahanay ng talahanayan. Maaari itong tumagal ng mga sumusunod na halaga:

      Sa halimbawa sa itaas, nakasentro namin ang talahanayan na may 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 - ang hangganan ay iginuhit 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 bilang isang 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 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 . Itong mag-asawa nangangahulugan na nakagawa kami ng isang row sa table, at kung gaano karaming mga tag ang isusulat, napakaraming row.

      Well, sa loob

      inilagay namin ngayon ang isa pang pares - . Nangangahulugan ang pares na ito na nakagawa kami ng isang column sa row na ito, at kung ilang td ang nakasulat sa bawat tr, magkakaroon ng ilang column sa row na ito. Understandably? Kung hindi, tingnan natin ang isang halimbawa kung paano gumagana ang lahat dito ... Sabihin nating gusto kong lumikha ng isang talahanayan ng mga mag-aaral at mga marka. Pagkatapos ay isusulat namin ang sumusunod sa loob ng tag :

      o mga linya
      ... ... ...

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

      Halimbawa

      Halimbawa ng talahanayan
      Hanay 1 Hanay 2

      Nagbabago sa pahina sa sumusunod:

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

      3. Property bgcolor="color" - nagtatakda ng kulay ng background ng talahanayan. Bilang isang kulay, maaari kang pumili ng alinman sa buong palette (tingnan ang mga code at pangalan ng mga kulay ng html)

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

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

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

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

      8. Property cols="number" - ang bilang ng mga column. Kung hindi mo ito itinakda, tutukuyin ng browser ang 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. Maaari itong tumagal ng mga sumusunod na halaga:

      • walang bisa - huwag gumuhit ng mga hangganan
      • hangganan - ang hangganan sa paligid ng mesa
      • sa itaas - ang hangganan sa tuktok na gilid ng talahanayan
      • ibaba - ibabang hangganan 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 sa kanang bahagi ng talahanayan lamang
      • lhs - hangganan sa kaliwang bahagi ng talahanayan lamang

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

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

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

      Mga katangian at katangian

      1. Property align="parameter" - nagtatakda ng alignment ng isang hiwalay na table cell. Maaari itong tumagal ng 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 isang URL, dapat na nakasulat ang address ng background na larawan.

      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" - itinatakda ang 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 pinagsama-samang pahalang na cell.

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

      8. Property width="number" - nagtatakda ng 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 ng row
      • gitna - gitnang pagkakahanay
      • ibaba - ibabang pagkakahanay
      • baseline - baseline alignment
      Tandaan 1

      Para sa Tag

      . Mga opsyon para sa iisang tag
      loob nito

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

      Sa kaso ng paggamit ng border (cell border) at zero padding sa pagitan ng mga cell, pinagdikit pa rin ang mga ito at nakakuha ng dobleng border. Upang maiwasan ito, kailangan mong i-istilo ang talahanayan gamit ang border-collapse: collapse :

      ...

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

      Magandang araw sa lahat, mahal kong mga kaibigan. Kamusta ang summer? Umaasa ako na ang lahat ay nasa maayos na kalagayan. Well, ngayon ay patuloy nating pag-aaralan ang mga pangunahing kaalaman ng html at ngayon ay marahil ang huling aralin sa paksang ito, dahil pagkatapos ay sasabak tayo sa CSS. Kaya, nagsasalita tungkol sa html, hindi ko maiwasang magsalita tungkol sa mga talahanayan, dahil ang mga ito ay isang makabuluhang paksa din.

      Kumuha ng hindi bababa sa parehong wordpress. Bilang default, hindi makakagawa ang makinang ito ng talahanayan. Kailangan mo ng alinman sa isang espesyal na add-on (plugin) o isang espesyal na code ng programa (script). Ngunit magagawa lang natin ang gusto natin gamit ang mga simpleng tag. Sa pangkalahatan, ngayon sasabihin ko sa iyo kung paano lumikha ng isang talahanayan sa html, dahil ito ay talagang makakatulong sa iyo ng maraming.

      Naaalala ko kung paano ko ginawa ang aking mga unang site gamit ang tabular na layout, i.e. ang header, sidebars, footer at content block ay mga elemento lamang ng talahanayan. Nabanggit ko ito sa aking artikulo sa . Totoo, ngayon ay hindi na kaugalian na gumawa ng mga website gamit ang mga talahanayan, ngunit hindi ito nangangahulugan na hindi sila kailangan. Sa halip ang kabaligtaran.

      Ang mabuti pa ay hindi mo na kailangang gumuhit ng kahit ano. Ginagawa ang lahat sa isang regular na notepad (mabuti, o iba pa, tulad ng Notepad ++), at medyo madali. Sa pangkalahatan, magtrabaho tayo.

      mga tag

      Narito ang markup ay medyo mas kumplikado kaysa sa iba pang mga tag, ngunit lahat ng ito ay mabilis na naaalala. Kaya manood at huwag magambala.

      Ang anumang talahanayan ay palaging nakapaloob sa isang pares na tag

      . Yung. ang mga palatandaang ito ay nagbibigay ng utos na ang talahanayan ay matatagpuan dito.

      Ang isang pares na tag ay inilagay sa loob ng mesa

      Math wikang Ruso Kasaysayan
      Medvedev 3 5 5
      Smirnov 5 5 5
      Sokolov 3 2 3

      Anong ginawa natin dito? At gumawa kami ng apat na linya (tr), bawat isa ay naglalaman ng apat na talahanayan (td). Sa unang tr block, isinulat namin ang pangalan ng mga akademikong disiplina, habang iniiwan ang unang hanay na walang laman upang hindi masira ang talahanayan.

      Dagdag pa sa bawat unang pares td inilalagay namin ang mga pangalan ng mga mag-aaral, at lahat ng iba pa td punan ang mga marka sa kaukulang cell. Sa pangkalahatan, isulat ito at i-save ang file, pagkatapos ay buksan ito sa isang browser, pagkatapos ay mauunawaan mo mismo ang lahat kung paano ito nangyayari.

      Ngunit pagpunta sa dokumento, nakita namin na ang talahanayan ay hindi lubos na katulad sa kung ano ang aming pinlano. Ano ang kulang dito? Tama iyon - mga hangganan. Pero huwag kang mag-alala. Sasabihin ko sa iyo ang tungkol dito sa ibaba.

      Ngunit para sa kapakanan ng mga pagpapakita, magpapakita ako sa iyo ng isa pang tag na nagha-highlight at nakasentro ng data sa mga talahanayan. Ang tag na ito ay nakasulat bilang

      		. I-highlight natin ang ating mga heading sa talahanayan. Upang gawin ito, palitan lamang ang mga tag td, sa ika sa mga lugar kung saan isinusulat natin ang mga pangalan at pangalan ng mga disiplina.

      At tingnan natin kung ano ang magagawa natin dito. Tulad ng sinabi ko, ngayon ang mga pamagat na ito ay nakasentro at naka-highlight. Ito ang aming pinagsikapan.

      Sa pangkalahatan, inisip namin ang mga tag. Bagama't may iba pa (maaari kang tumingin sa htmlbook), ngunit hindi ako magtutuon sa kanila.

      Mga Katangian

      Naturally, ang isang bagay na tulad ng mga talahanayan ay hindi maaaring gawin nang walang mga espesyal na katangian, at ipapakita ko sa iyo ang ilan sa mga ito.

      hangganan

      Well, gusto kong magsimula sa kung ano ang sinabi ko tungkol sa itaas, iyon ay, tungkol sa mga hangganan. Bilang default, ang mga ito ay hindi, kaya ang talahanayan ay lumalabas na hindi kapani-paniwala at hindi lubos na malinaw. Ngunit ito ay maaaring maayos, at ang katangian ng hangganan, na direktang nakalagay sa pambungad na tag, ay makakatulong sa amin dito.

      . Gawin ang ipinakita ko sa iyo sa halimbawa sa ibaba, ibig sabihin, itakda ang halaga ng katangian sa border="1" .

      Pagkatapos mong gawin ito, i-save ang resulta at patakbuhin ang dokumento. Well? Ito ay medyo ibang bagay. Ngayon ang talahanayan ay nakakuha ng mga normal na balangkas at hitsura ayon sa nararapat. Maaari kang mag-eksperimento sa iba't ibang mga halaga ng hangganan at makita kung ano ang pinakaangkop sa iyo sa iyong partikular na kaso.

      Padding at spacing (cellpadding at cellspacing)

      Ito ay medyo natural na ang isang pagpapakita ng isang mesa para sa lahat ng okasyon ay hindi angkop sa lahat. Ngunit maaari nating baguhin iyon nang kaunti, salamat sa dalawang magkatulad na katangian.

      Cellpadding="« - binabago ang distansya mula sa mismong frame patungo sa nilalaman sa cell. Kaya, ang lahat ng mga cell sa talahanayan ay nagiging mas malaki. Isulat natin ang katangiang ito sa talahanayan, at itakda ang halaga sa 5, at tingnan kung paano ito naiiba sa ang orihinal na bersyon.

      Hop. Kita mo? Ang distansya ay tumaas. sa ganitong paraan maaari mong palitan ang mga nais na halaga sa iyong sarili, at sa gayon ay mapalawak ang mga cell.

      Cellspacing="" - binabago ang espasyo sa pagitan ng mga cell ng talahanayan at ang mga halaga nito ay sinusukat din sa mga pixel. Subukan din nating itakda ang attribute na ito sa 5 at tingnan kung ano ang mangyayari.

      Well? Malinaw ba ang punto? Tulad ng nakikita mo, ang distansya sa pagitan ng mga cell ay naging mas malawak. Ito mismo ang aming pinagsikapan.

      Paghahanay

      Buweno, nasaan tayo kung wala itong kahanga-hangang katangian na nagpapahintulot sa atin na ihanay ang lahat sa iba't ibang lugar? Ang align ay gumagana nang eksakto katulad ng sa iba pang mga tag na napagdaanan namin dati at may tatlong value:

      • Gitna
      • Tama

      Isulat natin ang bawat isa sa mga halaga at tingnan kung paano ipamahagi ang talahanayan.

      Well? Mukhang gumagana ang lahat at sa tingin ko dapat itong maging malinaw. Ngunit kung mayroon kang anumang mga katanungan, huwag mag-atubiling magtanong.

      Well, iyon lang talaga ang gusto kong sabihin sa iyo tungkol sa mga talahanayan ngayon. Sana naging malinaw sa iyo ang lahat. Buweno, kung gusto mong pag-aralan nang detalyado ang lahat ng mga intricacies ng pagtatrabaho sa HTML at CSS at matutunan kung paano lumikha ng mga website nang mag-isa, masidhi kong inirerekomenda na tingnan mo mahusay na kurso sa video sa ang paksang ito. Para sa isang baguhan, ito ang pinaka-naiintindihan, tulad ng para sa akin, kurso ng video, kung saan ngumunguya mo lang ang lahat at ilagay ito sa mga istante.

      Well, tinatapos ko na ang lesson ko para sa araw na ito. Huwag kalimutang mag-subscribe sa aking mga update sa blog para wala kang makaligtaan mahalagang impormasyon o balita. At makikita ka namin sa iba pang mga artikulo. Good luck at bye bye!

      Taos-puso, Dmitry Kostin.