HTML lekcija. Spajanje ćelija. Spoji ćelije Spoji ćelije tablice css
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
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
Nudimo vam univerzalni i vrlo prikladan način spajanje 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:
| 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 |
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
| 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 |
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:
| 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 | |
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:
| 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 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.
stolovi Najbolji način da to pogledate je pomoću jednostavne tablice, čiji je HTML kod prikazan u ispisu 5.10.
Ovo je obična tablica č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
Za vodoravno spajanje više ćelija u jednu, morate slijediti ove korake.
1. Pronađite u kodu HTML oznaka (
2. Unesite atribut COLSPAN u njega i dodijelite mu broj ćelija koje želite spojiti, računajući prvu.
3. Uklonite oznake (
Spojimo ćelije 2 i 3 tablice (vidi ispis 5.10). Ispravljeni isječak koda koji stvara prvi redak ove tablice prikazan je u ispisu 5.11.
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 (
3. U njega unesite atribut ROWSPAN i dodijelite mu količinu spojene ćelije, uključujući i prvu od njih.
4. Pregledajte sljedeće retke i uklonite oznake s njih (
Ostalo nam je spajanje ćelija 1 i 6 naše tablice. Ispis 5.12 sadrži ispravljeni fragment svog HTML koda (ispravci utječu na prvi i drugi redak).
Primijetite da smo uklonili oznaku koja je stvorila šestu ćeliju iz drugog retka jer se spojila s prvom ćelijom.
Danas se ne koristi često. Međutim, ranije, tijekom vrhunca tabličnog web dizajna, bilo je teško pronaći tablicu bez spojene ćelije. Na ovaj ili onaj način, ne škodi znati nešto o njemu.
Kada stvarate tablice u HTML-u, ponekad morate vodoravno spojiti ćelije.
U HTML tablici svaka je ćelija razgraničena skupom oznaka
Da biste spojili ćelije u HTML-u, morate dodati manje ćelija u red nego u druge retke i dodati atribut colspan=" " unutar oznake
Pogledajmo jednostavan primjer HTML tablice s dva retka i dva stupca (četiri ćelije). Njegov HTML kôd izgleda ovako:
| sadržaj | sadržaj |
| sadržaj | sadržaj |
| sadržaj | |
| sadržaj | sadržaj |
Ćelija u gornjem retku sada se proteže kroz dva stupca. Budući da zauzima prostor od dvije ćelije, u prvom retku postoji samo jedan td element.
Možete spojiti ćelije HTML tablice u bilo kojem području s bilo kojim brojem stupaca. Jedna od najkorisnijih upotreba horizontalnog spajanja ćelija je stvaranje zaglavlja tablice. Ako tablica ima n stupaca, postavite atribut colspan="n" u prvu ćeliju gornjeg retka i uklonite ostale ćelije iz tog retka.
Kako okomito spojiti ćelije u HTML tablici: rowspan
Atribut rowspan="" omogućuje vertikalno spajanje ćelija
Ako želite da ćelija obuhvaća više redaka, trebali biste dodati atribut rowspan=" " unutar oznake
Pogledajmo jednostavan primjer HTML tablice s četiri ćelije podijeljene u dva retka i dva stupca. HTML kôd:
| sadržaj | sadržaj |
| sadržaj | sadržaj |
Za okomito spajanje ćelija u HTML tablici, dodajte atribut rowspan="2" u prvu ćeliju u gornjem redu, a zatim izbrišite jednu od ćelija u donjem redu. HTML kod će sada izgledati ovako:
| stvari | sadržaj |
| sadržaj |
Možete kombinirati vodoravno i okomito spajanje ćelija u jednoj tablici, kao što je prikazano na slici lijevo. Jedna ćelija može obuhvaćati više redaka i stupaca, kao što je prikazano na slici desno. HTML kôd za svaku tablicu je ispod:
Načini kombiniranja rowspan i colspan za stvaranje prilagođenih HTML tablica s ćelijama koje obuhvaćaju više redaka i stupaca
| rasponu od 3 reda | raspon 3 stupca | ||
| H | T | raspon 2 reda | |
| M | L | ||
| raspon 4 stupca | |||
| obuhvaćaju 2 retka i 2 stupca | T | |
| A | ||
| E | L | B |
Korištenje okomito spojenih ćelija
Spajanje HTML ćelija okomito u jedan stupac može se koristiti kada želite stvoriti naslov za grupu redaka uz taj stupac. Također može pomoći pri odvajanju grupa nizova prema vrsti.
Kada podatke na web stranici predstavljate u tabelarnom formatu, što ih bolje organizirate u podskupine, to će ih biti više lakši za korisnike analizirati i obraditi te podatke. Razdjelnici prostora pomažu nam da učinkovitije analiziramo stvari. Također možete kodirati stupce bojama kako biste ih još lakše vizualno identificirali:
Prijevod članaka « Kako vodoravno kombinirati ćelije u HTML tablici Colspan», « Kako okomito kombinirati ćelije u HTML tablici: raspon redaka» pripremio je prijateljski projektni tim
Pozdrav, danas ću vam reći kako spojiti ćelije u tablici vodoravno i okomito u html-u.
Nećemo se previše mučiti, ja ću stvarati jednostavan stol od tri reda i četiri ćelije u svakom redu. 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:
- Željenoj ćeliji dodijelimo atribut colspan = "broj ćelija za spajanje"
- 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 Na internetu postoje stotine pozitivnih recenzija o njemu, prosječna ocjena korisnika je 4,8 od 5. Neka su vaše stranice sretne.
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
Ovo je obična tablica č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
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 oznaku u HTML kodu
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 redak (oznaku) u HTML kodu koji 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.