Lekcija v HTML. Spoji celice

Tabele v HTML-ju - zelo priročen element. Vse lahko narediš z njimi. Seveda, glavni namen - namestitev informacij v obliki tabele. Toda razvijalci spletnih mest so šli še dlje. Nekoč je bilo zelo priljubljeno uporabljati tabele za ustvarjanje skeleta spletnega mesta. Zdaj strokovnjaki se trudijo, da tega ne bodo storili.

Tabele se pogosto uporabljajo zaradi velikega števila atributov. Na primer, bilo je zelo koristno kombinirati vrstice ali stolpce.

Uvod v teorijo

V HTML-ju združuje celice z uporabo dveh atributov: colspan in rowspan. Določeni so za oznako td.

Začnimo s preučevanjem strukture katere koli tabele, preden se lotimo teme. V vsaki tabeli je črta, v njem pa so celice. Ne pozabite, da bi morale na začetku vse tabele vsebovati enako število celic.

Zgornja slika prikazuje dve vrstici in vsaka ima tri celice. To je normalna tabela. Če določite manjše število celic v vrsti, bo miza "go", vse bo prikazano nepravilno.

Tabela HTML: združevanje celic navpično in vodoravno

Določite lahko manj celic ali vrstic samo, če nekaj kombiniramo. Namesto izbrisanega elementa v najbližjem sosedi na začetek morate določiti dodaten atribut. Če združite stolpce, potem colspan, če vrstice, potem rowspan. Vrednost atributa določa število elementov, ki jih je treba združiti.

Upoštevajte, da morate natančno navesti v najbližjem elementu na začetku. Na primer, na zgornji sliki, če želite združiti celice 1 in 2, morate v celici 1 navesti atribut colspan z vrednostjo dveh. In izbrišite celično številko 2 ali 3, ni pomembno.

Bistvo je, da poveste celici, koliko prostora bo. Privzeta vrednost je 1.

Vključitev celic v navpično tabelo HTML je enaka. Samo zasedeni prostor velja za navpično. Oglejte si spodnjo sliko.

Tukaj celica s številko 43 zaseda dve vrstici. Če želite to narediti, ste določili atribut rowspan. Zapomni si preprosto:

• Vrstica je niz.
• Col stolpec / stolpec.
• Span - združenje.

Ustvarjalci jezika so poskušali čim bolj približati človeštvu, tako da bi vsaj, če ne bi vedeli, vsaj nekako razumeli.

V HTML je lahko kombiniranje celic opravljeno v dveh smereh: navpično in vodoravno. Če želite to narediti, istočasno določite oba atributa.

Zgoraj številka je prav to, in navedlo, da združenje lahko storite: vrstice, stolpce ali tako vrstice in stolpce.

HTML: združite celice. Primeri

Upoštevajte bolj zapletene postopne primere v velikih tabelah. Spodaj na sliki na levi je izvirna različica redne tabele. In na desni - različica z združitvijo dveh celic v drugi vrstici. Lažje je primerjati HTML kodo.

V središču lahko združite tudi tri celice. V prvem primeru je bil atribut colspan določen v celici # 1. Tukaj bo prvi nespremenjen in v drugem dodal colspan enak tri.

Če želite celice celovito združiti v eno samo, potem izbrišite štiri td in najprej navedite colspan = `5`.

Kot vidite, v resnici je vse preprosto. Nič ni zapleteno. Najpomembneje je, da previdno, od prvič, da razumejo vse pasti tabel, nato pa brez težav ne bi prišlo.

Mize kot skelet mesta

V HTML-ju se združitev celic vedno ne uporablja za navadne tabele z informacijami (kot v Wordu ali Excelu). Razvijalci spletnih mest pogosto uporabljajo in jih uporabljajo za postavitev spletnega mesta.

Na primer, si lahko ogledate postavitev spletnega mesta. Ta oblika je zelo preprosta in primitivna. Ampak tukaj lahko eksplicitno pokažete uporabo združenja.

Na začetku je bila tabela treh vrstic, dve celici v vsakem. Potem, da bi postavili logotip spletnega mesta, sta bili dve celici v prvi vrstici združeni. V spodnjem vrstnem redu so storili enako, da bi postavili "klet".

Zahvaljujoč temu lahko postavite elemente oblikovanja na svoja mesta in nič ne bo šlo kjerkoli zunaj svojih meja. To je zelo priročno in preprosto. Zato je bilo tako popularno. Zdaj priporočamo, da ustvarite blok z oznako div.

Zaključek

In ne pozabite, da lahko v tabeli HTML združite celice, kot želite. Vse je odvisno od tega, kaj potrebujete in kako želite. Glavna stvar, ne zmedite se. Če želite ustvariti veliko mizo z velikim številom društev, je priporočljivo, da se vse sestavi na papirju ali v Paint. Za začetnike bo lažje.

Ko pridobite izkušnje, lahko te operacije enostavno opravite v vaši glavi.