Cod pentru generarea tabelelor în html. Atribute și proprietăți și

Tabelele sunt unul dintre cele mai importante, dar complexe elemente care ar trebui să fie prezente pe paginile web. Cu ajutorul lor, este convenabil să prezentați informații importante și utile într-o formă destul de concisă. Desigur, majoritatea editorilor din șabloane care rulează pe diverse motoare vă permit să inserați automat un tabel într-o pagină a unui site web sau într-o publicație separată, dar ce se întâmplă dacă designul unei resurse web și paginile acesteia sunt create de la zero? Atunci un maestru începător se poate confrunta cu o problemă: cum să facem Să ne dăm seama cum să creăm acest element corect și rapid.

Alegerea unui editor

În primul rând, atunci când începeți să creați un tabel, ar trebui să vă decideți asupra editorului în care veți lucra. Desigur, cel mai simplu mod este să alegi programul în care creezi codul site-ului principal. Dar cel mai bine este să folosiți un blocnotes vechi bun în aceste scopuri.

Puteți întreba de ce vă complicați viața, deoarece dacă faceți totul dintr-o dată în editor, atunci puteți vedea rezultatul imediat și puteți folosi, de asemenea, sugestiile programului.

Da, acest lucru este adevărat, dar prin crearea unui tabel de la zero, nu numai că veți putea să studiați temeinic principiul însuși al creării sale, dar și să evitați greșelile de scriere și erorile enervante din codul principal. Uneori se întâmplă ca cursorul să se miște accidental în jos, iar în timpul procesului de scriere o eroare se strecoară în cod, care uneori este greu de găsit. După ce ați creat un tabel în Notepad, puteți copia codul acestuia și îl puteți lipi în locul de care aveți nevoie.

Algoritm pentru crearea unui tabel

Mai întâi, să creăm un scurt algoritm despre cum să facem un tabel în HTML. Acest lucru este necesar pentru a înțelege succesiunea fiecărui pas. Apoi ne vom da seama exact cum să executăm fiecare dintre puncte.

Să începem cu etapele pregătitoare.

1. Desenați o reprezentare schematică a tabelului pe o bucată de hârtie.

2. Numărați numărul de rânduri și celule. Dacă numărul acestora din urmă este diferit, îl numărăm pentru fiecare rând separat.

3. Determinați numărul de celule antet din rând (de exemplu, celulele „Nr.”, „Nume” etc.).

4. Notăm principalii parametri ai tabelului - culoare, înălțime și lățime, alinierea textului - în general, tot ceea ce vi se pare necesar.

1. Introduceți etichete de tabel.

2. Introduceți etichete de linie în funcție de cantitatea de care aveți nevoie.

3. În rânduri, introduceți etichete de celule (regulate și cu majuscule), tot pe baza numărului care este scris pe hârtie.

4. Setați parametrii pentru tabel ca întreg.

5. Dacă este necesar, setați indicatori pentru celule individuale.

6. Umpleți celulele noastre cu text.

Creați un tabel

Deci, ați ales un editor, acum să ne dăm seama cum să creați un tabel în HTML. O etichetă cu care se inserează un tabel în codul paginii (

), este împerecheat, adică construcția noastră începe cu această etichetă și se termină
.

După ce am introdus etichetele de tabel, trecem la crearea rândurilor și celulelor.

Să observăm imediat că aceste elemente sunt, de asemenea, împerecheate. Etichetă specifică liniile și - celule.

Pentru celulele antet, utilizați un element pereche .

După cum am menționat deja, primul lucru pe care ar trebui să-l faceți este să creați rândurile, apoi să scrieți celulele în ele. Pentru a nu confunda, vă recomandăm fie să faceți una sau două linii de indentare între fiecare bloc, fie să scrieți un nou bloc de elemente folosind tasta „Tab”.

Cum ar putea arăta asta? Ceva de genul asta:

  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Nu.Nume
    1;
  • Ivanov
    .

