Pozdravljeni, danes vam bom povedal, kako združiti celice v tabeli vodoravno in navpično v html.

Ne bomo se preveč trudili, ustvaril bom preprosto tabelo s tremi vrsticami in štirimi celicami v vsaki vrstici. Za njih so nastavljeni najpreprostejši slogi, tako da je vse prikazano pravilno.

Tabela (
border-collapse: kolaps;
}
td(
obroba: 1px polna črna;
širina: 60px;
višina: 50px;
}

Vodoravno spajanje celic

Začnimo s tem, ker je ta tehnika lažja. Recimo, da želite združiti štiri celice v eno v prvi vrstici. To lahko storite z uporabo atributa colspan:

1. Željeni celici dodelimo atribut colspan = "število celic za združitev"
2. Izbrišite vse nepotrebne celice

Na primer:

Poglej ta del kode. Ker ima prva celica v vrstici colspan 4, bo v bistvu prevzela mesto štirih celic, kar pomeni, da je treba naslednje 3 v vrstici izbrisati, zdaj preprosto niso potrebne.

Če jih ne odstranimo, se bo v vrsti oblikovalo kar 7 celic in seveda bo postala veliko širša od naslednjih dveh.

Zdaj jih izbrišemo in vidimo, da je vse prikazano popolnoma.

Združevanje navpično

To je nekoliko bolj zapleteno in se izvaja z isto tehnologijo, uporablja se samo atribut, imenovan rowspan, in morate izbrisati potrebne celice v stolpcu, ne v vrstici, zaradi česar je naloga nekoliko bolj zapletena, a v resnici vse je preprosto, če hitro razumeš bistvo.

Združimo zadnji celici v vrstici 2 in 3. Če želite to narediti, zapišite rowspan = “2” v zadnjo celico v vrstici 2. Zdaj morate izbrisati zadnjo celico v 3. vrstici. Če tega ne storite, se bodo spet pojavile dodatne celice, kar bo močno pokvarilo videz naše tabele.

Združevanje na obeh straneh

Oba atributa lahko nastavite na eno celico. Poglejmo tudi, kako deluje. Združimo prvi 2 celici vrstice 2 v eno celico in prvi dve celici vrstice 3. Skupaj bomo združili 4 celice v eno.

V tem primeru bo celica v drugi vrstici prejela oba atributa, v drugi vrstici se celica, ki ji sledi, izbriše, v tretji - prva dva.

Tako lahko ustvarite tabele katere koli zahtevnosti, o njihovem oblikovanju sem že govoril v tem članku, danes pa je bil moj cilj pokazati trik z združevanjem in upam, da mi je uspelo in ste kaj razumeli. Če imate vprašanja, jih vprašajte v komentarjih.

Trenutek vaše pozornosti: Vsi želimo svoje spletne strani gostiti na zanesljivem gostovanju. Analiziral sem na stotine gostovanj in našel najboljše - HostIQ Na internetu je o njem na stotine pozitivnih ocen, povprečna ocena uporabnikov je 4,8 od 5. Naj bodo vaša spletna mesta srečna.

Če želite združiti dve ali več celic v eno, uporabite atributa colspan in rowspan oznake . Atribut colspan nastavi število celic, ki jih je treba spojiti vodoravno. Atribut rowspan deluje podobno, z edino razliko, da zajema celice navpično. Preden dodate atribute, preverite število celic v vsaki vrstici, da se prepričate, da ni napak. Torej, nadomesti tri celice, zato mora imeti naslednja vrstica tri oznake ali oblikovanja podobno ...... . Če se število celic v vsaki vrstici ne ujema, se prikažejo prazne fantomske celice. Primer 12.3 prikazuje sicer veljavno, a nepravilno kodo, v kateri se pojavi podobna napaka.

Primer 12.3. Nepravilno združevanje celic

Celica 1		Celica 2
Celica 3	Celica 4

Rezultat tega primera je prikazan na sl. 12.5.

riž. 12.5. Videz dodatne celice v tabeli

Prva vrstica primera določa tri celice, od katerih sta dve združeni z atributom colspan, druga vrstica pa doda samo dve celici. Zaradi tega se pojavi dodatna celica, ki je prikazana v brskalniku. Jasno je vidno na sl. 12.5.

Pravilna uporaba atributov colspan in rowspan je prikazana v primeru 12.4.

Primer 12.4. Združevanje celic navpično in vodoravno

Brskalnik	internet Explorer		Opera			Firefox
	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Podprto	št	ja	št	ja	ja	ja	ja

Rezultat tega primera je prikazan na sl. 12.6.

riž. 12.6. Tabela z združenimi celicami

Ta tabela ima osem stolpcev in tri vrstice. Nekatere celice z napisi »Internet Explorer«, »Opera« in »Firefox« so ponekod združene z dvema, drugod s tremi celicami. Celica z oznako »Brskalnik« ima uporabljeno navpično spajanje.

