Cum să combinați mai multe celule de tabel într-una singură. Fuzionarea celulelor. Folosind celule îmbinate vertical

Vă voi spune în detaliu despre cum să îmbinați celulele pe verticală și pe orizontală în tabele.

În acest articol nu vom explica principiile crearea html tabele, pentru a dobândi aceste cunoștințe, urmați cursul nostru despre HTML.

Pentru a combina celule în interiorul tabelului, există două atribute care sunt setate pentru etichetă acestea sunt colspan (unire orizontală) și rowspan (unire verticală).

Unii oameni au dificultăți în utilizarea acestor atribute, probleme cu îmbinarea celulelor.

Atributele colspan și rowspan acceptă ca parametri valori întregi de la 0 la 1000. Iată un mic exemplu despre cum puteți îmbina celulele într-un tabel.

La prima vedere, structura implementată nu este foarte complexă, dar privind abundența Și elemente din cod este greu de înțeles pe ce principiu puteți combina câteva celule mai multe.

Vă oferim o modalitate universală și foarte convenabilă de a combina celule.

Pentru început, pregătiți un șablon pentru tabelul viitor, prezentându-l cu toate celulele separate. Aceasta ar putea fi o masă 3x3, 6x10și așa mai departe. Vom da fiecărei celule propriul număr, începând de la stânga la dreapta și de sus în jos.

Să ne uităm la crearea tabelului prezentat mai sus folosind această metodă.

Iată cum vor arăta codul pentru șablonul nostru și șablonul în sine:

Este necesar să îmbinați celulele cu numerele 1,2,3 pe orizontală. Pentru a face acest lucru, în cod, celula nr. 1, adăugați atributul colspan cu valoarea 3. Și șterge elemente cu numerele 2 și 3. Scriem numerele celulelor combinate în celula rezultată.

Acum trebuie să îmbinam celulele 9 și 13 pe verticală. Efectuăm o procedură similară - setați atributul rowspan cu valoarea 2 la celula nr. 9, ștergeți celula nr. 13, scrieți numerele celulelor din care constă în celula îmbinată.

Acesta este modul în care codul nostru se va schimba și aspect Mese:

Rămâne să combinați 11,12,15,16 celule într-una singură. Pentru a face acest lucru, scrieți atributele colspan ="2" rowspan ="2" în celula numărul 11. Celulele 12,15,16 sunt eliminate din cod. Scriem numerele 11,12,13,14 în celula combinată.

Iată cum se vor schimba codul nostru și aspectul tabelului:

Asta e tot, am primit tabelul original, acum celulele pot fi completate cu informațiile care vă sunt convenabile.

Sperăm că înțelegeți principiul creării de tabele complexe cu unirea celulelor.

Rămâne să vorbim despre o caracteristică interesantă limbaj HTML. Acesta este așa-numitul fuzionarea celulelor Mese. Cel mai bun exemplu de luat în considerare este un tabel simplu, al cărui cod HTML este prezentat în Listarea 5.10.

Lista 5.10

Acest masa obisnuita, ale căror celule sunt numerotate - acest lucru ne va ușura pe viitor. În fig. Figura 5.2 arată aspectul său într-o fereastră de browser Web.

Acum să ne uităm la tabelul din fig. 5.3.

Aici am îmbinat câteva celule. Se poate observa că celulele combinate par să fi fuzionat într-una singură. Cum să o facă?

Mai ales în acest scop etichete și acceptă două atribute opționale foarte notabile. Primul - COLSPAN - combină celulele pe orizontală, al doilea - ROWSPAN - pe verticală.

Orez. 5.2. Tabelul original ale cărui celule vor fi îmbinate

Orez. 5.3. Tabelul prezentat în Fig. 5.2, după îmbinarea unor celule (celulele îmbinate sunt indicate prin adăugarea numerelor lor)

Pentru a îmbina mai multe celule pe orizontală într-una singură, trebuie să urmați acești pași.

1. Găsiți în cod Etichetă HTML

Să creăm celulele combinate 4 + 5 și 12 + 13 + 14 + 15 în același mod.

Îmbinarea celulelor pe verticală este puțin mai dificilă. Iată pașii pe care trebuie să-i urmezi pentru a face acest lucru.

1. Găsiți în cod șir HTML(etichetă), care conține prima celulă care trebuie îmbinată (dacă numărați rândurile de sus în jos).

2. Găsiți eticheta în codul acestei linii

Observați că am eliminat eticheta care a creat a șasea celulă din al doilea rând, deoarece a fuzionat cu prima celulă.

Îmbinarea celulelor nu este folosită foarte des în zilele noastre. Cu toate acestea, mai devreme, în perioada de glorie a designului web tabelar (pentru designul web tabelar, vezi Capitolul 10), a fost dificil să găsești un tabel fără celule îmbinate. Într-un fel sau altul, nu strica să știi despre asta.

