Rezultat:

Valorile sunt specificate în pixeli (px) sau procente (%)

○ Alinierea conținutului într-un tabel HTML

Pentru a alinia conținutul într-un tabel HTML, utilizați eticheta to atribut aliniași "valliniaza" :

ALINIA– alinierea orizontală a conținutului din tabel.
Valori:

• stânga - împinge conținutul spre stânga (Mod implicit);
• centru – așezat în centru;
• dreapta - împinge conținutul în partea dreaptă

VALIGN- alinierea verticală a conținutului din tabel.
Valori:

• top – apăsați conținutul în sus;
• partea de jos – apăsați conținutul în jos;
• mijloc – setați conținutul la mijloc

Rezultat:

○ Cum să centrați tabelul html

Pentru a alinia masa în centru, trebuie să înfășurați masa cu o etichetă

Etichete suplimentare și principale pentru masă

Rezultat:

Deci am terminat cu tabelele. Acum puteți crea singur un tabel de orice complexitate. Consultați această lecție. Încercați să creați singur orice tabel.
Vă aștept cu nerăbdare la următoarea lecție. Abonați-vă la actualizările blogului meu.

Postarea anterioară
Postarea următoare

Apoi tabelele joacă un rol foarte important în crearea unui cadru invizibil pentru o pagină web. Și acest lucru va ajuta la aranjarea uniformă și frumoasă a textului, meniurilor, imaginilor etc.
Pentru o mai bună înțelegere a ceea ce încerc să vă spun, aruncați o privire la un exemplu de schelet de pagină web:

Asa de, cum să faci un tabel simplu în html?
Pentru a construi un tabel, trebuie să utilizați trei etichete:

MASA – această etichetă este necesară pentru a deschide masa. Acesta este un fel de recipient care conține alte elemente. Aici este îndoit, astfel încât este imposibil să-l dai seama fără o gogoașă. Nimic, o să-ți dai seama când vezi un exemplu.
Etichetă de închidere necesar.

Tabelul este format dintr-un rând

TR – creează un nou rând de tabel. Etichetă de închidere necesar.

TD – creează o nouă celulă în rând. Etichetă de închidere necesar.

Să ne uităm la un exemplu pentru a înțelege mai bine toate cele de mai sus:

Iată rezultatul:

Să explicăm totul.
Eticheta este deschisă înainte de fiecare nouă creare de tabel.

Cred că ți-ai dat seama? Dacă cineva a uitat ce este un atribut frontieră pe care îl folosesc împreună cu eticheta

Uită-te la câteva exemple a creat tabele si poti merge mai departe:

Rezultat:

Pentru a insera o imagine într-un tabel, trebuie să aveți cunoștințe de bază de bază despre cum o imagine este inserată într-un fișier HTML. Despre asta vorbesc în . Acum că știți nuanțele de bază ale unei imagini în HTML, puteți încerca să inserați o imagine într-un tabel. Acest lucru se poate face astfel:

în linie între etichete inserați imaginea.

rândul 1 celula 1

rândul 1 celula 2

Rezultat:

Cum să îmbinați celulele într-un tabel?

Pentru a îmbina celulele într-un tabel, trebuie să utilizați aceste atribute:
COLSPAN- specifică numărul de coloane.
Valoarea implicită este 1.
ROWSPAN- determină numărul de rânduri.
Valoarea implicită este 1.

uneste celuleleîn rândul de sus cu un atribut colspan :

Rezultat:

Cum se stabilesc dimensiunea mesei?

Pentru a seta înălțimea și lățimea unui tabel, utilizați următoarele atribute:

LĂŢIME- latimea mesei. Dimensiunea este specificată în pixeli sau ca procent.
ÎNĂLŢIME- inaltimea mesei. Dimensiunea este specificată în pixeli sau ca procent.

Rezultat:

Alinierea conținutului într-un tabel

Pentru a alinia conținutul (text, imagini) în interiorul tabelului, puteți utiliza următoarele atribute:

ALINIA– alinierea orizontală a conținutului din tabel.
A atribui ALINIA valorile sunt atribuite: stânga (implicit), centru ,dreapta.
stânga- apăsați conținutul în partea stângă;
centru - așezat în centru;
dreapta-împinge conținutul în partea dreaptă

VALIGN- alinierea verticală a conținutului din tabel.
A atribui VALIGN valorile sunt atribuite: sus, jos, mijloc.
top – apăsați conținutul în sus;
partea de jos – apăsați conținutul în jos;
mijloc – setați conținutul la mijloc

Rezultat:

Cum să faci un fundal de masă?

De asemenea, puteți seta fundalul tabelului pentru toate celulele sale combinate, precum și pentru fiecare celulă în mod individual. Puteți seta culoarea de fundal sau puteți seta imaginea. Există două atribute pentru fundal:

BGCOLOR- culoarea de fundal a întregului tabel sau pentru fiecare celulă în mod individual. Culoarea este specificată prin cod sau cuvânt.
FUNDAL- fundalul din tabel este umplut cu o imagine.

