Aralin sa HTML. Ang pagsasama sa mga cell

Ang talahanayan sa HTML - isang napaka-madaling-magamit na item. Sa mga ito maaari kang gumawa ng kahit ano. Siyempre pa, ang pangunahing layunin - ang paglalagay ng impormasyon sa isang table. Ngunit ang mga developer ng mga site ay may paroroonang lalo pang malayo. Sa isang pagkakataon ito ay napaka-tanyag na gumamit ng isang talahanayan upang lumikha ng isang site framework. Ngayon propesyonal na sinusubukan hindi upang gawin ito.

Tables ay natagpuan ang kanilang malawak na application dahil sa malaking bilang ng mga katangian. Halimbawa, ang isang napaka-kapaki-pakinabang na ari-arian naka-pagsasama-sama ng mga hilera o haligi.

Panimula sa teorya

Sa HTML, mga unyon ng mga cell ay nangyayari sa pamamagitan ng dalawang katangian: colspan at rowspan. Ang mga ito ay tinukoy para sa td tag.

Ipaalam sa amin unang-aralan ang istruktura ng bawat talahanayan, bago namin bungkalin ang paksa. Sa bawat mesa may isang linya, at sa loob nito - cell. Tandaan na ang una, ang lahat ng mga talahanayan ay dapat maglaman ng parehong bilang ng mga cell.

Ang figure sa itaas na nakasaad sa dalawang mga hanay at sa bawat isa sa tatlong mga cell. Ito ay isang pangkaraniwang table. Kung ikaw ay sa anumang kahon, i-type ng isang mas maliit na bilang ng mga cell, ang mga talahanayan ay "umalis", ang lahat ay hindi ipapakita tama.

HTML-Table: sumanib cells patayo at horizontally

Upang tukuyin ang isang mas maliit na bilang ng mga cell o mga string ay maaaring gamitin lamang kung mayroon kang isang bagay upang sumanib. Ngunit sa halip na ang mga tinanggal na item sa pinakamalapit na kapitbahay sa itaas kailangan mong tukuyin ang isang karagdagang attribute. Kung pagsamahin mo ang mga column, pagkatapos ay ang colspan, kung ang mga string, at pagkatapos ay rowspan. Ang halaga ng isang katangian ay nagpapahiwatig ng bilang ng mga item na gusto mong ipagsama.

Mangyaring tandaan na kailangan mo upang tukuyin ito sa pinakamalapit na sangkap sa itaas. Halimbawa, sa figure sa itaas, kung ginusto mong pagsamahin ang mga cell 1 at 2, kailangan mong tukuyin sa cell 1 colspan attribute na may halagang dalawa. At tanggalin ang numero ng posisyon 2 o 3, ito ay hindi mahalaga.

Ang kahulihan ay magsasabi sa iyo ang cell kung magkano ang space aabutin. Ang default na halaga ay 1.

Pagsamahin ang mga cell patayo HTML-table ay tumatagal ng lugar sa parehong prinsipyo. Kailangan lang inookupahan space isasaalang-alang habang patayo. Tingnan malaman ibaba.

Dito, ang cell na may mga numero ng 43 ay tumatagal ng dalawang mga string. Upang gawin ito, tinukoy mo ang attribute rowspan. Basta tatandaan:

• Hilera - hilera.
• Col - column / haligi.
• Agwat - Association.

Ang mga tagalikha Sinubukan upang dalhin ang lengguaheng ginagamit nila sa mga tao, kaya na kahit na walang pag-alam ito, maaaring kahit papaano ay maunawaan.

Sa HTML, mga unyon ng mga cell ay maaaring gawin sa dalawang mga direksyon: patayo at pahalang. Upang gawin ito, tukuyin ang pareho naming attribute.

Ang figure sa itaas ay lamang na at nakasaad na ang mga asosasyon ay maaaring gawin: hilera, mga haligi, o pareho hanay at haligi.

HTML: sumanib cells. halimbawa

Ipaalam sa amin isaalang-alang ang mas kumplikadong halimbawa milestone sa malaking mga talahanayan. Sa ibaba sa kaliwa Itakda ang orihinal na bersyon ng isang regular na table. Ang isang karapatan - isang variant na may isang kumbinasyon ng dalawang mga cell sa pangalawang hilera. Kaya mas malinaw at mas madali upang ihambing ang HTML-code.

Maaari mo ring pagsamahin ang tatlong sa gitna ng mga cell. Sa unang kaso colspan attribute ay tumutukoy sa cell №1. Dito, ang una ay hindi magbabago, at ang pangalawa idinagdag sa colspan, katumbas ng tatlo.

Kung gusto mong ipagsama ang lahat ng mga cell sa isang hilera sa isang solong, pagkatapos ay tanggalin ang apat na td sa unang ipahiwatig colspan = '5'.

Tulad ng iyong nakikita, sa katunayan, lahat ng bagay ay simple. Walang kumplikado. Pinakamahalaga, mabuti, mula sa unang panahon upang maunawaan ang lahat ng mga pitfalls ng mga talahanayan, at pagkatapos ay walang problema ay hindi dapat lumabas.

Table bilang isang site framework

Sa HTML, mga unyon ng mga cell ay hindi palaging ginagamit para sa regular na mga talahanayan na may impormasyon (sa Word o Excel). Website designers madalas, ngunit bago ang botohan ginamit ang mga ito para sa mga layout ng site.

Halimbawa, isaalang-alang ang layout ng site. Disenyo na ito - napaka-simple at primitive. Ngunit maaari mong ipakita ang paggamit ng mga asosasyon tahasan.

Nagkaroon orihinal na ng isang talaan ng tatlong mga hilera ng dalawang mga cell sa bawat isa. Pagkatapos, ilagay ang logo ng site, ang dalawang mga cell sa unang hanay ay pinagsama. Sa kahulihan ay na gawin ang parehong upang mapaunlakan ang "basement".

Dahil sa kanilang lugar ito ay posible upang ilagay ang mga elemento ng disenyo, at walang hindi mag-iiwan ang kanyang mga limitasyon. Ito ay isang napaka-maginhawa at simple. Samakatuwid, ito ay kaya popular. Ngayon, ito ay inirerekomenda upang lumikha ng isang div tag bloke.

konklusyon

At tandaan na ang HTML table cell pagsasama, maaari mong gawin kahit anong gusto mo. Ito lahat ay depende sa kung ano ang gusto mo at kung paano mo gustong upang ayusin ito. Mahalaga, hindi makakuha ng nalilito. Kung nais mong lumikha ng isang malaking table na may isang malaking bilang ng mga asosasyon, ito ay inirerekomenda upang gumuhit ng lahat ng ito sa isang piraso ng papel o sa Paint. Imposer beginners ito ay magiging mas madali.

Kapag nakuha na karanasan, ang mga pagpapatakbong ito maaari mong isagawa sa iyong ulo madali.