Când creați pagini web, este adesea necesar să prezentați un anumit conținut al paginii sub formă de tabele. Uneori, tabelele sunt folosite pentru a crea o structură a paginii. Această abordare nu este complet corectă, deoarece tabelele nu au fost inițial destinate poziționării elementelor de pagină. În acest scop, este mai bine să utilizați instrumentele CSS. În unele cazuri, mesele sunt indispensabile și convenabile pentru furnizarea de informații.
Pentru crearea de tabele în HTML, eticheta corespunde
. Dar probabil că deja știți că mesele constau în linii și celule. Prin urmare, pentru a crea o tabelă, avem nevoie de două etichete suplimentare: o etichetă |
care este responsabil pentru crearea de siruri de caractere, și eticheta, | responsabil pentru crearea celulelor.
Pentru a vedea cum funcționează totul în practică, vom crea un tabel format din două rânduri și patru celule. Codul mesei noastre va fi următorul:
Pentru a vedea ce iese din ea, creați o pagină html folosind codul de mai jos.
Ar trebui să obțineți următoarele:
După cum puteți vedea, masa noastră nu arată deloc ca o masă. Toate astea, pentru că etichetele noastre
și | au o mulțime de atribute care trebuie specificate, astfel încât tabelul nostru să aibă un cadru, fundal, dimensiuni etc.
În primul rând, vom examina atributele inerente tagurilor
. Pentru a vedea cum se va schimba tabelul nostru, puteți adăuga aceste atribute la etichete și actualizarea paginii, uitați-vă la modul în care va arăta tabelul în browser. Pentru comoditate, nu voi include tot codul în pagină, ci doar codul care se referă la etichetă adică ceea ce ne vom schimba.
Și așa eticheta
are următoarele atribute:
border - specifică lățimea cadrului de masă în pixeli, scrisă astfel:
.
bordercolor - culoarea cadrului tabelului, acest atribut nu este acceptat de toate browserele, astfel încât este posibil să nu vedeți culoarea de margine specificată:
Am setat lățimea cadrului la 2 pixeli, albastru, tabelul va arăta astfel:
width - stabilește lățimea mesei în pixeli sau procente:
înălțime - înălțimea mesei în pixeli sau procente:
Lățimea tabelului va fi de 250 de pixeli, iar înălțimea de 150 de pixeli, tabelul va arăta astfel:
alinierea - alinierea mesei;
aliniere = stânga - masa va fi aliniată spre stânga;
align = right - masa va fi aliniată spre dreapta:
Tabelul va arăta astfel:
fundal - cu acest atribut, puteți specifica o imagine care va fi fundalul tabelului.
De exemplu, salvați imaginea mică pe care o vedeți în paranteze () în dosarul în care aveți pagina cu tabelul și la etichetă
add background = "fon.gif" tot cod:
Tabelul va arăta astfel:
sellpadding - un atribut care specifică indicele stânga, dreapta, superioară și inferioară din interiorul celulei. De exemplu, dacă eticheta noastră
adaugă sellpadding = 10, textul scris în interiorul celulelor va fi indentat.
cellspacing - specifică spațiul dintre celulele din tabel.
Dacă vă uitați la masa noastră, veți vedea că există un spațiu mic între cadrele celulă, acesta este spațiul dintre celule, este setat implicit. Pentru ao elimina suficient în etichetă
pentru a scrie cellspacing = 0. Codul total:
Ca rezultat, celulele noastre s-au unit unul de celălalt, iar textul din interiorul celulelor a fost indentat:
hspace - stabilește decalajul de la masă, stânga și dreapta, în pixeli, este scris astfel: hspace = 20
nowrap - interzice transferul de cuvinte în celulă, scris pur și simplu acum
Ultimele două atribute sunt folosite extrem de rar, așa că nu afișez codul cu ele.
Acum, ia în considerare atributele etichetei
, unele dintre ele sunt aceleași cu atributele tagului
lățimea - lățimea celulei în pixeli sau în procente.
înălțime - înălțimea celulei în pixeli sau procente.
De exemplu, setați lățimea primei celule a primei linii la 30% - latime = 30%. și înălțimea primei celule a liniei a doua în 100px. Codul va fi:
Masa noastră va arăta astfel:
Rețineți că este suficient să setați înălțimea sau lățimea la o singură celulă, iar toate celulele din acel rând sau coloană vor avea aceeași dimensiune. Prin urmare, dacă trebuie să specificați, de exemplu, o anumită înălțime a celulelor, atunci este suficient să specificați acest parametru pentru o celulă și toate celelalte celule ale liniei vor fi aceleași.
aliniază - aliniază conținutul celulelor, are următoarele valori:
align = "lef" - conținutul celulei va fi aliniat la stânga;
align = "right" - conținutul va fi aliniat la dreapta;
align = "center" - conținutul va fi aliniat la centrul celulei.
Adăugați aceste atribute și valori în codul nostru și aliniați conținutul 1 - st la marginea din stânga a celulei (conținutul aliniat la stânga ale implicit, dar în unele cazuri este necesar acest atribut), conținutul de 2 - lea celula Aliniat dreapta, și a 4- în centru.
bgcolor - cu acest atribut puteți seta culoarea celulei.
fundal - setează imaginea ca fundal de celule.
Cu aceste atribute pe care le-am întâlnit deja, având în vedere atributele etichetei . Ele funcționează în același mod, doar în acest caz, au setat fundalul celulei. De exemplu, setați culoarea de fundal a celei de-a doua celule la galben și setați imaginea de fundal a celei de-a patra celule ca imagine următoare ().
Pentru ca acest lucru să codul nostru pentru a adăuga atributele necesare pentru celulele noastre bgcolor = „# FFFF00“ pentru a 2-a celulei și de fond = „fon.jpg“ pentru celula de 4-lea. Ca rezultat, masa noastră va arăta astfel:
După cum puteți vedea, în ciuda faptului că am setat fundalul tabelului însuși, dacă vom seta fundalul celulelor din tabel, va fi afișat fundalul pe care l-am setat pentru celule.
bordercolor - Specifică culoarea frontierei celulei.
Cu acest atribut ne-am întâlnit, luând în considerare atributele etichetei . Vă reamintesc că nu funcționează în toate browserele. Rețineți că eticheta | nu există niciun atribut de frontieră care să denumească cadrul celular. Setați culoarea cadrului celui de-al doilea element roșu pentru aceasta, adăugați atributul bordercolor = "# FF0000" în a doua celulă.
Există încă un atribut pentru alinierea conținutului celulelor:
valign - aliniază conținutul celulelor pe verticală.
Are următoarele semnificații:
valign = "sus" - alinierea conținutului celulei de sus;
valign = "bottom" - alinierea conținutului celulei la fund;
valign = "mijloc" - aliniere în mijlocul celulei;
valign = "linia de bază" - aliniați conținutul celulei cu linia de bază.
Adăugați aceste atribute la fiecare dintre cele 4 celule.
Masa noastră va arăta astfel:
Ultimul lucru pe care trebuie să-l luăm în considerare în această lecție este unirea celulelor de masă. Pentru a combina mai multe celule într-un rând, există un atribut colspan = "" unde în citate este specificat numărul de celule care urmează să fie combinate.
Pentru a îmbina celulele pe verticală, adică într-o coloană, trebuie să utilizați atributul rowspan = "" unde ghilimele indică numărul de celule pe care doriți să le îmbinați.
Pentru a vedea cum funcționează aceasta, creați un nou tabel care conține trei rânduri de câte trei celule fiecare. Codul pentru acest tabel va fi următorul:
Acum îmbinați celulele 1 și 2 în rând și celulele 3, 6 și 7 din rând. Codul mesei noastre va fi următorul:
Rețineți că etichetele celulei care este îmbinată nu sunt scrise. Masa noastră va arăta astfel:
Acestea au fost ultimele atribute ale celulelor. După cum puteți vedea atributele etichetelor și | set. Acest lucru vă permite să plasați conținut diferit în tabele, poziționați-l și decorați-l după cum este necesar.
Sarcină. Creați o pagină pe eșantion, consultați Anexa 2.
Articole similare
Trimiteți-le prietenilor:
| | |