Kako spojiti nekoliko ćelija tablice u jednu. Spajanje ćelija. Korištenje okomito spojenih ćelija

Reći ću vam detaljno o tome kako spojiti ćelije okomito i vodoravno u tablicama.

U ovom članku nećemo objašnjavati principe stvaranje html-a tablice, da biste stekli ovo znanje, pohađajte naš tečaj o HTML-u.

Za kombiniranje ćelija unutar tablice, postoje dva atributa koji su postavljeni na oznaku to su colspan (horizontalni spoj) i rowspan (vertikalni spoj).

Neki ljudi imaju poteškoća s korištenjem ovih atributa, problema sa spajanjem ćelija.

Atributi colspan i rowspan prihvaćaju cjelobrojne vrijednosti od 0 do 1000 kao parametre. Evo malog primjera kako možete spojiti ćelije u tablici.

Na prvi pogled, implementirana struktura nije vrlo složena, ali gledajući obilje I elemenata u kodu teško je razumjeti na kojem principu možete kombinirati još par ćelija.

Nudimo vam univerzalan i vrlo prikladan način kombiniranja stanica.

Za početak pripremite predložak za svoju buduću tablicu, predstavljajući je sa svim odvojenim ćelijama. Ovo bi mogao biti stol 3x3, 6x10 i tako dalje. Svakoj ćeliji dodijelit ćemo vlastiti broj, počevši s lijeva na desno i odozgo prema dolje.

Pogledajmo izradu gore prikazane tablice pomoću ove metode.

Ovako će izgledati kod za naš predložak i sam predložak:

Potrebno je vodoravno spojiti ćelije s brojevima 1,2,3. Da biste to učinili, u kodu, ćeliji br. 1, dodajte atribut colspan s vrijednošću 3. I izbrisati elemente s brojevima 2 i 3. U dobivenu ćeliju upisujemo brojeve spojenih ćelija.

Sada trebamo okomito spojiti ćelije 9 i 13. Provodimo sličan postupak - atribut rowspan s vrijednošću 2 postavljamo na ćeliju br. 9, brišemo ćeliju br. 13, upisujemo brojeve ćelija od kojih se sastoji u spojenoj ćeliji.

Ovako će se promijeniti naš kod i izgled stolovi:

Ostaje kombinirati 11,12,15,16 ćelija u jednu. Da biste to učinili, upišite atribute colspan ="2" rowspan ="2" u ćeliju broj 11. Ćelije 12,15,16 uklanjaju se iz koda. Brojeve 11,12,13,14 upisujemo u spojenu ćeliju.

Ovako će se promijeniti naš kod i izgled tablice:

To je sve, dobili smo izvornu tablicu, sada se ćelije mogu ispuniti informacijama koje vam odgovaraju.

Nadamo se da razumijete načelo stvaranja složenih tablica sa spajanjem ćelija.

Ostaje govoriti o jednoj zanimljivoj značajci HTML jezik. Ovo je tzv spajanje stanica stolovi. Najbolji primjer za razmatranje je jednostavna tablica, čiji je HTML kod prikazan u ispisu 5.10.

Listing 5.10

Ovaj obični stol, čije su ćelije numerirane - to će nam olakšati u budućnosti. Na sl. Slika 5.2 prikazuje njegov izgled u prozoru web preglednika.

Sada pogledajmo tablicu na sl. 5.3.

Ovdje smo spojili neke ćelije. Vidi se da kombinirane stanice izgledaju kao da su se spojile u jednu. Kako to učiniti?

Posebno za ovu svrhu oznake i podržavaju dva vrlo značajna izborna atributa. Prvi - COLSPAN - kombinira ćelije vodoravno, drugi - ROWSPAN - okomito.

Riža. 5.2. Izvorna tablica čije će ćelije biti spojene

Riža. 5.3. Tablica prikazana na sl. 5.2, nakon spajanja nekih ćelija (spojene ćelije su označene dodavanjem njihovih brojeva)

Za vodoravno spajanje više ćelija u jednu, morate slijediti ove korake.

1. Pronađite u kodu HTML oznaka

Napravimo kombinirane ćelije 4 + 5 i 12 + 13 + 14 + 15 na isti način.

Spajanje ćelija okomito malo je teže. Evo koraka koje morate slijediti da biste to učinili.

1. Pronađite u kodu HTML niz(oznaka), koja sadrži prvu ćeliju koju treba spojiti (ako retke brojite odozgo prema dolje).

2. Pronađite oznaku u kodu ovog retka

Primijetite da smo uklonili oznaku koja je stvorila šestu ćeliju iz drugog retka jer se spojila s prvom ćelijom.

Spajanje ćelija danas se ne koristi često. Međutim, ranije, tijekom vrhunca tabličnog web dizajna (za tablični web dizajn, pogledajte poglavlje 10), bilo je teško pronaći tablicu bez spojenih ćelija. Na ovaj ili onaj način, ne škodi znati nešto o njemu.

