Pamoka apie HTML. sujungti ląsteles

Į HTML stalai - labai patogu elementą. Su jais jūs galite padaryti bet ką. Žinoma, pagrindinis tikslas - pateikti informaciją stalo. Bet svetainių kūrėjai toliau. Vienu metu jis buvo labai populiarus naudoti lentelę sukurti svetainės struktūrą. Dabar specialistai bando to nedaryti.

Stalai surado savo platų taikymą dėl didelio skaičiaus atributus. Pavyzdžiui, labai naudinga savybė pasuko derinant eilutes arba stulpelius.

Įvadas į teorijos

HTML, ląstelių sąjunga įvyksta naudojant du atributus: COLSPAN ir rowspan. Jie nurodyta už TD žyma.

Leiskite mums pirmiausia analizuoti kiekvienos lentelės struktūrą, kol mes pasinerti į temą. Kiekvienoje lentelėje yra eilutė, o jame - ląstelių. Atminkite, kad iš pradžių, visi stalai turi būti pateikta tuo pačiu celių skaičiumi.

Pirmiau minėta dviem eilėmis ir kiekvieną iš trijų ląstelių skaičius. Tai yra bendras stalas. Jei esate bet įrašykite mažesnį skaičių ląstelių, lentelė "išeiti", visos nebus rodomas teisingai.

HTML lentelė: sujungti ląsteles vertikaliai ir horizontaliai

Norėdami nurodyti mažesnio ląstelių skaičius ar stygos gali būti naudojamas tik tada, jei turite kažką sujungti. Bet vietoj ištrintas elemento artimiausio kaimyno į viršų reikia nurodyti papildomą atributą. Jei jūs derinti kolonėles, tada COLSPAN, jei stygos, tada rowspan. Iš atributas vertė rodo elementus, kuriuos norite sujungti skaičių.

Atkreipkite dėmesį, kad reikia nurodyti jį į artimiausią elementą į viršų. Pavyzdžiui, virš figūra, jei norite sujungti į ląstelę 1 ir 2, reikia nurodyti į mobilųjį 1 COLSPAN atributą su vertės dviejų. Ir ištrinti pozicijos numerį 2 arba 3, tai nesvarbu.

Esmė yra ta, kad jūs pasakyti ląstelę, kiek vietos ji užims. Numatytoji reikšmė yra 1.

Sulieti langelius vertikaliai HTML lentelė vyksta tuo pačiu principu. Tiesiog okupuota erdvė bus laikomas vertikaliai. Žiūrėti išsiaiškinti žemiau.

Čia ląstelė su numeriu 43 trunka dvi eilutes. Norėdami tai padaryti, galite nurodyti atributą rowspan. Tiesiog prisiminiau:

• Eilutė - eilutės.
• COL - kolonėlės / kolonėlė.
• Apimtis - asociacija.

Kūrėjai bandė pareikšti kalbą kaip įmanoma žmogaus, kad net nežinant, galėtų kažkaip suprasti.

HTML, ląstelių sąjunga gali būti daroma dviem kryptimis: vertikaliai ir horizontaliai. Norėdami tai padaryti, mes nurodyti tiek atributas.

virš skaičius yra tiesiog, kad ir pareiškė, kad asociacija gali padaryti: eilutės, stulpeliai, arba abu eilučių ir stulpelių.

HTML: sujungti ląsteles. pavyzdžiai

Panagrinėkime sudėtingesnę pavyzdžiai Milestone didelių lentelių. Žemiau kairėje Nustatyti pradinę versiją reguliariai stalo. Teisė - variantas su dviejų ląstelių deriniu antroje eilėje. Taigi aiškiau ir lengviau palyginti HTML kodą.

Jūs taip pat galite sujungti tris iš ląstelės centre. Pirmuoju atveju colspan atributas nurodo langelį №1. Čia pirmas bus nepakitusi, o antrasis įtraukta į COLSPAN, lygi trijų.

Jei norite sujungti visas ląsteles iš eilės vienas, tada pašalinti keturi td pirmoje rodo COLSPAN = "5".

Kaip matote, iš tikrųjų, viskas yra paprasta. Nieko sudėtinga. Svarbiausia, kad atsargiai, iš pirmo karto suprasti visus lentelėse spąstų, tada jokių problemų neturėtų kilti.

Stalo kaip svetainės sistemą

HTML, ląstelių sąjunga ne visada naudojamas reguliariai lentelių su informacija (Word arba Excel). Interneto svetainė dizaineriai dažnai, bet prieš Apklausos naudojo juos svetainių išdėstymo.

Pavyzdžiui, mano svetainės maketą. Šis projektas - labai paprastas ir primityvus. Bet jūs galite parodyti asociacijos naudojimo aiškiai.

Yra pradžių buvo trimis eilėmis dviejų ląstelių kiekvienos lentelės. Tada dėti į svetainę logotipas, du ląstelių pirmoje eilėje buvo sujungtos. Esmė yra ta, kad daryti tą patį, kad tilptų "rūsyje".

Dėl savo vietoje tai galima dėti dizaino elementų, ir nieko nepaliks savo ribas. Tai labai patogu ir paprasta. Todėl jis buvo toks populiarus. Dabar, rekomenduojama sukurti div tegus blokus.

išvada

Ir atminkite, kad HTML lentelės ląstelių susiliejimas, galite daryti ką norite. Viskas priklauso nuo to, ką norite ir kaip norite organizuoti ją. Svarbu tai, kad nereikia susipainioti. Jei norite sukurti didelę lentelę su daug asociacijų, rekomenduojama atkreipti visa tai ant popieriaus lapo arba dažais. Imposer pradedantiesiems bus lengviau.

Kai pelnas patirtis, šios operacijos galite atlikti savo galvą lengvai.