Atributul html colspan al etichetei td. Folosind celule îmbinate vertical

Pentru a înțelege cât de important este să urmați exact această ordine de scriere a codului html al tabelelor, luați în considerare o opțiune mai complexă, care va necesita deja puțină imaginație și logică spațială. Să trecem la următorul tabel.

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 limbajul HTML () este înlocuit sistematic de aspectul blocului, trebuie totuși 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 aspectului paginilor sale, atunci aceste cunoștințe vă vor ajuta.

Chiar și cea mai simplă inserare a codului de contor de lovituri vă poate necesita 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

Acum, aspectul tabelului a dispărut în fundal odată cu apariția CSS, dar, cu toate acestea, cel mai convenabil mod de a prezenta informațiile este încă vechiul tabel bun și mai trebuie să cunoașteți etichetele sale principale.

Mai devreme, chiar înainte de introducerea CSS, webmasterii nu se puteau lipsi deloc de ele, deoarece î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 special, 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 fac alte elemente 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 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 în interiorul celulelor Td sau Th se află conținutul. 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 poate exista un tabel în codul HTML care ar fi format 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 atribute, ci doar cele mai relevante și utilizate în acest moment. Cele mai detaliate informații despre toate atributele posibile ale etichetei Table, precum și orice alt element.

pentru că tabelul este un element bloc care nu caută să ocupe tot spațiul disponibil în lățime, ceea ce înseamnă că putem aplica alinierea orizontală etichetei 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.

Folosind atributul Width, puteți seta lățimea tabelului și puteți utiliza atât valori absolute în pixeli, cât și valori relative în procente (100% va corespunde întregului spațiu disponibil în lățime).

Mergi mai departe. 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 etichetei Body) 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.

Mergi mai departe. Î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 că în Html cadrul tabelului este în relief. Va avea culorile părților luminoase și întunecate, care apar ca de la lumina care cade din colțul de sus al ecranului. În acest sens, trebuie avut în vedere că în Border nu setați lățimea întregului chenar. La această grosime vor fi adăugate părțile luminoase și întunecate. Î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, plasăm 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 și pentru paragrafe sau titluri, conținutul din toate celulele (Td sau Th) dintr-un 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 textul dvs. din celule diferite are dimensiuni diferite de 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 cel mai important element - celula, și anume la atributele etichetelor Td și Th, care sunt încă folosite astăzi:

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. În plus, atributele unei anumite celule vor avea prioritate față de atributele similare ale unui rând.

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ă pe o linie nouă, cu excepția cazului în care acest conținut se găsește în text. Adică, în acest caz, caracterele cu spații albe nu vor fi folosite 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 setate la unul în mod implicit, 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 tabel HTML” ș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 atributul Align. 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 funcționează complet diferit în diferite browsere. Cel mai bine ar fi să uităm de ei. Acestea. În general, legenda poate fi găsită numai sub semn sau deasupra acestuia (această valoare este utilizată în mod implicit):

În 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 tabelului nostru 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 exact 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 toate atributele descrise mai sus pot fi aplicate elementelor Html situate în celulele tabelului pe care l-am creat, 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 fără a folosi CSS (care nu exista înainte) este posibil să aliniem conținutul (elementele noastre de bloc), iar făcând cadru tabelului 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ă deschideți codul sursă al unui site vechi, sau și mai bine un forum, atunci cu un grad mare de probabilitate veți vedea acolo o mulțime de tabele încorporate în altele și așa mai departe până la confuzie completă.

În aspectul tabelar, astfel de construcții erau folosite peste tot, iar unele decizii de atunci, care acum aveau să fie luate în cel mai scurt timp, necesitau modele foarte greoaie din tablete imbricate una în cealaltă. Tabelul a fost folosit pentru a crea meniuri orizontale și verticale pentru site-uri, pentru a împărți paragrafele 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 ramurile noastre și să luăm în considerare câteva elemente care au permis mai devreme (când nu exista încă CSS) să seteze proprietăți dintr-o dată pentru un număr mare de rânduri în 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 acestora, vom putea seta proprietăți pentru un grup mare de linii simultan, de exemplu, să le umplem cu un fundal, să atribuim 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 linii într-un container Tbody și să scrieți doar în el atributul necesar cu alinierea necesară. Acest lucru poate scuti foarte mult codul HTML de repetări inutile. În general, elementele Tbody, Thead și Tfoot pot fi neglijate în tabelele simple, dar utilizarea lor este încă relevantă în tabelele complexe și astăzi, când există un instrument atât de puternic precum 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ă atribute principale, 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) specificând numărul 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 HTML ale formularului derulant ș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

Top articole similare

Meniul Engineering Android: setări, teste și funcții

Interfețe de comunicare și wireless

Instrucțiuni de utilizare pentru LG P705 LG Optimus L7 Lg p705 instrucțiuni de utilizare citite