Podrobno vam bom povedal, kako navpično in vodoravno združiti celice v tabelah.

V tem članku ne bomo razlagali načel ustvarjanja tabel HTML; če želite pridobiti to znanje, se udeležite našega tečaja HTML.

Če želite združiti celice v tabeli, sta oznaki nastavljena dva atributa to sta colspan (horizontalni spoj) in rowspan (vertikalni spoj).

Nekateri ljudje imajo težave pri uporabi teh atributov, težave pri združevanju celic.

Atributa colspan in rowspan kot parametre sprejemata celoštevilske vrednosti od 0 do 1000. Tukaj je majhen primer, kako lahko združite celice v tabeli.

Izvedena struktura na prvi pogled ni zelo zapletena, a glede na številčnost in elementov v kodi je težko razumeti, po kakšnem principu lahko združite še nekaj celic.

Ponujamo vam univerzalen in zelo priročen način združevanja celic.

Za začetek pripravite predlogo za prihodnjo tabelo in jo predstavite z ločenimi celicami. To bi lahko bila miza 3x3, 6x10 in tako naprej. Vsaki celici bomo dali svojo številko, začenši od leve proti desni in od zgoraj navzdol.

Oglejmo si ustvarjanje zgornje tabele s to metodo.

Tako bo izgledala koda za našo predlogo in sama predloga:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

Celice s številkami 1,2,3 je treba združiti vodoravno. To storite tako, da v kodo celici št. 1 dodate atribut colspan z vrednostjo 3. In izbriši elementov s številkama 2 in 3. V nastalo celico zapišemo številke združenih celic.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Sedaj moramo navpično združiti celici 9 in 13. Izvedemo podoben postopek - celici št. 9 nastavimo atribut rowspan z vrednostjo 2, izbrišemo celico št. 13, v združeno celico vpišemo številke celic, iz katerih je sestavljena.

Tako se bosta spremenila naša koda in videz tabele:

1,2,3			4
5	6	7	8
9,13	10	11	12
	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
	14	15	16

Ostaja še združiti 11,12,15,16 celic v eno. Če želite to narediti, zapišite atribute colspan ="2" rowspan ="2" v celico številka 11. Celice 12,15,16 so odstranjene iz kode. V združeno celico zapišemo števila 11,12,13,14.

Tako se bosta spremenila naša koda in videz tabele:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

To je vse, prejeli smo izvirno tabelo, zdaj lahko celice napolnimo z informacijami, ki so vam primerne.

Upamo, da razumete načelo ustvarjanja kompleksnih tabel z združevanjem celic.

Zelo priročen artikel. Z njimi lahko narediš karkoli. Seveda je glavni namen podajanje informacij v obliki tabele. Toda razvijalci spletnih strani so šli dlje. Včasih je bila uporaba tabel za izdelavo ogrodja spletnega mesta zelo priljubljena. Zdaj se strokovnjaki trudijo, da tega ne počnejo.

Tabele se pogosto uporabljajo zaradi velikega števila atributov. Lastnost združevanja vrstic ali stolpcev se je na primer izkazala za zelo uporabno.

Uvod v teorijo

V HTML se združevanje celic izvede z uporabo dveh atributov: colspan in rowspan. Določeni so za oznako td.

Najprej si oglejmo strukturo katere koli tabele, preden se poglobimo v temo. Vsaka tabela ima vrstico in v njej so celice. Ne pozabite, da morajo na začetku vse tabele vsebovati enako število celic.

Zgornja slika prikazuje dve vrstici, vsaka s tremi celicami. To je običajna miza. Če v kateri koli vrstici določite manjše število celic, se bo tabela "povesila" in vse bo prikazano napačno.

Tabela HTML: navpično in vodoravno spajanje celic

Manj celic ali vrstic lahko določite le, če nekaj združujete. Toda namesto odstranjenega elementa je treba v najbližjem sosedu na začetku podati dodaten atribut. Če združujete stolpce, potem colspan, če združujete vrstice, potem rowspan. Vrednost atributa določa število elementov, ki jih je treba združiti.

Upoštevajte, da ga morate določiti v elementu, ki je najbližje začetku. Če bi na primer na zgornji sliki želeli združiti celici 1 in 2, bi podali atribut colspan v celici 1 z vrednostjo dve. In brisanje celice številka 2 ali 3 ni več pomembno.

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

Navpično združevanje celic v tabeli HTML sledi istemu principu. Preprosto zasedeni prostor se bo štel navpično. Glej spodnjo sliko.

Tu celica s številko 43 zavzema dve vrstici. Če želite to narediti, podajte atribut rowspan. Enostavno zapomniti:

• Vrstica - niz.
• Col - stolpec/stolpec.
• Razpon - asociacija.

Ustvarjalci jezika so ga poskušali čim bolj približati človeškemu jeziku, tako da bi ga človek lahko vsaj nekako razumel tudi brez poznavanja.

V HTML je mogoče celice združiti v dveh smereh hkrati: navpično in vodoravno. Da bi to naredili, podamo oba atributa hkrati.

