Salutare dragi cititori ai site-ului blogului. Vă aduc la cunoștință un alt articol, care va fi dedicat ce este un tabel în Html, ce etichete sunt folosite pentru a-l crea (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), cum să setați un fundal și margini pentru ea și multe altele.
În ciuda faptului că aspectul tabelului site-ului () în limbaj html() este înlocuit sistematic de bloc, mai trebuie să cunoașteți etichetele principale și capacitatea de a personaliza tabelele. De exemplu, motorul folosește în continuare un aspect învechit și dacă doriți să faceți modificări aspect paginile sale, aceste cunoștințe vă vor ajuta.
Chiar cea mai simplă inserție codul hit counter vă poate cere să înțelegeți principiile construirii tabelelor în html. Permiteți-mi să vă reamintesc că deja am reușit să luăm în considerare, la fel și.
Tabele în Html - Elemente Tabel, Tr, Th, Td
În zilele noastre, aspectul tabelului a dispărut în fundal odată cu apariția CSS, dar, cu toate acestea, este adesea cel mai într-un mod convenabil prezentarea informațiilor este încă o farfurie bună și veche și mai trebuie să-i cunoașteți etichetele principale.
Mai devreme, înainte injecție CSS, webmasterii nu se puteau lipsi deloc de ele, pentru că întregul aspect al site-urilor se baza pe ele. Am folosit nu numai etichetele de bază Table, Tr, Th și Td, ci și întregul sortiment bogat de elemente auxiliare (Col, Tbody, Caption, Rowspan, Colspan etc.). Puteți găsi în continuare pe site-uri de internet și forumuri create pe baza aspectului tabelului, care vă pot servi ca un stimulent suplimentar pentru a afla elementele de bază ale construcției lor.
Tabelele în limbajul Html sunt un element deosebit, deoarece în esență elementul Table este un element bloc, dar în același timp nu ocupă tot spațiul disponibil în lățime, așa cum o fac alții. elemente de bloc... În lățime, ocupă doar spațiul necesar pentru a găzdui conținutul - nici mai mult, nici mai puțin.
Cu toate acestea, eticheta Table se va comporta exact ca un element bloc. De exemplu, semnele care urmează unul după altul în cod vor fi pe pagina web fie situate una sub alta, chiar dacă dimensiunea lor le-ar permite să fie pe aceeași linie. O altă caracteristică este că au o structură destul de complexă, în care te poți încurca cu ușurință.
Ele sunt formate după următorul principiu. Întregul tabel este încadrat de etichetele Table de deschidere și de închidere, în interiorul cărora, folosind Tr, sunt create rândurile sale, de exemplu, astfel:
Dar deja în interiorul Tr, celulele sunt create folosind Td. Ele pot fi create și folosind Th, iar diferența dintre aceste celule față de cele create folosind elemente Td va fi pur vizuală. Din punct de vedere funcțional, elementele Td și Th funcționează în același mod.
Dar conținutul (conținutul) celulei create cu eticheta Td va fi aliniat la stânga, iar conținutul celulei create cu eticheta Th va fi centrat și, de asemenea, bold în fontul utilizat. Elementele Th în sine au fost introduse tocmai pentru a oferi titluri de coloană și rând pentru tabele.
Și conținutul este în interiorul celulelor Td sau Th. Tot ceea ce vedeți pe pagina web din interiorul tabelului va fi localizat exact în interiorul celulelor, care sunt formate din etichetele Td sau Th de deschidere și închidere:
Dar de la sine, crearea plăcilor are loc linie cu linie - deschideți Tr și apoi închideți Tr. Câte astfel de perechi de elemente Tr aveți, câte rânduri obțineți. Câte coloane vor fi?
Exact câte creați în fiecare rând (Tr) de celule (Td sau Th). Dacă doriți să faceți o placă simplă și simetrică (vezi imaginea de mai sus), atunci trebuie să faceți același număr de celule (Td sau Th) din fiecare linie.
Deci, tabelele în Html sunt formate linie cu linie - Tr sunt responsabile pentru formarea rândurilor, iar Td sau Th sunt responsabile pentru formarea coloanelor. Ce este de remarcat, în interiorul Td sau Th, puteți introduce absolut orice conținut - text, elemente inline sau bloc (, imagini cu ajutor, titluri, paragrafe), etc.
Acea. se dovedește că nu se poate conecta Cod HTML e, care ar consta din mai puțin de trei elemente - Tabel, Tr, Td (sau Th).
Tabel - elementul principal al mesei
Să începem prin a privi eticheta Table, și anume atributele pe care le are:
De fapt, acestea nu sunt toate atributele, ci doar cele mai relevante și utilizate acest moment... Maxim informatii detaliate de tot felul de atribute ale etichetei Table, precum și de orice alt element.
pentru că masa este un element bloc care nu caută să ocupe tot spațiul disponibil în lățime, ceea ce înseamnă că putem aplica aliniere orizontala la eticheta Table folosind atributul Alinia.
Dar totul nu este atât de simplu aici, deoarece utilizarea valorilor stânga și dreapta în Align nu va duce la alinierea plăcii noastre la stânga sau la dreapta, ci la fluxul de text în jurul ei, în deplină analogie cu modul în care am văzut-o. în. Ei bine, dacă utilizați valoarea Center pentru Aliniere, aceasta va fi doar centrată fără nicio împachetare.
Prin intermediul Atributul de lățime puteți seta lățimea tabelului, în timp ce puteți utiliza atât valori absolute în pixeli, cât și relative în procente (100% vor corespunde tuturor spatiu disponibilîn lățime).
Dați-i drumul. Cellpadding vă permite să setați indentarea conținutului în celule (Td sau Th) de la marginile acestuia (pe toate cele patru laturi în același timp), iar Cellspacing vă permite să setați distanța dintre celulele adiacente ale tabelului în pixeli (implicit este de doi pixeli) . Cred că ideea este clară, dar totuși va fi mai clar să arăt acest lucru cu un exemplu:
Următoarele atribute ale etichetei Table sunt responsabile pentru fundalul tabelului nostru - acestea sunt elementele Bgcolor și Background. După cum probabil vă amintiți, cu ajutorul Fundalului (care, apropo, este folosit doar în eticheta și elementele Body - Tabel, Tr, Th sau Td), puteți selecta orice imagine din fișier ca fundal, calea la care se va specifica ca valoare acest atribut.
Această imagine, ca o placă, va acoperi întreaga pagină web (în cazul în care Eticheta corporală) sau întregul tabel (în cazul Tabelului), de exemplu, astfel:
Când utilizați atributul Bgcolor într-un tabel, va trebui să specificați culoarea cu care doriți să umpleți tabelul ca valoare. vezi link-ul oferit.
Dați-i drumul. În continuare, avem un atribut Frontieră, care este responsabil pentru formarea cadrului. Există subtilități în explicarea desenului cadrelor, dar pentru simplitate, putem spune că cadrul va fi desenat în jurul celulelor și în jurul mesei în sine. În Border, veți putea seta grosimea acestui chenar în pixeli. În mod implicit, nu este desenat niciun chenar (chenar = 0).
Dar trebuie avut în vedere faptul că în cadru HTML masa este în relief. Va avea culorile părților luminoase și întunecate, care apar ca din cădere colțul de sus lumina ecranului. În acest sens, trebuie avut în vedere că în Border nu setați lățimea întregului chenar. La această grosime, lumină și partea întunecată... În general, este puțin confuz, dar ar trebui privit cu un exemplu.
Cu elementul Tabel, vom presupune că am terminat și este timpul să trecem la următorul. Particularitatea Tr este că este pur serviciu și nu este vizibil pe pagina web. În esență, Tr este un container invizibil pentru Td sau Th, care va fi amplasat în el.
Tr - elementul rândului tabelului în Html
Folosind eticheta Tr, punem pur și simplu toate celulele incluse în ea (Td sau Th) într-o singură linie și atât, Tr în sine nu este vizibil. De aici rezultă o concluzie importantă - toate atributele acestei etichete sunt aplicate în mod specific celulelor incluse în acest container. Cele mai utilizate atribute Tr în prezent sunt prezentate în figură:
Alinierea funcționează în el în același mod ca pentru paragrafe sau titluri, conținutul din toate celulele (Td sau Th) unui rând dat (Tr) este aliniat la stânga sau la dreapta sau la centru.
Valign setează alinierea verticală a conținutului în toate celulele (Td sau Th) ale rândului dat (Tr). Valorile Top, Middle și Bottom stabilesc alinierea la partea de sus, mijloc și, respectiv, de jos. Alinierea implicită este la mijlocul înălțimii - Mijloc.
Valoarea Linie de bază specifică alinierea textului în Td sau Th a liniei date cu linia de bază a fonturilor. Acest lucru poate fi convenabil atunci când aveți celule diferite textul are dimensiune diferită font, iar alinierea Liniei de bază în Valign va face un astfel de tabel mai utilizabil pentru cititori (în opinia mea):
Doar primele linii de conținut din celule (Td sau Th) vor fi aliniate cu linia de bază a fonturilor, iar toate celelalte linii de conținut vor fi aranjate așa cum sunt.
De asemenea, puteți utiliza atributul Bgcolor pe eticheta Tr, umplând aceste rânduri cu culoarea de fundal dorită. Acea. toate celulele din această linie sunt umplute cu culoarea dorită:
După cum puteți vedea, în interiorul acestui element Tr este Td sau Th care este umplut cu culoarea de fundal, deoarece linia în sine nu este vizibilă în placă.
Td sau Th - elemente ale celulelor tabelului în Html
Ei bine, acum să trecem la maximum element important- celula, și anume la atributele tag-urilor Td și Th, care sunt încă folosite acum:
Etichetele Align și Valign în Td sau Th spun browserului exact cum ar trebui să fie aliniat conținutul în lățime și înălțime, și nu în întreaga linie, așa cum am considerat recent. Mai mult, atributele unei anumite celule vor avea prioritate atribute similare siruri de caractere.
Acestea. în întreaga linie, conținutul celulelor poate fi aliniat la dreapta, dar într-o linie separată puteți seta o aliniere diferită și va avea prioritate (întrerupere) față de alinierea care a fost setată în eticheta Tr.
Lățimea și Înălțimea vă permit să setați înălțimea și lățimea celulei, atât în pixeli, cât și ca procent (în lățime). Elementele Bgcolor și Background in Html Td sau Th vă permit să setați un fundal separat (sub forma unei culori sau a unei imagini) pentru fiecare celulă specifică:
Nowrap în Td sau Th interzice transferul de conținut dintr-o celulă către linie nouă, cu excepția cazului în care acest conținut este găsit în text. Adică în acest caz caractere cu spații albe nu va fi folosit pentru împachetarea automată a textului. Probabil, acest atribut poate fi considerat ca un fel de analog al celui descris.
Ei bine, aici suntem alături de tine pentru atribute foarte interesante și, cel mai important, utile - Colspan și Rowspan. Ele înseamnă acoperire. Rowspan este întinderea liniei și Colspan este întinderea coloanei. Acestea servesc, respectiv, la combinarea celulelor într-o coloană sau pe rând.
Dacă doriți să combinați mai multe celule într-o coloană a tabelului, atunci va trebui să utilizați Rowspan, deoarece întindeți mai multe linii cu o singură celulă. Și dacă doriți să combinați mai multe celule la rând, atunci va trebui să utilizați Colspan, deoarece pentru a cuprinde o singură celulă aveți nevoie de mai multe coloane.
Colspan și Rowspan sunt implicite egal cu unu, adică fiecare celulă se referă la o coloană și un rând. De îndată ce ați îmbinat celule, acestea încep deja să se refere la mai multe coloane sau mai multe rânduri (sau ambele în același timp).
Legendă - legenda tabelului
Mai există un element suplimentar numit „ Antet HTML tabele ”și este format folosind etichete Caption. Acest element este folosit nu mai mult de o dată (sau nu este folosit deloc) și este plasat imediat după eticheta de deschidere Tabel. Doar conținutul inline poate fi în interiorul Subtitrare și nu ar trebui să existe elemente de bloc în acesta.
Poziția subtitrării poate fi setată folosind Alinierea atributului... Valorile de sus și de jos vor seta poziția antetului, respectiv, deasupra și dedesubtul tabelului. Valorile Stânga și Dreapta nu sunt folosite acum, deoarece lucrează complet diferit în browsere diferite... Cel mai bine ar fi să uităm de ei. Acestea. pe în general legenda poate fi localizată numai sub semn, sau deasupra acestuia (această valoare este utilizată în mod implicit):
V caz general, puteți da următoarea diagramă bloc a construcției:
Să luăm acum un exemplu despre cum puteți crea un tabel cu celule de diferite dimensiuni, dintre care unele se vor întinde pe mai multe coloane sau rânduri. După cum am spus cu tine puțin mai devreme, acestea sunt create linie cu linie în Html. Să ne bazăm pe aspectul prezentat în figura de mai sus.
Pentru început, scriem eticheta Table de deschidere și imediat după aceasta deschidem eticheta primei linii Tr. Prima linie a noastră tabelul viitor constă dintr-o celulă care se întinde pe două coloane simultan, astfel încât atributul Colspan = 2 va trebui adăugat la eticheta acestei celule:
Apoi, închidem eticheta primei linii (Tr) și deschidem eticheta următoarei, care va avea deja două celule. Prima celulă a celui de-al doilea rând este neremarcabilă și va consta din etichetele obișnuite de rupere sau de închidere Td sau Th, între care conținutul său va fi inclus.
Dar a doua celulă a celei de-a doua linii este remarcabilă, deoarece se întinde pe două linii simultan și, prin urmare, va trebui să adăugăm atributul Rowspan = 2 etichetei sale:
Ei bine, și trebuie să descriem doar a treia linie. Prima celulă a acestei linii, din nou, nu reprezintă nimic special, dar a doua a fost deja descrisă de noi în a doua linie, ceea ce înseamnă că nu va mai fi aici. Fiecare celulă poate fi descrisă o singură dată. sper că acest lucru este clar. Acea. al treilea rând al tabelului va arăta astfel:
Ei bine, acum să combinăm toate acestea într-un singur cod și să vedem ce se întâmplă:
De fapt, a ieșit așa cum am plănuit. Este clar că nu este nimic complicat aici - este suficient să înțelegem logica funcționării atributelor Colspan și Rowspan.
Aspect tabelar (învechit).
Acum să vorbim despre un astfel de concept precum aspectul tabelului și de ce anume au devenit instrumentul principal în limbajul de marcare hipertext în absența CSS (acum, desigur, peste tot). Chestia este că numai tabelele au făcut posibilă rezolvarea destul de simplă și flexibilă a problemei principale în aspectul site-ului - plasarea elementelor bloc într-un rând în codul HTML.
După cum știți deja, elementele bloc, atunci când sunt plasate unul după altul în codul HTML, vor fi plasate unul sub celălalt și pe pagina web. Apropo, aceleași semne sunt, de asemenea, elemente de bloc și puteți folosi două metode pentru a le pune pe un rând.
Primul dintre ele constă în prescrierea primului dintre tabele cu atributul Align cu valoarea Left la eticheta Table, drept urmare al doilea va sta deja în dreapta primului și se va ghemui lângă el. După ce am înregistrat Align = stânga și al doilea în eticheta Table, putem pune până la trei piese într-un rând.
Dar prima modalitate nu ne permite să le îndepărtăm unul de celălalt, pentru că în acel moment CSS nu era încă folosit. Prin urmare, cel mai convenabil mod de a plasa mai multe tabele (sau orice alte elemente de bloc) într-un rând a fost crearea unui Tabel cu un rând (Tr) și numărul de celule de care avem nevoie (Td sau Th), proporțional cu numărul de blocuri. elemente pe care va trebui să le plasăm pe un rând.
Deci, pentru cea mai simplă plasare a mai multor piese la rând, va trebui să creați așa-numitele tabele imbricate, atunci când o altă celulă este inserată ca conținut într-o celulă:
Acum să Elemente HTML, situat în celulele tabelului creat de noi, se vor putea aplica toate atributele descrise mai sus, atât pentru etichetele Tr, cât și pentru etichetele Td sau Th. Va fi posibil să poziționați conținutul în celule, să setați indentările necesare, să umpleți cu un fundal etc.
Acestea. acum fara folosind CSS(care nu exista înainte) poți alinia conținutul (elementele noastre bloc), iar făcând rama plăcii invizibilă, putem astfel poziționa conținutul pe pagina web. De exemplu, nu va fi dificil să configurați o prezentare în trei coloane a textului sau, în general, orice îți dorește inima.
Dacă deschizi sursă a vreunui site vechi, sau chiar mai bine un forum, atunci cu un grad mare de probabilitate vei vedea acolo o multime de placi imbricate in altele si asa mai departe pana la confuzie completa.
În aspectul tabelar, astfel de modele erau folosite peste tot și unele soluții de atunci, care acum aveau să fie realizate în cel mai scurt timp, necesitau modele foarte greoaie din plăci imbricate una în alta. Pe masă, orizontală și meniuri verticale pentru site-uri, ruperea paragrafelor cu texte în coloane și multe altele
Tbody, Thead și Tfoot - containere pentru rânduri dintr-un tabel HTML
Dar să ne întoarcem din nou la berbecii noștri și să luăm în considerare câteva elemente care au permis mai devreme (când nu exista încă CSS) să setăm proprietăți imediat pentru un numar mare linii din eticheta Table. Tr sunt ele însele containere invizibile pentru Td sau Th, dar există alte trei tipuri de containere care, la rândul lor, servesc drept containere pentru Tr.
Cu ajutorul lor, vom putea seta proprietăți imediat pentru grup mare linii, de exemplu, umpleți-le cu un fundal, atribuiți alinierea dorită etc. Vorbesc despre elemente precum Thead (pentru antet), Tbody (pentru conținut) și Tfoot (pentru sfârșitul său). La crearea unui tabel, se scrie mai întâi un grup de linii legate de antet (închis în etichetele Thead), apoi un grup de linii legate de sfârșitul acestuia (Tfoot) și abia apoi un grup de linii legate de conținutul său principal (Tbody) .
În tabelul Html, secțiunea Tad poate fi înregistrată o singură dată sau poate să nu existe deloc. Același lucru este valabil și pentru un container de elemente Tfoot. Dar cel puțin o secțiune Tbody trebuie să fie prezentă.
Dar, de exemplu, tabelele de pe această pagină sunt afișate perfect, deși nu m-am obosit să pun jos etichetele de deschidere și de închidere Tbody. Totul este foarte simplu - la analizarea codului, browserul însuși a adăugat elementele Tbody, care pot fi văzute uitându-se la acest cod rezultat:
Dar, în practică, dacă webmasterii anteriori creau tabele complexe, atunci Tbody le-a fost foarte util. Să presupunem că aveți un tabel cu câteva mii de rânduri și trebuie să ajustați alinierea în toate celulele într-un mod diferit de cel implicit. Fără utilizarea Tbody, ar trebui să adăugați atributul corespunzător de câteva mii de ori la toate etichetele de rând.
Dar, la urma urmei, puteți include toate aceste mii de rânduri într-un singur container Tbody și să scrieți numai în el atribut necesar cu alinierea corectă. Acest lucru poate scuti foarte mult codul HTML de repetări inutile. În general, în mese simple ah, elementele Tbody, Thead și Tfoot pot fi neglijate, dar în cele complexe, folosirea lor este încă relevantă chiar și în vremea noastră, când există astfel de Unealtă puternică ca CSS.
Col - setați lățimea coloanelor tabelului
Col și Colgroup au acum aproape aceeași influență, așa că să vorbim despre utilizarea lor folosind elementul Col ca exemplu. Este necesar să setați convenabil lățimea coloanelor și a rândurilor. Col are două principale Atribut spanși Width, care vă permit să setați o lățime diferită pentru toate coloanele incluse în etichetele Col.
Span stabilește intervalul (dimensiunea containerului) prin specificarea numărului de coloane pentru care se va aplica lățimea specificată în Width. De exemplu, așa:
Acestea. Am setat lățimea la 50 de pixeli pentru primele două coloane ale tabelului, 200 de pixeli pentru a treia coloană și 100 de pixeli pentru celelalte două. Totul este destul de simplu și simplu, după părerea mea. Dar, de fapt, lățimile coloanei, specificate prin elementele Col, sunt doar declarația dvs., deoarece atunci când fereastra browserului este redimensionată, lățimile coloanei se vor schimba.
Multă baftă! Ne vedem curând pe paginile site-ului blogului
puteți viziona mai multe videoclipuri accesând");">
S-ar putea să fiți interesat
Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - etichete Formulare HTML liste derulante și casetă de text
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, Yandex și alte programe 
MailTo - ce este și cum se creează un link în Html pentru trimiterea unui e-mail 
Formulare HTML pentru site - etichete Form, Input and Select, Option, Textarea, Label și altele pentru crearea elementelor formularelor web
Cea mai obișnuită utilizare a tabelelor complexe este marcarea unei pagini web. Aruncă o privire la poză:
Se pare că avem nevoie de o coloană în primul și al treilea rând. Acest lucru se realizează cu ajutorul parametrului colspan etichetă
De exemplu,
Pentru exemplul nostru:
Titlul documentului
| antetul site-ului | |
| meniul | conţinut |
| partea de jos a site-ului | |
Rețineți că primul și al treilea rând conțin acum o coloană fiecare.
Luați în considerare un alt exemplu de marcare pentru o pagină web:
| antetul site-ului | |||||
| meniul | meniul | meniul | meniul | meniul | meniul |
| știri | conţinut | ||||
Număr - câte rânduri și coloane sunt în acest tabel? Pentru a face acest lucru, impuneți mental o grilă pe desen. Rezultatul sunt trei rânduri și șase coloane.
Primul rând este format dintr-o coloană, inclusiv șase coloane. Să scriem asta:
Al doilea rând are șase coloane:
Al treilea rând este format din două coloane, în plus, primul include două coloane, iar al doilea - patru:
Nu atât de greu. Impunem vizual o grilă pe desen și scriem liniile pe rând de sus în jos, descriind numărul necesar de coloane în fiecare.
Etichetă Rowspan - concatenarea rândurilor
Dacă avem nevoie de acest tip de markup?
Vă rugăm să rețineți că în al doilea rând avem o singură coloană, deoarece prima coloană se extinde din primul rând, include doar două.
La prima vedere, poate părea complicat, de fapt, puțină practică și vei crea tabele de orice complexitate.
Să luăm un alt exemplu:
| capac | meniul |
| conţinut | |
| partea de jos a site-ului | |
Deci, în primul rând, avem două coloane, cu a doua coloană unind cele două rânduri. Să scriem asta:
Al doilea rând este o coloană (doar o parte din el este ascunsă de a doua coloană a primului rând):
În cele din urmă, al treilea rând este o coloană care include trei coloane:
Folosind acești doi parametri lungimea rândurilorși colspan puteți crea tabele de orice complexitate. Practică.
Tabele imbricate
După cum sugerează și numele, un tabel poate fi plasat în interiorul altuia, dar poate fi plasat în orice coloană. Să facem asta folosind ultimul nostru marcaj ca exemplu.
Deci, avem următorul cod.
10.01.17 4.6KCum să combinați orizontal celulele în tabelul HTML
Când creați tabele în HTML, uneori este necesar să îmbinați celulele pe orizontală.
Într-un tabel HTML, fiecare celulă este constrânsă de un set de etichete
Pentru concatenarea celulelor HTML, trebuie să adăugați mai puține celule la linie decât la restul liniilor și să adăugați atributul colspan= "" În interiorul etichetei
Luați în considerare un exemplu simplu de tabel HTML cu două rânduri și două coloane (patru celule). HTML-ul său 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 oricare dintre zonele sale cu orice număr de coloane. Una dintre cele mai utile utilizări ale îmbinării orizontale a celulelor este crearea antetelor de tabel. Dacă tabelul are n coloane, plasați atributul colspan = "n" în prima celulă din rândul de sus și eliminați celelalte celule din acel rând.
Cum să îmbinați celulele într-un tabel HTML pe verticală: rowspan
Atributul rowspan = "" vă permite să îmbinați celulele pe verticală
Dacă doriți ca celula să se întinde pe mai multe rânduri, adăugați atributul rowspan = "" în interiorul etichetei
Luați în considerare un exemplu simplu de tabel HTML cu patru celule, împărțit în două rânduri și două coloane. Cod HTML:
| conţinut | conţinut |
| conţinut | conţinut |
A efectua tabel HTMLîmbinați celulele pe verticală, adăugați pentru prima celulă linia de sus atribut rowspan = „2”, 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 concatenarea orizontală și verticală a celulelor într-un singur tabel, așa cum se arată în figura din stânga. O singură celulă poate cuprinde chiar mai multe rânduri și coloane, așa cum se arată în figura din dreapta. Codul HTML pentru fiecare tabel este prezentat 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
Îmbina celulele prin Verticale HTMLîntr-o singură coloană poate fi folosit atunci când doriți să creați un antet pentru un grup de rânduri adiacente acelei coloane. De asemenea, poate ajuta la separarea grupurilor de linii după tip.
Înainte de asta, am explicat cum să creezi o pagină de site din tabele simple. În acest tutorial, voi discuta despre modelele de creare a unor tabele complexe. Adică tabele formate din sume diferite rânduri și celule. Exemplele pe care le voi folosi pot fi vizualizate, ne vom referi la această pagină de mai multe ori în timpul lecției. Acum să începem în ordine.
tabelul 1
Este mai bine să începeți simplu și, în același timp, să vă amintiți cum sunt setate celulele și rândurile.
O sarcină ușoară. pe care le-am marcat in albastru(poate că cineva îl va numi albastru - nu contează). Există doar două rânduri în el. Prima este întinsă pe cinci coloane, a doua este formată din aceste coloane. Aici intră în joc atributul foarte valoros „Colspan”.
Atribut colspan setează numărul de coloane pentru a întinde această celulă.
Îi dăm o valoare de cinci: Colspan = „5”. Și prima noastră celulă este întinsă la lățimea a cinci celule de coloană rândul următor... Întregul cod al plăcii va arăta astfel:
