Tabele in HTML
5
9/14/13 Tabele in HTML www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 1/5 Tabele in HTML Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web. Crearea unui tabel Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR> care vine de la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia cateva celule, cu ajutorul tag-urilor <TD> si </TD>. Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod HTML: <HTML> <HEAD> <TITLE>Primul tabel</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD><B>Nume</B></TD> <TD><B>Prenume</B></TD> <TD><B>Nota</B></TD> </TR> <TR> <TD>Ionescu</TD> <TD>Bogdan</TD> <TD>7</TD> </TR> <TR> <TD>Stancu</TD> <TD>George</TD> <TD>9</TD> </TR> <TR> <TD>Dumitrescu</TD> <TD>Alexandra</TD> <TD>10</TD> </TR> <TR> <TD>Marin</TD> <TD>Paul</TD> <TD>8</TD> </TR> <TR> <TD>Ivanov </TD> <TD>Mihaela</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML> Salveaza pagina cu numele de tabel.html . Pentru a vedea rezultatul: click aici Proprietatile tabelelor Asa cum ai observat, in exemplul de mai sus am realizat un tabel, dar fara nici o linie. Pentru ca liniile unui tabel
-
Upload
radu-mihai-anghel -
Category
Documents
-
view
218 -
download
0
description
ok
Transcript of Tabele in HTML
-
9/14/13 Tabele in HTML
www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 1/5
Tabele in HTML
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa atabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
Crearea unui tabelPentru a crea un tabel, trebuie sa folosim tag-urile si . Tot ce va fi scris intre aceste tag-uri vaforma un tabel. Dupa tag-ul urmeaza tag-ul care vine de la "Table Row" (randul tabelului) sireprezinta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre tag-urile si va forma unrand al tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia cateva celule, cu ajutorul tag-urilor si . Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrieurmatorul cod HTML:
Primul tabel
NumePrenumeNota
IonescuBogdan7
StancuGeorge9
DumitrescuAlexandra10
MarinPaul8
IvanovMihaela9
Salveaza pagina cu numele de tabel.html. Pentru a vedea rezultatul: click aici
Proprietatile tabelelorAsa cum ai observat, in exemplul de mai sus am realizat un tabel, dar fara nici o linie. Pentru ca liniile unui tabel
-
9/14/13 Tabele in HTML
www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 2/5
sa fie vizibile tag-ul trebuie sa fie insosit de atributul BORDER avand valoarea egala cu cel putin 1. Inplus, poti schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite.Astfel, daca vrem ca liniile tabelului nostru sa aiba culoarea rosie vom folosi urmatoarea linie de cod:
Inlocuieste linia 6 din exemplul de mai sus si salveaza pagina cu numele tabel2.html. Pentru a vedea rezultatul:click aici
Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vomfolosi atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alaturi deacest atribut putem folosi si atributul CELLPADDING care indica distanta dintre marginile celulelor si textul dincadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele WIDTH pentru latime siHEIGHT pentru inaltime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile"left", "center" sau "right". Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintrevalorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim atributul BGCOLOR impreunacu codul culorii alese. Sa facem impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-aminvatat pana acum in aceasta lectie. Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cunumele de tabel3.html:
Proprietatile tabelelor
Rezultatele obtinute la matematica
NumePrenumeNota
IonescuBogdan7
StancuGeorge9
DumitrescuAlexandra10
MarinPaul8
-
9/14/13 Tabele in HTML
www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 3/5
IvanovMihaela9
Pentru a vedea rezultatul: click aici
Folosirea tabelelor ca plan al unei pagini webAsa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web.Practic, folosind tabelele, putem adauga o imagine sau un text oriunde in pagina web. Sa vedem un exemplu: clickaici. Acum hai sa vedem codul pentru pagina din exemplul nostru:
Gradina Zoologica
Gradina Zoologica
RinocerTigruLeuGirafaPisica
nbsp;
-
9/14/13 Tabele in HTML
www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 4/5
Urs PolarLupBroasca TestoasaElefantCamila
Pagina de mai sus a fost facuta folosind tabele. Iata cum ar fi aratat pagina daca tabelele folosite ar fi avut atributulBORDER egal cu "1" in loc de "0": click aici
In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem inca doua atribute foarteimportante ale tag-ului : COLSPAN (numarul de coloane pe care se intinde celula) si ROWSPAN (numarul delinii pe care se intinde celula). De exemplu pentru crearea tabelului urmator:
am folosit pentru celula rosie atributul COLSPAN="2", deoarece se intinde pe doua coloane, iar pentru celulaalbastra am folosit atributul ROWSPAN="3" deoarece se intinde pe trei randuri. Codul complet al tabelului de maisus este urmatorul:
-
9/14/13 Tabele in HTML
www.ecursuri.ro/cursuri-online/tabele-in-html-print.html 5/5
Pentru a intelege mai bine utilizarea tag-urilor si a atributelor lor, nu uita sa exersezi cat mai mult. Incearca sarealizezi diferite pagini web pe baza notiunilor invatate in acest curs.
