Tutorial HTML. Fuzionarea celulelor

Pentru a combina două sau mai multe celule într-una singură, se utilizează atributele colspan și de înverșunare ale etichetei. ... Atributul colspan stabilește numărul de celule care se îmbină orizontal. Atributul rowpan funcționează în mod similar, cu singura diferență că întinde celulele pe verticală. Înainte de a adăuga atribute, verificați numărul de celule din fiecare rând pentru a vă asigura că nu sunt aruncate erori. Asa de, înlocuiește trei celule, deci ar trebui să existe trei etichete în următoarea linie sau o construcție de genul ...... ... 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 este valid, dar cod incorect, în care apare o eroare similară.

Exemplul 12.3. Concatenare de celulă nevalidă

Utilizarea incorectă a colspan

Celula 1		Celula 2
Celula 3	Celula 4

Rezultatul acestui exemplu este prezentat în Fig. 12.5.

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

Prima linie a exemplului are trei celule, două dintre ele sunt concatenate folosind atributul colspan, iar a doua linie adaugă doar două celule. Aceasta creează o celulă suplimentară care este afișată în browser. Se poate vedea clar în Fig. 12.5.

Exemplul 12-4 demonstrează utilizarea corectă a atributelor colspan și linespan.

Exemplul 12.4. Îmbinați celulele pe verticală și orizontală

Fuzionarea celulelor

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

Rezultatul acestui exemplu este prezentat în Fig. 12.6.

Orez. 12.6. Un tabel cu celule îmbinate

Acest tabel are opt coloane și trei rânduri. Unele dintre celulele cu cuvintele „Internet Explorer”, „Opera” și „Firefox” sunt combinate în cazul în care două, și în cazul în care trei celule. Combinare verticală aplicată în celula etichetată „Browser”.

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

În acest articol, nu vom explica principiile creării tabelelor html; pentru a dobândi aceste cunoștințe, urmați cursul nostru HTML.

Pentru a combina celulele dintr-un tabel, există două atribute date etichetei sunt colspan (unire orizontală) și rânduri (unire verticală).

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

Atributele colspan și rowpan iau valori întregi de la 0 la 1000 ca parametri. Iată un mic exemplu despre cum puteți combina celulele dintr-un tabel.

La prima vedere, este implementată o structură nu foarte complexă, dar analizând abundența și elementele din cod sunt greu de înțeles prin ce principiu puteți combina încă câteva celule.

Vă oferim un mod versatil și foarte convenabil de a combina celulele.

Pentru început, pregătește un spațiu liber al viitorului tău tabel, prezentându-l cu toate celulele separate. Ar putea fi o masă 3x3, 6x10 etc. Vom da fiecărei celule propriul număr, începând să numărăm de la stânga la dreapta și de sus în jos.

Să analizăm crearea tabelului prezentat mai sus folosind această metodă.

Așa vor arăta codul șablonului 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

Trebuie să îmbinați celulele cu numerele 1,2,3 pe orizontală. Pentru a face acest lucru, în cod, celula numărul 1, adăugați atributul colspan cu valoarea 3. Și scoateți elemente cu numerele 2 și 3. Scriem numerele celulelor îmbinate în celula rezultată.

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ă fuzionăm celulele 9 și 13 pe verticală. Efectuăm o procedură similară - setați atributul rowpan la numărul de celulă 9 cu valoarea 2, ștergeți celula din numărul 13, scrieți numerele celulelor din care este alcătuită celula îmbinată.

Aceasta va schimba codul nostru și aspectul tabelului:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

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

Aceasta va 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

Atât, am primit tabelul original, acum celulele pot fi completate cu informațiile care vă convin.

Sperăm să înțelegeți principiul creării unor tabele complexe cu celule concatenate.

Tabelele HTML au două funcții. Primul este tabelele în sine, adică ieșirea informațiilor sub formă de tabel. Iar al doilea este aspectul paginii. Bucăți de conținut separate sunt plasate în diferite celule ale tabelului și astfel apar în locul potrivit pe pagină.

Crearea unui tabel

Să vedem cum să creăm un tabel în HTML. Acest lucru se face folosind eticheta

... Tabelele sunt formate din rânduri cu celule în interiorul lor. Aceste celule conțin conținutul tabelului. Etichetă adaugă un rând la masă și etichetă

adaugă o celulă la un rând. Nu uitați să închideți etichetele. De exemplu, să creăm un tabel ca acesta:

Pentru ca cadrele de masă să fie vizibile, eticheta

atributul border a fost setat, dar HTML5 depreciază acest atribut și îl depreciază. În plus, există și alte atribute pentru lucrul cu cadre și schimbarea fundalului, iar celulele au și atribute pentru alinierea conținutului. Toate aceste atribute sunt, de asemenea, depreciate; ar trebui folosite în schimb stiluri.

Concatenează celulele tabelului

Este posibil să combinați celulele de tabel într-una singură. Pentru a face acest lucru, eticheta

există un atribut colspan care concatenează celulele din același rând și un atribut de rânduri care concatenează celulele din rânduri diferite. Valoarea acestor atribute este numărul de celule care trebuie îmbinate.

Să creăm un tabel ca acesta:

Vă rugăm să rețineți că în al doilea rând al tabelului, o celulă înlocuiește două celule, astfel încât numărul total de celule din acest rând va fi mai mic decât în celelalte, în acest caz, una.

Acum să creăm un tabel ca acesta:

Etichete de tabel suplimentare

În plus față de etichetele pe care le-am folosit, există și etichete care sunt utilizate și la crearea unui tabel.

- celula antet. De obicei, se găsește în primul rând al unui tabel. Folosit pentru a crea un nume pentru o coloană de tabel. Din etichetă

diferă numai prin alinierea în bold și la centru.

- este în interiorul etichetei , adaugă un titlu în tabel.

- conține primele câteva rânduri ale tabelului pentru a indica un anumit stil. În tabel nu poate exista decât o astfel de etichetă. Liniile pe care le conține trebuie să înceapă chiar de la prima linie.

- conține mai multe linii ale tabelului pentru a indica un anumit stil. Pot fi mai multe astfel de etichete în tabel.

- conține rândurile tabelului, care vor fi afișate chiar în partea de jos a tabelului.

- definește stilul pentru o coloană a tabelului, începând cu prima. Adică, prima astfel de etichetă va specifica stilul pentru prima coloană, a doua etichetă pentru a doua coloană și așa mai departe. Funcționează diferit în diferite browsere.