Tabelul HTML combinând celulele. Lecția HTML. Combinarea celulelor. Cum să găsiți celule combinate în Excel

Pentru a combina două și mai multe celule într-o singură utilizare a atributelor de etichete colspan și rowowpan . Atributul Colspan stabilește numărul de celule orizontale. Atributul Rowspan funcționează probabil, cu singura diferență care combină celulele pe verticală. Înainte de a adăuga atribute, verificați numărul de celule din fiecare rând, astfel încât să apară erori. Asa de, Înlocuiește trei celule, astfel încât în \u200b\u200blinia următoare ar trebui să existe trei etichete sau design de tip ...... . Dacă numărul celulelor din fiecare rând nu se potrivește, vor apărea celulele fantomă goale. În exemplul 12.3, deși codul valabil, dar incorect în care această eroare este manifestată.

Exemplul 12.3. Asociația nevalidă a celulelor

Cell 1.		Celula 2.
Celula 3.	Celula 4.

Rezultat acest exemplu prezentat în fig. 12.5.

Smochin. 12.5. Aspectul unei celule suplimentare în tabel

În prima linie a exemplului, sunt specificate trei celule, două dintre ele sunt combinate utilizând atributul Colspan și numai două celule sunt adăugate în a doua linie. 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. Combinarea celulelor pe verticală și orizontală

Browser.	Internet Explorer.		Operă.			Firefox.
	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Sprijinit	Nu	da	Nu	da	da	da	da

Rezultatul acestui exemplu este prezentat în fig. 12.6.

Smochin. 12.6. Tabel cu celule combinate

Acest tabel are opt coloane și trei linii. O parte din celulele cu inscripții "Internet Explorer", "Opera" și "Firefox" sunt combinate în cazul în care două și unde și trei celule. În celulă cu inscripția "Browser", a fost aplicată o uniune pe verticală.

Un element foarte convenabil. Puteți face orice cu ei. Desigur, scopul principal este de a plasa informații sub forma unui tabel. Dar dezvoltatorii de site-uri au mers mai departe. La un moment dat a fost foarte popular să folosiți mese pentru a crea un cadru al site-ului. Acum, profesioniștii încearcă să nu facă acest lucru.

Tabelele și-au găsit utilizarea pe scară largă din cauza un numar mare Atribute. De exemplu, a fost foarte util să combinați rândul sau coloanele.

Introducere în teorie

În HTML, Asociația celulelor are loc cu două atribute: Colspan și Rowowpan. Acestea sunt indicate pentru eticheta TD.

Să analizăm mai întâi structura oricărei mese înainte de a se aprofunda în subiect. În orice tabel există un șir și în celulele IT. Amintiți-vă că inițial toate tabelele trebuie să conțină același număr de celule.

Figura de mai sus prezintă două linii și în fiecare trei celule. Aceasta este o masă obișnuită. Dacă vă aflați într-o anumită linie, specificați un număr mai mic de celule, apoi tabelul "va fi menționat", totul va fi afișat incorect.

Tabelul HTML: asocierea celulelor pe verticală și orizontală

Puteți specifica un număr mai mic de celule sau șiruri de caractere în cazul în care combinați ceva. Dar, în loc de un element de la distanță, în apropierea de lângă început, trebuie să specificați un atribut suplimentar. Dacă combinați coloanele, atunci Colspan, dacă rânduri, apoi Rowspan. Valoarea atributului indică numărul de elemente care trebuie combinate.

Vă rugăm să rețineți că trebuie să specificați în cel mai apropiat element la început. De exemplu, în figura de mai sus, dacă doriți să combinați celula 1 și 2, trebuie să specificați în atributul Celula 1 Colspan cu cele două valori. Și eliminați numărul celular 2 sau 3, nu mai contează.

Esența este că specificați celula, cât spațiu va dura. Valoarea implicită este de 1.

Combinarea celulelor de pe tabelul HTML Vertical are loc în același principiu. Doar spațiul ocupat va fi considerat vertical. Ne uităm la desenul de mai jos.

Aici celula cu un număr 43 ia două linii. Pentru a face acest lucru, a indicat atributul Rowspan. Memorabil pur și simplu:

• Rând - șir.
• Coloană / coloană.
• Span - asociere.

Creatorii limbii au încercat să-l aducă cât mai aproape de om, astfel încât nici măcar să nu-l cunoască, a fost posibil să înțeleagă cumva.

În HTML, asocierea celulelor se poate face imediat în două direcții: vertical și orizontal. Pentru a face acest lucru, specificați ambele atribute în același timp.

În figura de mai sus, se indică, de asemenea, că puteți face o fuziune: corzi, coloane și ambele coloane și rânduri.

HTML: Asocierea celulelor. Exemple