Na zgornji sliki je točno to označeno, da lahko naredite združevanje: vrstice, stolpci in hkrati stolpci in vrstice.

HTML: spajanje celic. Primeri

Oglejmo si bolj zapletene primere po korakih v velikih tabelah. Spodnja slika na levi prikazuje prvotno različico običajne tabele. In na desni je možnost z združevanjem dveh celic v drugi vrstici. Tako je jasnejša in lažja primerjava kode HTML.

V sredini lahko tudi združite tri celice. V prvem primeru je bil atribut colspan določen v celici št. 1. Tu bo prvi nespremenjen, drugemu pa bo dodan colspan tri.

Če želite združiti vsako posamezno celico v vrsti, potem izbrišite štiri tds in v prvem podajte colspan="5".

Kot lahko vidite, je v resnici vse to preprosto. Nič ni zapleteno. Glavna stvar je, da prvič natančno razumete vse pasti tabel in potem ne bi smelo nastati nobenih težav.

Tabele kot okvir spletnega mesta

V HTML se združevanje celic ne uporablja vedno za običajne tabele z informacijami (kot v Wordu ali Excelu). Razvijalci spletnih strani so jih pogosto in v preteklosti uporabljali za postavitev spletne strani.

Na primer, razmislite o tej maketi spletnega mesta. Ta oblika je zelo preprosta in primitivna. Toda tukaj je mogoče eksplicitno prikazati uporabo unije.

Prvotno je bila tabela treh vrstic, vsaka po dve celici. Nato sta bili dve celici v prvi vrstici združeni, da bi se prilagodil logotipu spletnega mesta. V spodnji vrstici smo naredili enako za postavitev "kleti".

Zahvaljujoč temu lahko postavite elemente oblikovanja na svoje mesto in nič ne bo šlo nikamor čez njegove meje. Je zelo priročno in preprosto. Zato je bilo tako priljubljeno. Dandanes se za ustvarjanje blokov priporoča oznaka div.

Zaključek

In ne pozabite, da lahko v tabeli HTML celice združite na poljuben način. Vse je odvisno od tega, kaj potrebujete in kako želite to urediti. Glavna stvar je, da se ne zmedete. Če želite ustvariti veliko tabelo z velikim številom spojev, je priporočljivo, da vse skupaj najprej narišete na list papirja ali v programu Paint. Lažje bo oblikovalcem postavitev začetnikom.

Ko pridobiš izkušnje, lahko takšne operacije brez težav izvajaš v svoji glavi.

Pravzaprav je zelo enostavno, če ste že ustvarili tabele HTML. Ko se naučite nekaj parametrov, se boste naučili združiti celice tabele. Za primer tabele s celicami, združenimi vodoravno in navpično, glejte na primer prejšnji članek o.

Poglejmo, kako so celice združene na primeru tabele HTML 5x5. Za ustvarjanje tabel uporabljam . Koda za tabelo 5x5, ki jo je ustvaril oblikovalec, izgleda takole:

< div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" >C1R1 < td align= "left" >C2R1 < td align= "left" >C3R1 < td align= "left" >C4R1 < td align= "left" >C5R1 < tr> < td align= "left" >C1R2 < td align= "left" >C2R2 < td align= "left" >C3R2 < td align= "left" >C4R2 < td align= "left" >C5R2 < tr> < td align= "left" >C1R3 < td align= "left" >C2R3 < td align= "left" >C3R3 < td align= "left" >C4R3 < td align= "left" >C5R3 < tr> < td align= "left" >C1R4 < td align= "left" >C2R4 < td align= "left" >C3R4 < td align= "left" >C4R4 < td align= "left" >C5R4 < tr> < td align= "left" >C1R5 < td align= "left" >C2R5 < td align= "left" >C3R5 < td align= "left" >C4R5 < td align= "left" >C5R5

Sama tabela na začetku izgleda takole:

C1R1	C2R1	C3R1	C4R1	C5R1
C1R2	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

I. Navpično spajanje celic
Za navpično spajanje celic uporabite parameter razpon vrstic, ki določa število navpično spojenih celic.
Združimo celici C1R1 in C1R2 v zgornji tabeli. Za to potrebujete:

1. Za celico C1R1 dodajte parameter rowspan=”2″:

C1R2

Sedaj je tabela videti takole:

C1R1	C2R1	C3R1	C4R1	C5R1
	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

II. Vodoravno spajanje celic
Za vodoravno spajanje celic uporabite parameter colspan, ki določa število vodoravno spojenih celic.
Združimo celice C2R1, C3R1 in C4R1 v zgornji tabeli. Za to potrebujete:

1. Za celico C2R1 dodajte parameter colspan="3":

C3R1 C4R1

Tabela bo videti takole:

C1R1	C2R1			C5R1
	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

Vse kar morate storiti je, da izpolnite tabelo z vsebino: vzorci vaših prevodov v vašem portfelju itd.