Da biste spojili dvije ili više ćelija u jednu, koristite atribute colspan i rowspan oznake . Atribut colspan postavlja broj ćelija koje se vodoravno spajaju. Atribut rowspan radi slično, s jedinom razlikom što obuhvaća ćelije okomito. Prije dodavanja atributa provjerite broj ćelija u svakom retku kako biste bili sigurni da nema pogrešaka. Tako, zamjenjuje tri ćelije, tako da sljedeći redak treba imati tri oznake ili poput dizajna ...... . Ako broj ćelija u svakom retku ne odgovara, pojavit će se prazne fantomske ćelije. Primjer 12.3 pokazuje, iako valjan, ali netočan kod, u kojem se pojavljuje slična greška.

Primjer 12.3. Netočno spajanje ćelija

Proizlaziti ovaj primjer prikazano na sl. 12.5.

Riža. 12.5. Izgled dodatne ćelije u tablici

Prvi redak primjera navodi tri ćelije, od kojih su dvije kombinirane pomoću atributa colspan, ali drugi redak dodaje samo dvije ćelije. Zbog toga se pojavljuje dodatna ćelija koja se prikazuje u pregledniku. Jasno je vidljivo na Sl. 12.5.

Ispravna upotreba atributa colspan i rowspan prikazana je u primjeru 12.4.

Primjer 12.4. Spajanje ćelija okomito i vodoravno

Rezultat ovog primjera prikazan je na sl. 12.6.

Riža. 12.6. Tablica sa spojenim ćelijama

Ova tablica ima osam stupaca i tri reda. Neke od ćelija s natpisima “Internet Explorer”, “Opera” i “Firefox” kombinirane su negdje s dvije, a negdje s tri ćelije. Na ćeliju s oznakom "Preglednik" primijenjeno je okomito spajanje.

Pozdrav, danas ću vam reći kako spojiti ćelije u tablici vodoravno i okomito u html-u.

Nećemo se previše mučiti, napravit ću jednostavnu tablicu s tri retka i četiri ćelije u svakom retku. Za njih su postavljeni najjednostavniji stilovi kako bi se sve ispravno prikazalo.

Stol(
border-collapse: kolaps;
}
td(
obrub: 1px puna crna;
širina: 60px;
visina: 50px;
}

Vodoravno spajanje ćelija

Počnimo s ovom jer je ova tehnika lakša. Recimo da želite spojiti četiri ćelije u jednu u prvom redu. To se može učiniti pomoću atributa colspan:

1. Željenoj ćeliji dodijelimo atribut colspan = "broj ćelija za spajanje"
2. Izbrišite sve nepotrebne ćelije

Na primjer:

Pogledajte ovaj dio koda. Budući da prva ćelija u retku ima colspan 4, ona će u biti zauzeti mjesto četiri ćelije, što znači da sljedeće 3 u retku treba izbrisati, jednostavno sada nisu potrebne.

Ako se ne uklone, tada će se u nizu formirati čak 7 stanica i, naravno, postat će mnogo širi od sljedeće dvije.

Sada ih brišemo i vidimo da je sve savršeno prikazano.

Spajanje okomito

Ovo je malo kompliciranije i provodi se istom tehnologijom, samo se koristi atribut koji se zove rowspan i trebate izbrisati potrebne ćelije u stupcu, a ne retku, što zadatak čini malo kompliciranijim, ali zapravo sve je jednostavno ako brzo shvatite bit.

Kombinirajmo posljednje ćelije u retku 2 i 3. Da biste to učinili, napišite rowspan = “2” u posljednju ćeliju u retku 2. Sada morate izbrisati zadnju ćeliju u retku 3. Ako to ne učinite, opet će se pojaviti dodatne ćelije koje će uvelike pokvariti izgled naše tablice.

Ujedinjujući se s obje strane

Oba atributa možete postaviti u jednu ćeliju. Pogledajmo i kako radi. Spojimo prve 2 ćelije retka 2 u jednu ćeliju i prve dvije ćelije retka 3. Ukupno ćemo spojiti 4 ćelije u jednu.

U ovom slučaju, ćelija u drugom retku će dobiti oba ova atributa, u drugom redu ćelija koja slijedi je izbrisana, u trećem - prva dva.

Dakle, možete kreirati tablice bilo koje složenosti, o njihovom dizajnu već sam govorio malo u ovom članku, ali danas mi je cilj bio pokazati vam trik sa spajanjem i nadam se da sam uspio i da ste nešto razumjeli. Ako imate pitanja, pitajte u komentarima.

Trenutak vaše pažnje: Svi želimo naše web stranice smjestiti na pouzdan hosting. Analizirao sam stotine hostinga i pronašao najbolje - HostIQ Ima ih na stotine online Pozitivna ocjena o tome, prosječna korisnička ocjena je 4,8 od 5. Neka vaše stranice budu dobre.

Tablice u HTML-u imaju dvije funkcije. Prvi su same tablice, odnosno prikaz informacija u obliku tablice. A drugi je raspored stranica. Pojedini dijelovi sadržaja smješteni su u različite ćelije tablice i tako završavaju na pravom mjestu na stranici.

Izrada tablice

Pogledajmo kako stvoriti tablicu u HTML-u. To se radi pomoću oznake