TABEL in HTML

Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa a
tabelelor, putem controla pozitionarea diverselor elementele din pagina web (de exemplu sa scriu pe 2 coloane, sa
pun pozele unui album intr-un grid, etc).

Crearea unui tabel in HTML

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>.

Pentru ca liniile unui tabel sa fie vizibile, tag-ul <TABLE> trebuie sa contina atributul BORDER avand valoarea egala cu
cel putin 1. Putem schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii
dorite.

Liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu
valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si
atributul CELLPADDING care indica distanta dintre marginile celulelor si textul din cadrul acestora.

Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele WIDTH pentru latime si
HEIGHT 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 dintre
valorile "top", "middle" sau "bottom".

Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim atributul BGCOLOR impreuna cu
codul culorii alese.

<TABLE> Tabel

align left Alinierea tabelului

center
right

background URL Imaginea de fond pentru tabel

bgcolor cod culoare Culoarea fondului pentru tabel

nume culoare

border procent Chenarul tabelului

Page 1 of 3
 numar de pixeli

bordercolor cod culoare Culoarea chenarului

nume culoare

cellpadding numar de pixeli Spatiu intre continutul celulelor tabelului si

marginile lor

cellspacing numar de pixeli Spatiu intre celulele tabelului

cols numar Numarul de coloane ale unui tabel

hspace numar de pixeli Spatiu pe orizontala in jurul tabelului

vspace numar de pixeli Spatiu pe verticala in jurul tabelului

width procent Latimea tabelului

numar de pixeli

<TD> Celula de tabel

align left Alinierea continutului celulei pe orizontala

center
right

background URL Imaginea de fond pentru celula

bgcolor cod culoare Culoarea fondului pentru celula

nume culoare

colspan numar Numarul de coloane pe care se intinde

celula

height numar de pixeli Inaltimea celulei

rowspan numar Numarul de linii pe care se intinde celula

valign top Alinierea continutului celulei pe verticala

middle
bottom

width numar de pixeli Latimea celulei

Page 2 of 3
Exercitiu: Realizati ecranul colorat de mai jos:

Atentie! 2 casute intr-un table se unesc folosind atributul: colspan="2"

Rezolvare:

Page 3 of 3