După cum puteți vedea, nu este nimic complicat în acest sens. Principalul lucru este să nu vă confundați cu numărul de rânduri și celule. În caz contrar, masa poate deveni înclinată.

Am discutat despre crearea unui tabel în HTML, acum putem trece la parametrii atât ai matricei în sine, cât și a rândurilor și celulelor acesteia.

Opțiuni de masă

Când este scris codul, ar trebui să acordați atenție următoarelor puncte: alinierea în chenare, fundal, text etc.

Parametrii tabelului sunt specificați în etichetă

. Acestea includ:

1. Chenar - lățimea chenarului. Specificat ca un număr întreg. În mod implicit, limitele oricărui tabel sunt zero.

2. Bordercolor - culoarea chenarului. Poate fi specificat fie printr-un cod de culoare hexazecimal (#00008B), fie prin numele său în engleză (DarkBlue). În mod implicit, este întotdeauna gri.

3. Bgcolor - De asemenea, specificat folosind un cod sau un nume.

4. Aliniere - alinierea textului în spatele tabelului. Implicit - aliniat la stânga. Există următoarele opțiuni pentru acest parametru:

  • stânga - curge în jurul dreptului;
  • dreapta - curge în jurul stângi;
  • centru - afișați tabelul în centru fără a fi înfășurat.

5. Lățimea și înălțimea - lățimea și înălțimea mesei. Poate fi specificat fie în pixeli, fie ca procent (față de dimensiunea ferestrei browserului).

Când prescrieți acest sau acel indicator, ar trebui să acordați o atenție deosebită designului. După specificarea parametrului, trebuie să existe un semn „egal”, după care valoarea specificată este indicată între ghilimele.

În ceea ce privește culoarea textului, acesta este proiectat în același mod ca textul obișnuit în format HTML.

Exemplu de proiectare a mesei:

;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • ;
  • Nu.Nume
    1;
  • Ivanov
    .

    Opțiuni de rând

    Deci, ne-am dat deja seama cum să facem un tabel în HTML și să îi specificăm parametrii principali. Dar dacă trebuie să evidențiem o linie? Ar trebui să fie formatat diferit de textul principal al tabelului?

    Parametrii de linie sunt scriși în etichetă exact la fel ca datele din tabel. Următoarele variabile pot fi setate pentru o linie:

    1. Știți deja border, bordercolor și bgcolor.

    2. Aliniere - alinierea textului într-o linie. Poate lua valorile stânga, centru și dreapta.

    3. Valign - această etichetă aliniază textul pe verticală. Acceptă următoarele valori:

    • sus - textul este aliniat la marginea de sus;
    • mijloc - în centru;
    • jos - de-a lungul marginii de jos.

    Exemplu de format de linie:

    • ;
    • Nu.;
    • Nume;
    • .

    Opțiuni pentru celule

    Iar ultimul lucru la care merită să fie atenți pentru cei care doresc să știe cum să facă un tabel în HTML sunt parametrii celulelor individuale, atât regulate, cât și cu majuscule. În esență, totul se face exact la fel ca pentru un tabel sau un rând. Singurul lucru este că se adaugă încă două elemente importante:

    1. Colspan - acest parametru specifică numărul de coloane pe care celula le poate întinde.

    2. Rowspan - indică numărul de rânduri pe care le ocupă această celulă.

    Deoarece designul nu este diferit de scrierea unei linii, nu vom da un exemplu de cod.

    Concluzii

    A face o masă nu este atât de dificilă pe cât ar părea la prima vedere. Principalul lucru atunci când scrieți codul său este perseverența și atenția.

    În ceea ce privește modul de inserare a unui tabel în HTML, trebuie doar să copiați și să lipiți codul acestuia exact în locul de pe pagina dvs. unde credeți că ar trebui să fie localizat.

    Nu vă fie frică să experimentați și în curând veți stăpâni tehnica de a crea mese la perfecțiune. Noroc!

    Un tabel este unul dintre instrumentele principale pentru crearea paginilor web.

    Fără a folosi CSS, doar folosind tabele puteți crea pagini cu design complexe. Dacă ați finalizat seria de lecții Realizarea unui site web - primii pași, atunci înțelegeți despre ce vorbim.

    Orice tabel este un set de rânduri și coloane, la intersecția cărora există celule. De exemplu:

    Să ne uităm la tabelul nostru din perspectivă HTML:

    • tabelul în sine este specificat folosind etichete
      ,
    • tabelul are un nume - etichete ,
    • tabelul este format din rânduri - etichete ,
    • fiecare rând este format din coloane - etichete ,
    • coloanele au nume situate pe primul rând - etichete .
    Să creăm un tabel în care indicăm ca conținut intersecția numerelor rândurilor și coloanelor:

    Rezultat:

    După cum puteți vedea, nu a ieșit foarte frumos, îl vom decora.

    Parametrii tabelului HTML: indentare, lățime, culoare de fundal, cadru

    În acest scop eticheta

    Există o serie de parametri:

    • lăţime- setează lățimea tabelului (în pixeli sau % din lățimea ecranului),
    • bgcolor- setează culoarea de fundal a celulelor tabelului,
    • fundal- umple fundalul tabelului cu un model,
    • frontieră- setează un chenar cu lățimea specificată (în pixeli) în jurul întregului tabel,
    • umplutură celulară- setează umplutura în pixeli între marginea celulei și conținutul acesteia.
    Să aplicăm acești parametri:

    Rezultat:

    Acest lucru este mai bine, dar tabelul nostru este apăsat pe marginea stângă a ferestrei, la fel ca și textul din el. Să reparăm acest lucru adăugând încă trei parametri:

    • alinia- setează alinierea tabelului: stânga (dreapta), dreapta (stânga), centru (centru),
    • spațierea celulelor- setează distanța dintre celulele tabelului (în pixeli),
    • umplutură celulară- setează distanța dintre text și chenarul interior al celulei tabelului (în pixeli).
    Să aplicăm acești parametri:

    Rezultat:

    Vă rugăm să rețineți că tabelul are chenare duble. Dacă specificați cellspacing="0", atunci limitele vor lua forma obișnuită:

    Rezultat:


    În general, doi parametri sunt responsabili pentru granițe:

    • cadru- setează tipul de cadru în jurul mesei și poate lua următoarele valori:
      • gol- fara cadru,
      • mai sus- doar cadrul de sus,
      • de mai jos- numai cadru de jos,
      • hsides- doar cadrele de sus și de jos,
      • contra- doar cadre din stânga și din dreapta,
      • lhs- doar cadru din stânga,
      • rhs- doar cadru din dreapta,
      • cutie- toate cele patru părți ale cadrului.
    • reguli- stabilește tipul de limite interne ale tabelului și poate lua următoarele valori:
      • nici unul- nu există granițe între celule,
      • grupuri- limitele numai între grupuri de rânduri și grupuri de coloane (vor fi discutate puțin mai târziu),
      • rânduri- limite numai între linii,
      • cols- limitele sunt doar între coloane,
      • toate- afișați toate marginile.
    Folosind acești parametri, puteți seta limitele așa cum doriți. Aici vom da un singur exemplu, experimentați singuri cu toate.

    Rezultat:


    Trebuie remarcat faptul că marginile sunt afișate ușor diferit în diferite browsere.

    Etichetele HTML tr și td

    Tabelele sunt formate rând cu rând. Prin urmare, parametrii specificați în linie (tr) își extind efectul la toate celulele (td) ale liniei. Șirurile pot avea trei parametri:

    • alinia- aliniază textul în celule orizontal, poate lua valori: stânga (dreapta), dreapta (stânga), centru (centru),
    • valini- aliniază textul în celule pe verticală, poate lua valori: sus (sus), jos (jos), centrat (mijloc),
    • bgcolor- setează culoarea liniei.
    Să ne uităm la un exemplu:
    • lăţime- setează lățimea coloanei (în pixeli sau ca procent, unde lățimea tabelului este luată ca 100%),
    • înălţime- setează înălțimea celulei și toate celulele din același rând vor deveni de această înălțime.
    De exemplu, să adăugăm la codul nostru, în etichete

    Rezultat:


    Trebuie remarcat faptul că, dacă nu setați lățimea și înălțimea, tabelul va fi format în funcție de conținut (așa a fost cazul în exemplele anterioare).

    Această lecție s-a încheiat, exersați crearea și proiectarea tabelelor, veți avea nevoie de aceste abilități în lecția următoare, unde vom crea tabele cu structuri complexe.

    Tabelele în HTML sunt atât de funcționale încât le puteți folosi pentru a configura site-uri web întregi (citiți). Acum vom vorbi despre inserarea tabelelor HTML simple într-o pagină web, analizând doar marcajul, dar fără a atinge designul, deoarece este mai bine să decorați tabelele folosind stiluri CSS.

    Etichete și atribute de tabel

    Iată elementele de bază de care aveți nevoie pentru a crea tabele:

    acești parametri
    1 2 3
    - un recipient în interiorul căruia se află masa (la fel ca
      pentru marcat sau
        pentru liste numerotate).
      1. frontieră- un atribut care determină grosimea ramelor. Este mai bine să utilizați în schimb proprietatea border CSS.
    specifică semnătura tabelului. Nu trebuie să utilizați un container, dar dacă tot decideți să dați titlul tabelului, atunci plasați-l imediat după etichetă , în afara celulelor și rândurilor.
  • - o etichetă pereche care conține un rând de tabel (celule situate la același nivel orizontal).
  • , vor fi atât de multe celule în el: o etichetă - o celulă.
  • vă permite să grupați coloane, rapid și fără a înfunda codul, atribuindu-le caracteristici comune. Folosind un container, puteți separa părțile logice ale unui tabel unele de altele. Așezat după etichetă creează o nouă linie. Mai departe în imbricat
    - o etichetă care creează o celulă antet de tabel. În exterior, conținutul său diferă de conținutul din alte celule - de obicei textul din interior Browserul îl evidențiază cu caractere aldine și îl plasează în centru.
  • - un container cu care se creează o celulă simplă. Câte astfel de etichete va conține o linie (tag
    , dacă nu este acolo, atunci după .
  • folosit în același scop ca . poate contine , dar nu invers.
  • span- un atribut care specifică numărul de coloane cărora li se aplică proprietățile containerului
  • .
  • , Şi - containere care vă permit să împărțiți masa în părțile superioare (titluri), principale (corp) și, respectiv, inferioară (finală). Într-un tabel HTML, secvența acestor etichete este aceeași cu succesiunea containerelor , Şi
    în documentul HTML.
  • colspan necesare pentru a combina celule într-un rând. Valoarea atributului conține un număr care specifică numărul de celule care trebuie îmbinate.
  • lungimea rândurilorîmbină celulele în coloane.
  • Exemplu de creare a unui tabel

    Creați un document HTML și copiați următorul cod în el:

    Exemplu de tabel

    Instrumente de creare a site-urilor web
    ScopInstrument
    MarcareHTMLXHTML
    ÎnregistrareCSS
    DezvoltarePHPPiton


    În browser, documentul va arăta astfel:

    Să ne dăm seama ce linii de cod sunt responsabile pentru ce.

    • - a deschis masa, dându-i grosimea ramelor.
    • - l-au intitulat.
    • - a deschis linia.
    • - a creat o celulă cu un design de antet.
    • - a creat o a doua celulă antet în rând. Parametrul colspan a indicat că această celulă ar trebui să se întinde pe două orizontal.
    • - a închis linia. Liniile rămase au fost create în același mod.
    • - a adăugat un al doilea rând al tabelului cu celule obișnuite, mai degrabă decât antet. Rândurile și celulele ulterioare au fost inserate în mod similar.
    • Instrumente de creare a site-urilor web
      Scop Instrument
      Marcare HTML XHTML
      - a închis masa.
    se află corpul mesei. Corpul este format din rânduri și coloane. Tabelul este completat rând cu rând.

    Fiecare etichetă

    sunt create coloane. Puteți crea mai multe coloane. În acest caz, trebuie să monitorizați numărul de coloane din fiecare rând. De exemplu, dacă primul rând avea 5 coloane, atunci rândurile următoare ar trebui să aibă și 5 coloane. În caz contrar, masa va pluti. Este posibil să fuzionați celule.

    Cum se face un tabel în html

    Iată un exemplu, cod html:

    Exemplu de tabel
    Coloana 1 Coloana 2

    Acordați atenție celulei

    . Folosim atributul special colspan pentru a acoperi celulele pe orizontală. Valoarea sa numerică indică numărul de coloane care trebuie îmbinate. Există și un analog al acestui atribut: tag (antetul tabelului), unde trebuie să introduceți și colspan. Rezultatul va fi același. Dar adesea folosesc td obișnuit.

    Acum să aruncăm o privire mai atentă la toate atributele etichetei

    .

    Etichetă atribute și proprietăți

    Pentru a deschide eticheta

    Puteți specifica diferite atribute.

    1. Proprietatea align="parameter" - setează alinierea tabelului. Poate lua următoarele valori:

    În exemplul de mai sus, am aliniat tabelul la centru align="center" .

    Acest atribut poate fi aplicat nu numai tabelului, ci și celulelor individuale ale tabelului

    . Astfel, alinierea va fi diferită în diferite celule.

    De exemplu

    , , , sau
  • cols - linia este afișată între coloane
  • niciunul - toate granițele sunt ascunse
  • rânduri - este trasată o chenar între rândurile de tabel create prin etichetă
  • 12. Property width="number" - setează lățimea tabelului: fie în pixeli, fie în procente.

    13. Proprietate class="class_name" - puteți specifica numele clasei căreia îi aparține tabelul.

    14. Property style="styles" - stilurile pot fi setate individual pentru fiecare tabel.

    Acum este timpul să vă scufundați în interiorul tabelului și să priviți atributele celulelor din tabel. Aceste atribute ar trebui să fie scrise în eticheta de deschidere

    Şi Sunt disponibile aceleași opțiuni ca și pentru va fi aplicat ierarhic tuturor
    sau linii
    ... ... ...

    2. Proprietate background="URL" - setează imaginea de fundal. În loc de URL, trebuie scrisă adresa imaginii de fundal.

    Exemplu

    Exemplu de tabel
    Coloana 1 Coloana 2

    Se convertește în următoarele pe pagină:

    În exemplul de mai sus, imaginea noastră de fundal se află în folderul img (care se află în același director cu pagina html), iar imaginea se numește fon.gif. Vă rugăm să rețineți că în etichetă am adăugat style="color:white;" . Deoarece fundalul este aproape negru, pentru a preveni amestecarea textului cu fundal, am făcut textul alb.

    3. Proprietatea bgcolor="color" - setează culoarea de fundal a tabelului. Puteți alege orice culoare din întreaga paletă (vezi codurile și denumirile culorilor html)

    4. Property border="number" - setează grosimea chenarului tabelului. În exemplele anterioare, am specificat border="1" , ceea ce înseamnă că grosimea marginii este de 1 pixel.

    5. Proprietate bordercolor="color" - setează culoarea chenarului. Dacă border="0" atunci nu va fi nicio chenar și culoarea chenarului nu va avea nicio semnificație.

    6. Proprietate cellpadding="number" - indentare de la cadru la conținutul celulei în pixeli.

    7. Proprietate cellspacing="number" - distanța dintre celule în pixeli.

    8. Proprietate cols="number" - numărul de coloane. Dacă nu îl setați, browserul însuși va determina numărul de coloane. Singura diferență este că specificarea acestui parametru va grăbi cel mai probabil încărcarea tabelului.

    9. Proprietate frame="parameter" - cum să afișați chenarele în jurul tabelului. Poate lua următoarele valori:

    • gol - nu desenați granițe
    • chenar - chenar în jurul mesei
    • deasupra - chenar de-a lungul marginii de sus a mesei
    • dedesubt - chenar în partea de jos a tabelului
    • hsides - adăugați doar margini orizontale (sus și jos a tabelului)
    • vssides - desenați doar chenaruri verticale (în stânga și în dreapta tabelului)
    • rhs - chenar numai pe partea dreaptă a mesei
    • lhs - chenar numai pe partea stângă a mesei

    10. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie în procente.

    11. Reguli de proprietate="parametru" - unde se afișează chenarele dintre celule. Poate lua următoarele valori:

    • toate - se trasează o linie în jurul fiecărei celule de tabel
    • grupuri - este afișată o linie între grupurile formate din etichete
    .

    Atribute și proprietăți

    1. Proprietatea align="parameter" - setează alinierea unei celule individuale de tabel. Poate lua următoarele valori:

    • alinierea stânga - stânga
    • aliniament centru - centru
    • alinierea dreapta - dreapta

    2. Proprietate background="URL" - setează imaginea de fundal a celulei. În loc de URL, trebuie scrisă adresa imaginii de fundal.

    3. Proprietatea bgcolor="color" - setează culoarea de fundal a celulei.

    4. Proprietate bordercolor="color" - setează culoarea marginii celulei.

    5. Proprietatea char="letter" - specifică litera din care trebuie făcută alinierea. Valoarea atributului align trebuie să fie setată la char.

    6. Proprietatea colspan="număr" - setează numărul de celule orizontale care trebuie îmbinate.

    7. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie ca procent.

    8. Property width="number" - setează lățimea tabelului: fie în pixeli, fie ca procent.

    9. Proprietate rowspan="număr" - setează numărul de celule verticale care trebuie îmbinate.

    10. Proprietatea valign="parameter" - alinierea verticală a conținutului celulei.

    • sus - aliniați conținutul celulei la marginea de sus a rândului
    • aliniament mijloc - mijloc
    • jos - alinierea la marginea de jos
    • linia de bază - alinierea la linia de bază
    Nota 1

    Pentru etichetă

    . Parametri pentru o etichetă
    înăuntrul lui

    Cum să preveniți lipirea marginilor celulelor dintr-un tabel

    Dacă utilizați o chenar (chenar de celulă) și zero padding între celule, acestea sunt încă lipite împreună și obțineți un chenar dublu. Pentru a evita acest lucru, trebuie să specificați border-collapse: collapse în stilurile de tabel:

    ...

    Dragă cititor, acum ați aflat mult mai multe despre eticheta html table. Acum vă sfătuiesc să treceți la următoarea lecție.

    L orice tabel în HTML este un set de rânduri și coloane la intersecția cărora există celule. Crearea tabelelor în HTML este destul de simplă, trebuie doar să vă imaginați modelul final. În HTML, tabelele sunt folosite nu numai pentru a prezenta date, ele pot fi folosite pentru a plasa blocuri de text, imagini etc. pe o pagină web, de ex. cu ajutorul lor puteți crea aspectul paginii în sine.

    Element TABLE, creați un tabel

    Pentru a crea tabele în HTML, elementul masă, și tot codul (conținutul său) tabelele sunt situate între etichete . Atributele acestui element stabilesc valori pentru întregul tabel:

    • fundal- este specificată o imagine (URL), care poate fi fundalul întregului tabel;
    • bgcolor- culoarea fundalului tabelului, setată dacă nu este specificat fundalul sub formă de imagine;
    • frontieră- grosimea liniilor de masă, dacă sunt necesare margini vizibile;
    • culoarea chenarului- culoarea liniilor de masă;
    • umplutură celulară- distanța de la textul din interiorul celulelor la marginile celulei;
    • spațierea celulelor- distanta de la marginile tabelului la marginile exterioare ale celulelor (in interiorul tabelului);
    • lăţime- setează lățimea mesei în px sau % .

    Să scriem un exemplu de cod pentru un tabel cu fundal albastru, o grosime de linie de 1px în alb, umplutură în interiorul și exteriorul celulelor de 2px, lățime 100% din pagină:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Adăugați o linie

    Fiecare tabel trebuie să aibă cel puțin un rând, acesta este specificat prin etichete . În exemplul următor ne uităm la un exemplu de adăugare a unei linii:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Adăugarea de celule

    Celulele formează coloane verticale ale tabelului; ele sunt desemnate prin etichete . Adăugați celule în tabelul nostru:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    Celula nr. 1
    Celula nr. 2
    Celula nr. 3

    Vom vedea tabelul rezultat:

    Concatenarea șirurilor

    În unele cazuri, poate fi necesar să se întindă o coloană pe mai multe rânduri, pentru aceasta, se folosește atributul lungimea rândurilor, a cărui valoare determină numărul de rânduri necesare pentru îmbinare. Să ne uităm la un exemplu:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    rowspan="2" >Rândurile nr. 1 și nr. 2 sunt îmbinate
    Celula nr. 1
    Celula nr. 2

    Celula nr. 3
    Celula nr. 4

    Linia nr. 3
    Celula nr. 5
    Celula nr. 6

    Browserul va afișa:

    Liniile #1 și #2 sunt îmbinate Celula nr. 1 Celula nr. 2
    Celula nr. 3 Celula nr. 4
    Linia nr. 3 Celula nr. 5 Celula nr. 6

    Îmbinarea coloanelor

    Coloanele sunt combinate folosind același principiu, folosind doar atributul colspan. Să ne uităm la un exemplu:

    bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

    colspan="2" >Coloanele nr. 1 și nr. 2 sunt îmbinate
    Coloana #3

    Celula nr. 1
    Celula nr. 2
    Celula nr. 3

    Celula nr. 4
    Celula nr. 5
    Celula nr. 6

    Browserul va afișa:

    Atribute colspanŞi lungimea rândurilor poate fi folosit simultan. În browser va arăta astfel:

    Sau cam asa:

    Încercați să scrieți singur codul!

    Dimensiunile și alinierea mesei

    Înălțimea și lățimea pot fi setate atât pentru întregul tabel, cât și pentru rândurile și coloanele individuale, acest lucru se face folosind atribute deja familiare lăţimeŞi înălţime, valorile sunt specificate atât în ​​pixeli, cât și în procente.

    Alinierea orizontală a tabelului este specificată de atribut alinia, semnificațiile vă sunt deja familiare: stânga, centru, dreapta. Și pentru a alinia textul în celulele tabelului, atributul de aliniere orizontală alinia trebuie aplicat fiecărei etichete td. Utilizarea CSS face acest lucru mult mai ușor. Pentru a alinia vertical conținutul celulelor, utilizați atributul valini. De asemenea, are propriile valori - alinierea verticală la centru mijloc, deasupra topși de-a lungul fundului fund linia de bază (linia pe care se află textul liniei curente).

    Fundal de masă

    Imaginea de fundal sau culoarea poate fi setată și pentru întregul tabel sau pentru o celulă individuală, totul depinde de obiectivele pe care le urmăriți. Acest lucru este stabilit - pentru imagine - de atribut fundal, a cărui valoare specifică calea către fișierul grafic necesar. Pentru un fundal de culoare - atribut bgcolor, aici valoarea este numele culorii.

    În concluzie

    Practic, asta este tot ce ai nevoie pentru nivelul de intrare. La sfârșitul secțiunii despre construirea tabelelor în HTML, se încheie prima cunoaștere a limbajului HTML. Prin folosirea tabele în HTML Puteți crea șabloane simple de pagini web, așa că vă sugerez să creați primul dvs. complet chiar acum. Materialul acoperit este suficient pentru asta. Înainte spre cucerirea hiperspațiului!


    / Ceea ce nu poți crea un site web fără: ∼ ∼