Luați în considerare exemple treptate mai complexe în tabele mari. Mai jos în figura de mai jos, este specificată opțiunea inițială a tabelului obișnuit. Și în partea dreaptă - opțiunea cu combinația a două celule din a doua linie. Deci, vizual și mai ușor de comparat codul HTML.

De asemenea, puteți combina trei celule în centru. În primul caz, atributul Colspan a fost indicat în numărul celulei 1. Aici primul va fi neschimbat, iar al doilea a fost adăugat Colspan egal cu trei.

Dacă doriți să combinați întreaga celulă în linie la una, atunci eliminăm patru TDS și în primul indică Colspan \u003d "5".

După cum puteți vedea, de fapt, toate acestea sunt simple. Nu este nimic dificil. Principalul lucru, cu atenție, de la prima dată, pentru a afla toate pietrele subacvatice ale meselor și atunci nu ar trebui să existe probleme.

Tabele ca cadru al site-ului

În HTML, asocierea celulelor nu este întotdeauna utilizată pentru mese regulate cu informații (atât în \u200b\u200bcuvânt, fie în Excel). Dezvoltatorii site-ului de multe ori și mai devreme le-au folosit pentru aspectul site-urilor.

De exemplu, puteți lua în considerare acest aspect al site-ului. Acest design este foarte simplu și primitiv. Dar aici puteți arăta explicit utilizarea Uniunii.

Aici a fost inițial un tabel de trei linii, două celule în fiecare. Apoi, pentru a plasa logo-ul site-ului, au fost combinate două celule din prima linie. La linia de jos a făcut același lucru pentru a plasa "subsolul".

Datorită acestui fapt, este posibil să plasați elemente de design în locurile lor, și nimic nu va merge nicăieri pentru limitele lor. Este foarte convenabil și ușor. Prin urmare, a fost atât de popular. Se recomandă crearea unor blocuri de etichete div.

Concluzie

Și amintiți-vă că în tabelul HTML, asocierea celulelor se poate face după cum doriți. Totul depinde de ceea ce aveți nevoie și de modul în care doriți să îl aranjați. Main, nu confirmați. Dacă doriți să creați o masă mare cu un număr mare de asociații, se recomandă pre-trageți-o pe broșură sau în vopsea. Va fi mai ușor pentru factorii de novice.

Când doriți experiență, puteți produce cu ușurință astfel de operațiuni în cap.

De fapt, este foarte simplu dacă ați creat deja mese HTML. Învățând o pereche de parametri, veți învăța să combinați celulele de masă. Un exemplu de masă cu celule combinate orizontal și vertical, vezi, de exemplu, în articolul anterior despre.

Luați în considerare modul în care celulele sunt combinate, pe exemplul tabelului HTML 5x5. Eu folosesc pentru a crea tabele. Codul creat de designerul de masă 5x5 arată astfel:

< 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.

Tabelul însuși arată astfel:

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. Asociația celulelor verticale
Parametrul este utilizat pentru celulele verticale. rowspan.Definirea numărului de celule combinate vertical.
Combinăm celula C1R1 și C1R2 în tabelul de mai sus. Pentru asta aveți nevoie:

1. Pentru celula C1R1 Adăugați Rowspan \u003d parametrul "2":

C1R2.

Acum, tabelul arată așa:

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. Asociația celulelor pe orizontală
Parametrul este utilizat pentru asocierea orizontală a celulelor. colspan.Definirea numărului de celule combinate orizontal.
Combinăm celula C2R1, C3R1 și C4R1 specificată în tabelul de mai sus. Pentru asta aveți nevoie:

1. Pentru celula C2R1 Adăugați un parametru Colspan \u003d "3":

C3R1. C4R1.

Tabelul va lua forma următoare:

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

Va trebui să umpleți tabelul cu conținut: eșantioane ale traducerilor dvs. în portofoliu etc.

mese Cel mai bine este să luați în considerare în exemplul unui tabel simplu, a cărui cod HTML este prezentat în lista 5.10.

Acesta este un tabel obișnuit al cărui celule sunt numerotate - deci va fi mai ușor pentru noi mai târziu. În fig. 5.2 Afișează vizualizarea în fereastra browserului web.

Și acum ia în considerare masa din fig. 5.3.

Aici este combinația unor celule. Se poate observa că celulele combinate ca și cum ar fi fuzionat într-una. Cum să o facă?

Mai ales pentru aceste etichete și Susțineți două atribute opționale foarte notabile. Primul - Colspan - combină celulele orizontal, secunde-vertical-vertical.

Pentru a combina mai multe celule orizontal într-una, trebuie să efectuați următorii pași.

