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 (
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ă
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ă
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ă
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
.
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 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: 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ă: În general, doi parametri sunt responsabili pentru granițe: Rezultat: 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: 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. Iată elementele de bază de care aveți nevoie pentru a crea tabele: Creați un document HTML și copiați următorul cod în el:
În browser, documentul va arăta astfel: Să ne dăm seama ce linii de cod sunt responsabile pentru ce. Fiecare etichetă Iată un exemplu, cod html: Acordați atenție celulei Acum să aruncăm o privire mai atentă la toate atributele etichetei Pentru a deschide eticheta 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 De exemplu 2. Proprietate background="URL" - setează imaginea de fundal. În loc de URL, trebuie scrisă adresa imaginii de fundal. Exemplu 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: 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: 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 1. Proprietatea align="parameter" - setează alinierea unei celule individuale de tabel. Poate lua următoarele valori: 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. Pentru etichetă 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. 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: 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%" > 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%" > 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 Vom vedea tabelul rezultat: Î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. 3 Linia nr. 3 Browserul va afișa: 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 Celula nr. 1 Celula nr. 4 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! Î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). 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. 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!
Există o serie de parametri:
Să aplicăm acești parametri:
Să aplicăm acești parametri: Rezultat:
Folosind acești parametri, puteți seta limitele așa cum doriți. Aici vom da un singur exemplu, experimentați singuri cu toate.
Trebuie remarcat faptul că marginile sunt afișate ușor diferit în diferite browsere.Etichetele HTML tr și td
Să ne uităm la un exemplu:
De exemplu, să adăugăm la codul nostru, în etichete
acești parametri 1
2
3
Etichete și atribute de tabel
- un recipient în interiorul căruia se află masa (la fel ca
pentru marcat sau
pentru liste numerotate).
, în afara celulelor și rândurilor.
- o etichetă pereche care conține un rând de tabel (celule situate la același nivel orizontal).
- 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
, vor fi atât de multe celule în el: o etichetă - o celulă.
.
Exemplu de creare a unui tabel
Scop Instrument
Marcare HTML XHTML
Înregistrare CSS
Dezvoltare PHP Piton
se află corpul mesei. Corpul este format din rânduri și coloane. Tabelul este completat rând cu rând.
- a deschis masa, dându-i grosimea ramelor.
- a închis masa.
- a deschis linia.
- a închis linia. Liniile rămase au fost create în același mod.
Scop
- a creat o celulă cu un design de antet.
Instrument
- 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 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.
Marcare
HTML
XHTML creează o nouă linie. Mai departe în imbricat 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
Exemplu de tabel
Coloana 1
Coloana 2
. 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.
.
Etichetă atribute și proprietăți
Puteți specifica diferite atribute.
sau linii . Astfel, alinierea va fi diferită în diferite celule.
...
...
...
Exemplu de tabel
Coloana 1
Coloana 2
.
Atribute și proprietăți
Şi
Nota 1 Sunt disponibile aceleași opțiuni ca și pentru . Parametri pentru o etichetă va fi aplicat ierarhic tuturor înăuntrul lui
Cum să preveniți lipirea marginilor celulelor dintr-un tabel
...
Element TABLE, creați un tabel
Adăugați o linie
Adăugarea de celule
Celula nr. 2
Celula nr. 3Concatenarea șirurilor
Celula nr. 1
Celula nr. 2
Celula nr. 4
Celula nr. 5
Celula nr. 6Liniile #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
Coloana #3
Celula nr. 2
Celula nr. 3
Celula nr. 5
Celula nr. 6Dimensiunile și alinierea mesei
Fundal de masă
În concluzie
/
Ceea ce nu poți crea un site web fără:
∼
∼