Cum se face un tabel în HTML: descriere detaliată

Tabelele reprezintă unul dintre cele mai importante, dar în același timp elemente complexe care trebuie să fie prezente pe paginile web. Cu ajutorul lor este convenabil să prezinte informații importante și utile într-o formă destul de concisă. Desigur, cei mai mulți editori în șabloane, de lucru pe diferite motoare, insera automat un tabel în site-ul dvs. sau publicarea separată, dar ce se întâmplă dacă resursa web design, paginile sale sunt create de la zero? Apoi, înainte de maestrul începător poate exista o problemă: cum să faci tabel în HTML.

Alegeți un editor

În primul rând, când începeți să creați o masă, trebuie să determinați editorul în care veți lucra. Desigur, cel mai simplu mod de a alege programul în care creați codul principal al site-ului. Dar este mai bine să folosiți un notebook vechi bun pentru aceste scopuri.

Puteți întreba de ce să vă complici viața, pentru că dacă faceți totul în același timp în editor, atunci puteți vedea rezultatul și dintr-o dată și, de asemenea, utilizați instrucțiunile programului.

Da, este adevărat, dar pentru a crea un tabel de la zero, nu va fi doar în măsură să examineze în detaliu principiul creației sale, dar, de asemenea, pentru a preveni erorile de scriere jenante și erori în codul de bază. Uneori, se întâmplă ca cursorul să se deplaseze accidental în jos, iar în procesul de scriere a codului se strecoară în eroare, uneori dificil de găsit. Crearea unei mese într-un notebook vă puteți copia codul și îl puteți lipi în locul dorit.

Algoritm pentru crearea unei mese

În primul rând, vom compila un algoritm scurt pentru a face un tabel în HTML. Acest lucru este necesar pentru a înțelege succesiunea fiecărui pas. Apoi vom analiza modul de executare a fiecărui element.

Să începem cu acțiunile pregătitoare.

1. Desenați o diagramă a tabelului pe o foaie de hârtie.

2. Numără numărul de rânduri și celule. Dacă numărul ultimului este diferit - luăm în considerare pentru fiecare rând separat.

3. Determinați numărul de celule din anteturile de rând (de exemplu, celulele "No.", "Name" etc.).

4. Înregistrați parametrii principali ai tabelului - culoarea, înălțimea și lățimea, alinierea textului - în general, tot ceea ce aveți nevoie.

Apoi, mergeți direct la crearea unei mese:

1. Introduceți etichetele din tabel.

2. Introduceți etichetele rândurilor pe baza cantității de care aveți nevoie.

3. În rânduri inserați etichetele de celule (de obicei și de capital), de asemenea, în funcție de suma care este scrisă pe hârtie.

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

5. Dacă este necesar, setăm indicatorii pentru celule individuale.

6. Completați celulele cu text.

Creați un tabel

Deci, ați ales editorul, acum să ne dăm seama cum să creați o masă în HTML. O etichetă care introduce un tabel în codul paginii (

Inserând etichetele din tabel, continuăm să creăm rânduri și celule.

Remarcăm imediat că aceste elemente sunt de asemenea asociate. etichetă stabilește linii și - celulă.

Pentru celulele antet, utilizați elementul asociat .

Așa cum am menționat deja, în primul rând este necesar să se emită liniile, apoi în ele să se înregistreze celulele. Pentru a evita confuzia, este recomandabil să se facă orice capitonare între fiecare bloc într-o linie sau două, sau pentru a prescrie un nou bloc de elemente folosind tasta „Tab“.

Cum arata? Aproximativ astfel:

• ;
• ;
• № п / п ;
• Nume de familie ;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

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

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

Opțiuni tabel

Când se scrie codul, trebuie notate următoarele: alinierea în Tabel HTML, culoare frontiere, fundal, text și așa mai departe.

Parametrii tabelului sunt setați în etichetă

1. Frontieră - lățimea granițelor. Este dat ca un număr întreg. În mod implicit, limitele oricărei tabele sunt zero.

2. Bordercolor - culoarea frontală. Poate fi specificat ca un cod de culoare hexazecimal (# 00008B), și numele său în limba engleză (DarkBlue). Implicit este întotdeauna gri.

3. Bgcolor - culoarea de fundal. De asemenea, setați după cod sau nume.

4. Aliniați - aliniați textul în spatele mesei. Valoarea implicită este lăsată. Există următoarele opțiuni pentru acest parametru:

• stânga este fluxul din dreapta;
• dreapta spre stânga;
• centru - ieșiți masa în centru fără flux.

5. Lățimea și înălțimea - lățimea și înălțimea mesei. Pot fi specificate atât în ​​pixeli cât și în procente (în funcție de dimensiunea ferestrei browserului).

Prescriind acest sau acel indicator, ar trebui să acordați o atenție deosebită designului. După specificarea parametrului, trebuie urmat semnul egal, urmat de valoarea specificată în ghilimele.

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

Un exemplu de tabel:

• ;
• ;
• № п / п;
• Nume de familie;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

Parametrii liniei

Deci, deja am dat seama cum să facem un tabel în HTML și să prescriem parametrii de bază. Dar dacă ar trebui să selectăm o linie? Pentru a proiecta nu ca textul principal al tabelului?

Parametrii șirului sunt scrise în etichetă în același mod ca și datele din tabel. Următoarele variabile pot fi specificate pentru un șir:

1. Deja vă cunoașteți granița, bordercolor și bgcolor.

2. Aliniați - aliniați textul în linie. Poate lua valori stânga, centru și dreapta.

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

• sus - textul este aliniat la marginea superioară;
• pe centru;
• jos - pe marginea inferioară.

Exemplu de linie:

• ;
• № п / п;
• Nume de familie;
• .

Setări pentru celule

Și ultimul lucru care ar trebui să fie acordat atenției celor care vor să știe cum să facă o masă în HTML sunt parametrii celulelor individuale, atât convențional cât și antet. De fapt, totul se face exact la fel ca pentru o masă sau un rând. Singurul lucru, se adaugă două elemente mai importante:

1. Colspan - acest parametru specifică numărul de coloane pe care o celulă poate fi cuprinsă.

2. Rowspan - specifică numărul de rânduri ocupate de această celulă.

Deoarece designul nu diferă de scrierea liniei, nu vă vom da un exemplu de cod.

constatări

Efectuarea unei mese nu este la fel de dificilă cum ar părea la prima vedere. Principalul lucru la scrierea codului este asiduitatea și atenția.

În ceea ce privește modul de inserare a unui tabel în HTML, cifrul său este copiat și lipit exact în locul paginii dvs., în care, în opinia dvs., 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. Mult noroc!