Pentru a combina două sau mai multe celule într-una singură, utilizați atributele colspan și rowspan ale etichetei . Atributul colspan stabilește numărul de celule care trebuie îmbinate pe orizontală. Atributul rowspan funcționează în mod similar, singura diferență fiind că se întinde pe celule pe verticală. Înainte de a adăuga atribute, verificați numărul de celule din fiecare rând pentru a vă asigura că nu există erori. Asa de, înlocuiește trei celule, astfel încât următoarea linie ar trebui să aibă trei etichete sau design ca ...... . Dacă numărul de celule din fiecare rând nu se potrivește, vor apărea celule fantomă goale. Exemplul 12.3 arată, deși valid, dar incorect cod, în care apare o eroare similară.

Exemplul 12.3. Îmbinare incorectă a celulelor

Rezultat acest exemplu prezentat în Fig. 12.5.

Orez. 12.5. Apariția unei celule suplimentare în tabel

Prima linie a exemplului specifică trei celule, două dintre ele sunt combinate folosind atributul colspan, dar a doua linie adaugă doar două celule. Din acest motiv, apare o celulă suplimentară care este afișată în browser. Este clar vizibil în fig. 12.5.

Utilizarea corectă a atributelor colspan și rowspan este demonstrată în Exemplul 12.4.

Exemplul 12.4. Îmbinarea celulelor pe verticală și pe orizontală

Rezultatul acestui exemplu este prezentat în Fig. 12.6.

Orez. 12.6. Tabel cu celule îmbinate

Acest tabel are opt coloane și trei rânduri. Unele dintre celulele cu inscripțiile „Internet Explorer”, „Opera” și „Firefox” sunt combinate în unele locuri cu două, iar în altele cu trei celule. Celula etichetată „Browser” are aplicată o îmbinare verticală.

Bună ziua, astăzi vă voi spune cum să îmbinați celulele într-un tabel orizontal și vertical în html.

Nu ne vom deranja prea mult, voi crea un tabel simplu cu trei rânduri și patru celule pe fiecare rând. Cele mai simple stiluri sunt setate pentru ei, astfel încât totul să fie afișat corect.

Masa(
border-colaps: colaps;
}
td(
chenar: 1px negru solid;
latime: 60px;
înălțime: 50px;
}

Îmbinarea celulelor pe orizontală

Să începem cu aceasta pentru că această tehnică este mai ușoară. Să presupunem că doriți să combinați patru celule într-una singură pe primul rând. Acest lucru se poate face folosind atributul colspan:

1. Atribuim atributul colspan = celulei dorite „numărul de celule de îmbinat”
2. Ștergeți toate celulele inutile

De exemplu:

Uită-te la această bucată de cod. Deoarece prima celulă din rând are un colspan de 4, va lua în esență locul patru celule, ceea ce înseamnă că următoarele 3 din rând trebuie șterse, pur și simplu nu sunt necesare acum.

Dacă nu sunt îndepărtate, atunci se vor forma până la 7 celule pe rând și, desigur, va deveni mult mai lată decât următoarele două.

Acum le ștergem și vedem că totul este afișat perfect.

Fuzionarea pe verticală

Acest lucru este puțin mai complicat și se realizează folosind aceeași tehnologie, este folosit doar un atribut numit rowspan și trebuie să ștergeți celulele necesare într-o coloană, nu într-un rând, ceea ce face ca sarcina să fie puțin mai complicată, dar de fapt totul este simplu dacă înțelegi rapid esența.

Să combinăm ultimele celule din rândul 2 și 3. Pentru a face acest lucru, scrieți rowspan = „2” în ultima celulă din rândul 2. Acum trebuie să ștergeți ultima celulă din rândul 3. Dacă nu faceți acest lucru, atunci din nou vor apărea celule suplimentare, ceea ce va strica foarte mult aspectul tabelului nostru.

Unirea de ambele părți

Puteți seta ambele atribute la o singură celulă. Să vedem și cum funcționează. Să combinăm primele 2 celule din rândul 2 într-o singură celulă și primele două celule din rândul 3. În total, vom combina 4 celule într-una singură.

În acest caz, celula din al doilea rând va primi ambele atribute, în al doilea rând celula care o urmează este ștearsă, în al treilea - primele două.

Astfel, puteți crea tabele de orice complexitate, deja am vorbit puțin despre designul lor în acest articol, dar astăzi scopul meu a fost să vă arăt un truc cu alăturarea și sper că am reușit și ați înțeles ceva. Dacă aveți întrebări, întrebați în comentarii.

Un moment al atentiei tale: Cu toții dorim să ne găzduim site-urile web pe găzduire de încredere. Am analizat sute de găzduiri și am găsit cele mai bune - HostIQ Sunt sute online feedback pozitiv despre asta, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie bine.

Tabelele în HTML au două funcții. Primul este tabelele în sine, adică afișarea informațiilor sub forma unui tabel. Iar al doilea este aspectul paginilor. Părțile individuale ale conținutului sunt plasate în celule diferite ale tabelului și ajung astfel în locul potrivit pe pagină.

Crearea unui tabel

Să vedem cum să creați un tabel în HTML. Acest lucru se face folosind eticheta