1. Găsiți codul Tag-ul HTML. (), corespunzând primului dintre celulele combinate (dacă numărați celulele de la stânga la dreapta).

2. Pentru a intra în atributul Colspan în el și a-i atribui numărul de celule unite, considerând că este primul dintre ele.

3. Ștergeți etichetele ( ), crearea altor celule combinate ale acestui șir.

Să combinăm celulele 2 și 3 mese (vezi lista 5.10). Fragmentul de cod corectat care creează primul șir al acestui tabel este prezentat în listarea 5.11.

În mod similar, creăm celulele combinate 4 + 5 și 12 + 13 + 14 + 15.

Combină celulele verticale ușor mai greu. Iată pașii de făcut pentru acest lucru.

1. Găsiți în codul HTML un șir (etichetă) în care este localizată prima dintre celulele combinate (dacă numărați rândurile de sus în jos).

2. Găsiți în codul acestei etichete de rând ( ) corespunzătoare primului celule combinate.

3. Includeți atributul Rowspan și alocați-l celule integrate, având în vedere cele mai întâi.

4. Vizualizați liniile ulterioare și eliminați etichetele de la acestea ( ), crearea altor celule combinate.

Noi am plecat combină celulele 1 și 6 din tabelul nostru. Listarea 5.12 conține un fragment corectat al codului HTML (corecțiile vor afecta prima și a doua linie).

Rețineți că am eliminat eticheta de la al doilea rând, creând o celulă a șasea, deoarece a fost combinată cu prima celulă.

Acum se aplică nu foarte des. Cu toate acestea, mai devreme, în timpul zilei de glorie a Web Design, a fost dificil să se întâlnească cu tabelul fără celule unite. Într-un fel sau altul, nu rănește despre asta.

Bună ziua, astăzi vă voi spune cum să faceți în HTML combinarea celulelor din tabel orizontal și vertical.

Nu ne vom deranja să ne deranjăm, voi crea tabelul simplu. Din cele trei rânduri și patru celule în fiecare rând. Pentru ei sunt cele mai simple stiluri, astfel încât totul este afișat corect.

Masa (
Colapsul de frontieră: colaps;
}
TD (
Frontieră: 1px negru solid;
Lățime: 60px;
Înălțime: 50px;
}

Asociația celulelor pe orizontală

Să începem cu asta, deoarece această tehnică este mai ușoară. Să presupunem că doriți patru celule în primul rând pentru a fuziona într-una. Acest lucru se poate face folosind atributul Colspan:

1. Prescriem atributul Colspan dorit \u003d "Numărul de celule de care aveți nevoie pentru a combina"
2. Îndepărtați toate celulele suplimentare

De exemplu:

Uită-te la această bucată de cod. De la prima celulă dintr-un număr set de seturi Colspan 4, de fapt, va avea loc patru celule și, prin urmare, următoarele 3 în unele, trebuie îndepărtate, pur și simplu nu au nevoie acum.

Dacă nu le șterg, atunci într-un număr de 7 celule se formează și, bineînțeles, va deveni mult mai largă decât următoarele două.

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

Asociația verticală

Este puțin mai dificil și realizat de aceeași tehnologie, este utilizat numai atributul numit Rowspan și este necesar să se elimine celulele dorite în coloană și nu un număr care să compliceze puțin sarcina, dar de fapt totul este simplu dacă înțelegeți rapid esența.

Să unim ultimele celule într-un număr de 2 și 3. Pentru aceasta, ultima cușcă într-un număr 2 scrie Rowspan \u003d "2". Acum trebuie să eliminați ultima celulă în aproximativ 3. Dacă acest lucru nu este făcut, atunci din nou, celulele suplimentare vor ieși, ceea ce se va strica puternic aspect Tabelul nostru.

Combinație pe ambele părți

O celulă poate fi adresată ambele atribute. Să vedem cum funcționează și ea. Combinăm primele celule ale seriei 2 într-o singură celulă, iar cele două rânduri 3. Total 4 celule sunt combinate într-una.

În acest caz, celula din al doilea rând va primi ambele atribute, următoarea celulă este ștearsă în al doilea rând, în a treia - primele două.

Astfel, puteți crea tabele de orice complexitate, am spus deja despre designul lor în acest articol, astăzi scopul meu a fost să vă arăt un truc cu o asociație și sper că sa dovedit și ați înțeles ceva. Dacă aveți întrebări, întrebați în comentarii.

Ridicarea atenției dvs .: Cu toții vrem să postăm site-urile lor pe o găzduire fiabilă. Am analizat sute de hostings și am găsit cele mai bune - Hosttiq. Sute online de feedback pozitiv despre aceasta, evaluarea medie a utilizatorului este de 4.8 out of 5. Lăsați site-urile dvs. să fie bine.