Atenţie: dacă doriți să setați culoarea de fundal sau imaginea de fundal a întregului tabel, atributele trebuie setate în etichetă

. Și dacă doar la o anumită celulă, atunci la etichetă

. Pentru o mai bună înțelegere, vezi un exemplu: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: Atenţie: dacă imaginea este mai mică decât celula, atunci se va repeta până când umple celula până la capăt. Dacă imaginea este mai mare decât celula, atunci fundalul imaginii va fi decupat pentru a se potrivi cu celula. Și, în sfârșit, să vă povestesc despre două atribute utile. În cazul în care doriți să creșteți brusc distanța dintre toate celulele, următoarele atribute vă vor ajuta: CELLPADDING– distanța dintre cadrul fiecărei celule de tabel html și materialul conținut în aceasta. rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 SPATIREA CELULULOR este distanța dintre marginile celulelor adiacente. rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Puff, spune-mi! Sper că am făcut față sarcinii și am explicat tot ce știam tabele html. Și vă recomand să fixați bine materialul. Încercați să vă creați propriul tabel sau, mai bine, un întreg cadru pentru o pagină web dintr-un tabel html. Toate cele bune! Mulțumesc că ai vizitat blogul meu Tabel - un set de date distribuite pe rânduri și celule. Majoritatea celulelor conțin date tabelare, restul conțin anteturi pentru rânduri și coloane care descriu conținutul. Pentru a crea un tabel într-un document HTML, utilizați eticheta , este un container care conține tot conținutul tabelului. Crearea tabelului începe întotdeauna cu rânduri, care sunt definite folosind eticheta , fiecare rând, la rândul său, este format din celule. Etichetă poate conține doar etichete pentru crearea celulelor. Există două etichete diferite în HTML pentru a crea celule, prima este . Această pereche înseamnă că am creat un rând în tabel și câte astfel de etichete vor fi scrise, vor fi atât de multe rânduri. Ei bine, înăuntru acum punem jos o altă pereche - . Această pereche înseamnă că am creat o coloană în acest rând, iar dacă în fiecare tr sunt scrise mai multe tds, atunci vor fi mai multe coloane în acest rând. Lesne de înțeles? Dacă nu, atunci să ne uităm la un exemplu despre cum funcționează totul aici... Să presupunem că vreau să creez un tabel cu studenți și note. Apoi scriem următoarele în interiorul etichetei : , creează celule obișnuite cu date. În mod implicit, etichetați conținutul aliniat la stânga. A doua etichetă pentru crearea celulelor este eticheta , vă permite să definiți celule care conțin anteturi pentru coloane sau rânduri, conținutul acestor celule este afișat cu text aldine și centrat. Etichete și poate include orice elemente HTML care sunt disponibile pentru utilizare în corpul documentului. Primul titlu Al doilea titlu rândul 1, celula 1 linia 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 Încerca " Tabel în cadrul unui tabel HTML are capacitatea de a crea tabele imbricate, adică tabele care se află în interiorul altor tabele. Pentru a face un tabel imbricat, trebuie să plasați codul tabelului pe care doriți să îl faceți imbricat în interiorul oricărei etichete . De exemplu, să luăm tabelul pe care l-am creat deja mai devreme și să plasăm acest cod în a doua celulă a celui de-al doilea rând: Primul titlu Al doilea titlu rândul 1, celula 1 linia 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 Primul titlu Al doilea titlu rândul 1, celula 1 linia 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 O zi bună tuturor, dragii mei prieteni. Cum merge vara? Sper ca toata lumea se descurca bine. Ei bine, astăzi vom continua să studiem elementele de bază ale html și astăzi va fi probabil ultima lecție pe această temă, pentru că atunci ne vom cufunda în CSS. Deci, vorbind de html, nu pot să nu vorbesc despre tabele, deoarece sunt și ele un subiect destul de important. Luați cel puțin același wordpress. În mod implicit, acest motor nu poate crea un tabel. Aveți nevoie fie de un add-on special (plugin), fie de un cod de program special (script). Dar putem face ceea ce vrem cu etichete simple. În general, astăzi vă voi spune cum să creați un tabel în html, deoarece acest lucru vă poate ajuta foarte mult. Îmi amintesc cum am creat primele mele site-uri folosind un aspect tabelar, de exemplu. antetul, barele laterale, subsolul și blocul de conținut erau doar elemente de tabel. Am menționat asta în articolul meu de pe . Adevărat, astăzi nu se mai obișnuiește să faci site-uri web folosind tabele, dar asta nu înseamnă că nu sunt necesare. Mai degrabă invers. Ceea ce este și mai bine este că nici măcar nu trebuie să desenezi nimic. Totul se face într-un blocnotes obișnuit (bine, sau altul, ca Notepad ++), și destul de ușor. În general, să trecem la treabă. Etichete Aici marcajul este puțin mai complicat decât în ​​alte etichete, dar totul este reținut rapid. Așa că ai grijă și nu te distra. Orice tabel este întotdeauna inclus într-o etichetă de pereche . Acestea. aceste semne dau comanda ca masa va fi amplasata aici. O etichetă de pereche este plasată în interiorul mesei Matematică Limba rusă Poveste Medvedev 3 5 5 Smirnov 5 5 5 Sokolov 3 2 3 Ce am făcut aici? Și am făcut patru rânduri (tr), fiecare dintre ele conține patru tabele (td). În primul bloc tr am scris numele disciplinelor academice, lăsând în același timp prima coloană goală pentru a nu sparge tabelul. Mai departe în fiecare prima pereche td inserăm numele elevilor și toate celelalte td completați scorurile în celula corespunzătoare. În general, scrieți acest lucru și salvați fișierul, apoi deschideți-l într-un browser, apoi veți înțelege totul cum se întâmplă. Dar intrând în document, vedem că tabelul nu seamănă prea mult cu ceea ce am planificat. Ce lipsește aici? Așa este - granițe. Dar nu-ți face griji. Vă voi spune despre asta mai jos. Dar de dragul aparențelor, vă voi arăta o altă etichetă care evidențiază și centrează datele în tabele. Această etichetă este scrisă ca

