O lecție în HTML. Mergeți celulele

Tabele în HTML - element foarte convenabil. Poți să faci ceva cu ei. Desigur, scopul principal - plasarea de informații sub forma unui tabel. Dar dezvoltatorii site-ului au mers mai departe. La un moment dat a fost foarte popular să se utilizeze tabele pentru a crea un schelet al site-ului. Acum, profesioniștii încearcă să nu facă acest lucru.

Tabelele sunt utilizate pe scară largă datorită numărului mare de atribute. De exemplu, a fost foarte util să combinați rânduri sau coloane.

Introducere în teorie

În HTML, uniunea de celule are loc utilizând două atribute: colspan și rowspan. Acestea sunt specificate pentru eticheta td.

Să începem prin examinarea structurii oricărei mese înainte de a ne înscrie în subiect. În orice masă există o linie și în ea există celule. Rețineți că inițial toate tabelele ar trebui să conțină același număr de celule.

Figura de mai sus arată două linii și fiecare are trei celule. Aceasta este o masă normală. Dacă specificați un număr mai mic de celule într-un rând, tabelul va "merge", totul va fi afișat incorect.

Tabel HTML: combinarea celulelor pe verticală și orizontală

Puteți specifica mai puține celule sau rânduri numai dacă combinați ceva. Dar în loc de elementul șters din cel mai apropiat vecin de la început, trebuie să specificați un atribut suplimentar. Dacă combinați coloane, apoi colspan, dacă rândurile, apoi rowspan. Valoarea atributului specifică numărul de elemente care urmează a fi fuzionate.

Rețineți că trebuie să specificați exact în cel mai apropiat element la început. De exemplu, în figura de mai sus, dacă doriți să îmbinați celulele 1 și 2, trebuie să specificați în celula 1 atributul colspan cu o valoare de două. Și ștergeți numărul de celule 2 sau 3, nu contează.

Linia de fund este că îi spui celulei cât de mult spațiu va dura. Valoarea implicită este 1.

Alăturați-vă pe verticală celulelor este aceeași. Spațiul ocupat va fi considerat vertical. Vedeți imaginea de mai jos.

Aici celula cu numărul 43 ocupă două linii. Pentru aceasta, ați specificat atributul rowspan. Este amintit pur și simplu:

• Rândul este un șir.
• Coloană coloană / coloană.
• Span - asociere.

Creatorii limbajului au încercat să-l aducă cât mai aproape de om, astfel încât, chiar fără să știe, ar fi putut cel puțin să înțeleagă cumva.

În HTML, combinarea celulelor se poate face în două direcții: vertical și orizontal. Pentru aceasta, specificați ambele atribute simultan.

În figura de mai sus, doar acest lucru este indicat, că puteți face uniunea de rânduri, coloane și, în același timp, coloane și rânduri.

HTML: Mergeți celulele. exemple

Luați în considerare mai multe exemple pas cu pas în tabele mari. Mai jos, în figura din stânga este versiunea originală a mesei obișnuite. Și pe dreapta - o variantă cu unirea a două celule pe a doua linie. Este mai ușor să comparați codul HTML.

De asemenea, puteți combina trei celule în centru. În primul caz, atributul colspan a fost specificat în celula # 1. Aici primul va fi neschimbat, iar în al doilea a adăugat colspan egal cu trei.

Dacă doriți să combinați toate celulele într-un rând într-un singur rând, ștergeți patru td, iar în primul se specifică colspan = `5`.

După cum puteți vedea, în realitate este foarte simplu. Nu este nimic complicat. Principalul lucru este să înțelegeți cu atenție, din prima dată, toate capcanele tabelelor și apoi să nu apară probleme.

Tabelele ca un schelet al site-ului

În HTML, uniunea de celule nu este întotdeauna utilizată pentru tabele obișnuite cu informații (ca în Word sau Excel). Dezvoltatorii de site-uri deseori, și utilizate pentru a le utiliza pentru aspectul site-ului.

De exemplu, puteți vizualiza acest aspect al site-ului. Acest design este foarte simplu și primitiv. Dar aici puteți să arătați în mod explicit folosirea asociației.

Aici a fost inițial un tabel cu trei linii, câte două celule în fiecare. Apoi, pentru a plasa sigla site-ului, cele două celule din primul rând au fost îmbinate. Linia de fund a făcut același lucru pentru a plasa "subsolul".

Datorită acestui fapt, puteți plasa elemente de design în locurile lor, și nimic nu va merge nicăieri dincolo de limitele lor. Este foarte convenabil și simplu. De aceea era atât de popular. Acum este recomandat să creați un bloc de etichete div.

concluzie

Și rețineți că în tabela HTML, puteți combina celulele după cum doriți. Totul depinde de ceea ce aveți nevoie și de modul în care doriți să faceți acest lucru. Principalul lucru, nu te confunda. Dacă doriți să creați o masă mare cu un număr mare de intrări, este recomandat să trageți mai întâi toate acestea pe o bucată de hârtie sau în Paint. Va fi mai ușor pentru începători.

Când câștigi experiență, poți efectua cu ușurință astfel de operații în capul tău.