Crearea tabelelor în html

Tabel - o parte foarte importantă a HTML atunci când creați orice site web nu se poate face fără tabele. Utilizarea foilor de calcul face mai ușor pentru a da site-ul aspectul dorit. pentru că suntem liberi pentru a ajusta lățimea și înălțimea mesei.

In acest tutorial, HTML sa trecem elementele de bază de a crea tabele și folosind tag-uri care. Să începem cu cel mai important tag-ul responsabil de crearea tabelului - pereche tag

Am creat un tabel, dar masa - este un set de rânduri și coloane într-un tabel, astfel avem nevoie pentru a crea rânduri și coloane. Fără ele nu suntem nimic la masa nu va fi capabil să înregistreze.

Rând în tabel este creat folosind perechea de etichete

. și coloana - folosind un tag asociat

Primul atribut tabel - un atribut de frontieră. care este responsabil pentru cadru. Valoarea prestabilită a atributului este în valoare de „0“ (cadru nu este vizibil). Dacă vrem să vedem frontiera, trebuie sa punem o valoare diferită de zero, cum ar fi „1“

Acum putem spune că masa a fost creat și este posibil ca ceva să scrie. Să creați un tabel în primul paragraf.

Primul paragraf din tabelul

Verificăm într-un browser și a vedea că a existat un cadru. În exemplul nostru, tabelul creat este format dintr-un rând și o coloană. În mod implicit, la stânga-justificate, și are aceeași lățime ca și lățimea paragrafului.

Acum, să mărească lățimea mesei noastre, folosind un alt atribut - un atribut lățime. care este responsabil pentru lățimea obiectului. Lățimea poate fi specificată în pixeli și procente. Dacă am stabilit lățimea tabelului în pixeli, valoarea unui atribut scrie doar numărul necesar.

Primul paragraf din tabelul

Lățimea tabelului nostru a devenit 600 pixeli. Este centrat, folosind atributul align familiar. responsabil pentru alinierea.

Primul paragraf din tabelul

Acum, să trecem în linia noastră de o coloană pentru a adăuga o pereche de coloane. Pentru a face acest lucru, trebuie să prescrie o pereche de tag-uri

Primul paragraf din tabelul

. Pentru fiecare coloană - o singură etichetă.

Dacă vrem să dea fiecare coloană o lățime specifică - prescrie fiecare etichetă de sănătate

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

atribut lățime care indică lățimea corespunzătoare.

Acum, fiecare coloană a acestui rând are o rezoluție identică.

În continuare, vom adăuga în tabelul nostru are o singură linie, folosind, respectiv, o altă etichetă

. Și doar să prescrie în această linie de trei coloane.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Du-te înainte în crearea tabelului. Pentru a schimba atributul de culoare de frontieră borderColor aplică. responsabil pentru culoarea cadrului. Valoarea atributului prevede culoarea pe care ne-o dorim.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

Cadru a devenit roșu.

Acum indentare în cadrul fiecărei celule din tabel (textul din interiorul cadrului este apăsat împotriva celulei). Acest lucru se face cu ajutorul atributului cellpadding (celula - o celula, padding - indentare internă). Valoarea atributului prevede numărul de pixeli pe care ar trebui să fie între text și cadrul celulei.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

Și, după cum ne-ar textele în fiecare dintre prima celulă din rândul pentru a alinia centrul (în mod implicit, acesta este apăsat spre stânga). În acest scop, eticheta de prima linie adăugați atributul align cu valoarea „centru“.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

Textul din prima linie a fiecărei celule alinia la centru.

Să încercăm acum să adăugați la masa noastră creată de linia a treia, dar cu o singură celulă, lățimea tuturor celor trei linii de celule de sus.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

Verificați browser-ul. Avem de-al treilea rând, dar lățimea celulei în această linie este la fel ca toate celulele. Dacă aplicați atributul lățime și pus în jos valoarea dorită - ne oferă nimic (se poate verifica). Pentru ceva la a treia lățimea liniei de celule prelevate mai multe celule au nevoie pentru a aplica un atribut special al colspan (îmbinare de mai multe celule), iar valoarea atributului pentru a specifica numărul de celule fuzionate (două sau trei).

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

A treia linie

Asta e de lucru atributul colspan.

Și dacă avem nevoie de a combina cele două celule o singură coloană într-una singură. Prima celulă a primului șir combinat cu prima celulă din al doilea rând. In acest scop atribut rowspan. Se potrivește în prima celulă a primului rând atribut rowspan în care valoarea de scriere a numărului de celule așa cum vrem să se unească.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

A treia linie

Verificați browser-ul. Că ceva nu este corect. În al doilea rând am avut o celula in plus. Nu contează. Avem nevoie doar pentru a elimina o celulă din al doilea rând.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia coloană din al doilea rând

A treia linie

Efectuat. Acum ne arata ca toti ne-am dorit.

Acesta este atributul rowspan combină celulele verticale.

Cu toate acestea, putem în tabelul nostru creat pentru a insera un altul. Acest lucru poate fi util pentru noi în practica noastră. Hai doar în celulă îmbinată, în loc de paragraf se introduce o altă masă. Ce-ar fi fost mai convenabil - va crește lățimea mesei principale 800, iar lățimea celulei 400 fuzionat.

Prima coloană a tabelului

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia linie

Notă: Valoarea atributului lățime a tabelului încorporat este înregistrat ca procent. În cazul nostru, tabelul încorporat ocupă 100% din volumul de celule.

Built-in de masă și am putea rupe in celule. Pe scurt, tot ceea ce se poate face într-un tabel obișnuit, și poate fi construit în.

Și totuși, trebuie să știm - aceasta este culoarea de fond a tabelului. La crearea unui tabel, ea nu are culoarea de fundal. Context din tabel că este transparent fundal a tabelului va fi la fel ca fundalul paginii.

Apropo, cum să setați pagina de fundal, nu am vorbit. Acest lucru se face foarte simplu - tag prescrie atributul bgcolor, cu o valoare de fundal de care avem nevoie.

Doar cere fundalul mesei, doar atributul bgcolor prescrie tag

Prima linie a tabelului încorporat

Foaia de calcul a doua linie embedded

A doua coloană a tabelului

A treia coloană a tabelului

Prima coloană din al doilea rând

A doua coloană din al doilea rând

A treia linie

din tabel, ceea ce face ca fundal.

Aceasta completează crearea de tabele.