Lecție HTML. Unirea celulelor. Merge cells Fusionează celulele tabelului css
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ă
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
Vă oferim un universal și foarte mod convenabil fuzionarea celulelor.
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:
| 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 |
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
| 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 |
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:
| 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 | |
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:
| 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 | |||
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.
Mese Cel mai bun mod de a vedea acest lucru este cu un tabel simplu, al cărui cod HTML este afișat în Listarea 5.10.
Acesta este un tabel obișnuit, ale cărui celule sunt numerotate - acest lucru ne va ușura în 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
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 (
2. Introduceți atributul COLSPAN în el și atribuiți-i numărul de celule care trebuie îmbinate, numărând chiar prima.
3. Eliminați etichetele (
Să îmbinăm celulele 2 și 3 din tabel (vezi Lista 5.10). Fragmentul de cod corectat care creează primul rând al acestui tabel este afișat în Lista 5.11.
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 (
3. Introduceți atributul ROWSPAN în el și atribuiți-i o cantitate celule îmbinate, inclusiv primul dintre ei.
4. Vizualizați liniile ulterioare și eliminați etichetele din ele (
Am plecat uneste celulele 1 și 6 din tabelul nostru. Lista 5.12 conține fragmentul corectat al codului său HTML (corecțiile afectează prima și a doua linie).
Observați că am eliminat eticheta care a creat a șasea celulă din al doilea rând, deoarece a fuzionat cu prima celulă.
În zilele noastre nu este folosit foarte des. Cu toate acestea, mai devreme, în perioada de glorie a designului web tabular, era dificil să găsești o masă fără celule îmbinate. Într-un fel sau altul, nu strica să știi despre el.
Când creați tabele în HTML, uneori trebuie să îmbinați celulele pe orizontală.
Într-un tabel HTML, fiecare celulă este delimitată de un set de etichete
Pentru a îmbina celulele în HTML, trebuie să adăugați mai puține celule la un rând decât la alte rânduri și să adăugați atributul colspan=" " în interiorul etichetei
Să ne uităm la un exemplu simplu de tabel HTML cu două rânduri și două coloane (patru celule). Codul său HTML arată astfel:
| conţinut | conţinut |
| conţinut | conţinut |
| conţinut | |
| conţinut | conţinut |
Celula din rândul de sus se întinde acum pe două coloane. Deoarece ocupă spațiul a două celule, există un singur element td în primul rând.
Puteți îmbina celulele Tabelele HTMLîn orice zonă cu orice număr de coloane. Una dintre cele mai utile utilizări ale îmbinării celulelor pe orizontală este crearea antetelor de tabel. Dacă tabelul are n coloane, plasați un atribut colspan="n" în prima celulă a rândului de sus și eliminați celelalte celule din acel rând.
Cum să îmbinați celulele vertical într-un tabel HTML: rowspan
Atributul rowspan="" vă permite să îmbinați celulele pe verticală
Dacă doriți ca o celulă să se întinde pe mai multe rânduri, ar trebui să adăugați atributul rowspan=" " în interiorul etichetei
Să ne uităm la un exemplu simplu de tabel HTML cu patru celule împărțite în două rânduri și două coloane. Cod HTML:
| conţinut | conţinut |
| conţinut | conţinut |
Pentru a îmbina celulele vertical într-un tabel HTML, adăugați atributul rowspan="2" la prima celulă din rândul de sus, apoi ștergeți una dintre celulele din rândul de jos. Codul HTML va arăta acum astfel:
| chestie | conţinut |
| conţinut |
Puteți combina îmbinarea orizontală și verticală a celulelor într-un singur tabel, așa cum se arată în imaginea din stânga. O singură celulă poate cuprinde chiar mai multe rânduri și coloane, așa cum se arată în imaginea din dreapta. Codul HTML pentru fiecare tabel este mai jos:
Modalități de a combina rowspan și colspan pentru a crea tabele HTML personalizate cu celule care se întind pe mai multe rânduri și coloane
| se întinde pe 3 rânduri | cuprinde 3 coloane | ||
| H | T | se întinde pe 2 rânduri | |
| M | L | ||
| cuprinde 4 coloane | |||
| cuprinde 2 rânduri și 2 coloane | T | |
| A | ||
| E | L | B |
Folosind celule îmbinate vertical
Îmbinarea celulelor HTML pe verticală într-o singură coloană poate fi utilizată atunci când doriți să creați un titlu pentru un grup de rânduri adiacent acelei coloane. De asemenea, poate ajuta la separarea grupurilor de șiruri după tip.
Când prezentați datele pe un site web în format tabelar, cu cât organizați mai bine datele în subgrupuri, cu atât mai mult mai usor pentru utilizatori analizați și procesați aceste date. Divizoarele de spațiu ne ajută să analizăm lucrurile mai eficient. De asemenea, puteți codifica coloanele cu culori pentru a le face și mai ușor de identificat vizual:
Traducerea articolelor « Cum să combinați celulele orizontal într-un tabel HTML Colspan», « Cum să combinați celulele pe verticală într-un tabel HTML: Rowspan» a fost pregătit de echipa prietenoasă de proiect
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 o masă simplă de 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:
- Atribuim atributul colspan = celulei dorite „numărul de celule de îmbinat”
- Ș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 sarcina 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 Există sute de recenzii pozitive despre el pe Internet, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie fericite.
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
Acesta este un tabel obișnuit, ale cărui celule sunt numerotate - acest lucru ne va ușura în 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
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 eticheta în codul 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 linia (eticheta) din codul HTML care conține prima dintre celulele care urmează să fie îmbinate (dacă numărați liniile 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.