. Să evidențiem titlurile noastre în tabel. Pentru a face acest lucru, pur și simplu înlocuiți etichetele td, pe thîn acele locuri în care scriem numele și denumirile disciplinelor. Și să vedem ce putem face cu el. După cum am spus, acum aceste titluri sunt centrate și evidențiate. Pentru asta ne străduiam. În general, ne-am cam dat seama de etichete. Deși sunt și altele (vă puteți uita la htmlbook), dar nu mă voi concentra asupra lor. Atribute Desigur, așa ceva ca tabelele nu se poate lipsi de atribute speciale și vă voi arăta câteva dintre ele. frontieră Ei bine, aș vrea să încep cu ceea ce am vorbit mai sus, adică despre granițe. În mod implicit, nu sunt, așa că tabelul iese neprevăzut și nu este complet clar. Dar acest lucru poate fi remediat, iar atributul border, care este plasat direct în eticheta de deschidere, ne va ajuta în acest sens. . Faceți așa cum v-am arătat în exemplul de mai jos, adică setați valoarea atributului la border="1" . După ce faceți acest lucru, salvați rezultatul și rulați documentul. Bine? Este cu totul alta chestiune. Acum tabelul a căpătat contururi normale și arată așa cum ar trebui. Puteți experimenta cu diferite valori de frontieră și puteți vedea ce vi se potrivește cel mai bine în cazul dvs. Umplutură și spațiere (cellpadding și cellspacing) Este destul de firesc ca o afișare a unei mese pentru toate ocaziile să nu se potrivească tuturor. Dar putem schimba puțin asta, datorită a două atribute similare. Cellpadding="« - modifică distanța de la cadru în sine la conținutul din celulă. Astfel, toate celulele din tabel devin mai mari. Să scriem acest atribut în tabel și să setăm valoarea la 5 și să vedem cum diferă de versiunea originală. Hop. Vedea? Distanța a crescut. în acest fel, puteți înlocui singuri valorile dorite, extinzând astfel celulele. Cellspacing="" - modifică distanța dintre celulele tabelului, iar valorile sale sunt măsurate și în pixeli. Să încercăm să setăm și acest atribut la 5 și să vedem ce se întâmplă. Bine? Este clar ideea? După cum puteți vedea, distanța dintre celule a devenit mai mare. Este exact ceea ce ne străduim. Aliniere Ei bine, unde suntem fără acest atribut minunat care ne permite să aliniem totul în locuri diferite? Align funcționează exact la fel ca și cu celelalte etichete prin care am trecut anterior și are trei valori: Centru Dreapta Să notăm fiecare dintre valori și să vedem cum va fi distribuit tabelul. Bine? Totul pare să funcționeze și cred că ar trebui să fie clar. Dar dacă aveți întrebări, nu ezitați să întrebați. Ei bine, asta este practic tot ce am vrut să vă spun despre mese astăzi. Sper că totul a fost clar pentru tine. Ei bine, dacă doriți să studiați în detaliu toate complexitățile lucrului cu HTML și CSS și să învățați cum să creați site-uri web pe cont propriu, atunci vă recomand cu tărie să vă uitați la curs video excelent pe această temă. Pentru un începător, acesta este cel mai de înțeles, ca și pentru mine, curs video, în care pur și simplu vei mesteca totul și vei pune pe rafturi. Ei bine, îmi termin lecția pentru azi. Nu uitați să vă abonați la actualizările blogului meu pentru a nu pierde nicio informație sau știre importantă. Și ne vedem în alte articole. Succes și la revedere! Cu stimă, Dmitri Kostin. Continut Asemanator: Toate nuanțele actualizării unui Android pe o tabletă Este posibil să instalați o versiune Android pe o tabletă Învățați PHP și MySQL în mod corect Alegerea unei baze de date Servere de căutare software Cum să deblochezi fișierele și să elimini procesele de sistem