Crearea de tabele n documente HTML

Tabelele reprezint un instrument foarte puternic, care permite organizarea

informaiilor dintr-un document HTML, nscriindu-le n celule structurate pe linii i coloane.
Inserarea unui tabel ntr-un document HTML se realizeaz cu ajutorul elementului TABLE,
ntre eticheta de nceput <TABLE> i cea de sfrit </TABLE> este ncadrat descrierea
elementelor tabloului.
Elementul TABLE admite urmtoarele atribute principale :
SUMMARY = text
specific o descriere a rolului i structurii tabelului; aceast descriere nu este vizualizat n
pagina Web, fiind util, de exemplu, browser-elor care sunt capabile s redea sonor
informaiile din pagin (esenial pentru persoane cu deficiene vizuale).
ALIGN = LEFT | CENTER | RIGHT
specific modul de aliniere a tabelului n document (LEFT - tabelul este aliniat la marginea
din stnga (implicit); CENTER - tabelul este aliniat la egal distan de marginile stnga dreapta; RIGHT - tabelul este aliniat la marginea din dreapta).
WIDTH = valoare
specific limea ntregului tabel. Valoarea poate fi specificat n numr de pixeli sau
procentual (procentul se calculeaz din limea zonei de vizualizare a documentului).
HEIGHT = valoare
specific nlimea tabelului (n numr de pixeli).
BORDER = valoare
specific (ca numr de pixeli) grosimea liniei chenarului din jurul tabelului.
COLS = valoare
specific numrul de coloane ale tabelului.
CELLSPACING = valoare
specific spaiul dintre celule i spaiul dintre celule i marginile tabelului.
CELLPADDING = valoare
specific spaiul dintre chenarul celulei i coninutul ei. Valoarea poate fi specificat att n
numr de pixeli (in acest caz distanele dintre coninutul celulei i latura de sus, jos, stnga,
respectiv dreapta sunt egale cu valoarea specificat), cat i n procente (n acest caz, pentru
distanele fata de marginea din stnga, respectiv fat de cea din dreapta, procentul se
calculeaz din limea celulei, n timp ce pentru distanele fata de marginea de sus, respectiv
fat de cea de jos, procentul se calculeaz din nlimea celulei).
Coninutul elementului TABLE este constituit din liniile tabelului. Specificarea unei
linii se realizeaz cu ajutorul elementului TR (Table Row), ntre eticheta de nceput <TR> i
cea de sfrit </TR> fiind descrise celulele de pe linia respectiv.
De exemplu:
<TABLE>
<TR> ... prima linie ...
<TR> ... a doua linie...
...
</TABLE>
Se observ c eticheta de sfrit </TR> este opional (marcajul de nceput al liniei
urmtoare sau marcajul de sfrit de tabel constituind implicit sfritul liniei curente).
Specificarea celulelor care constituie o linie se realizeaz prin intermediul elementelor
TH (Table Header) (folosind eticheta de nceput <TH> i cea de sfrit </TH>), pentru
celulele care constituie antetul tabelului, respectiv TD (Table Data) (folosind eticheta de
nceput <TD> i cea de sfrit </TD>), pentru celulele care vor conine informaiile din tabel.
Browser-ele vor vizualiza cele dou tipuri de celule n mod distinct.

<TABLE BORDER = 2>

<TR> <! o linie antet>
<TH> Nr. crt.
<TH> Nume i prenume
<TH> Suma
<TR> <! prima linie de date>
<TD> 1
<TD> Popescu Vasile
<TD> 654675
<TR> <! a doua linie>
<TD> 2
<TD> Zamfir Ion
<TD> 3000
</TABLE>
Efect:
Nr. crt
Nume si prenume
Suma
1
Popescu Vasile
2000
2
Zamfir Ion
3000
Elementele TH i TD admit urmtoarele atribute principale :
ROWSPAN = numr-de-linii
specific numrul de linii acoperite" de celula respectiv. Valoarea implicit a acestui atribut
este 1. Valoarea 0 semnific faptul c aceast celula acoper toate liniile, de la cea curent
pn la ultima linie din tabel.
COLSPAN = numr-de-coloane
specific numrul de coloane acoperite" de celula curent. Valoarea implicit a acestui
atribut este 1. Valoarea 0 semnific faptul c aceast celula acoper toate coloanele, de la cea
curent pn la ultima coloan din tabel.
WIDTH = valoare
specific limea celulei (in numr de pixeli).
HEIGHT = valoare
specific nlimea celulei (in numr de pixeli).
Exemple:
1. Modul de utilizare a atributelor ROWSPAN i COLSPAN este ilustrat n exemplul
urmtor:
<TABLE border = 2>
<TR> <! prima linie antet>
<TH ROWSPAN=2> Nr. crt.
<TH ROWSPAN=2> Nume i prenume
<TH COLSPAN=3> Note examene <TR> <! a doua linie antet>
<TH>Baze de date
<TH>Sisteme de operare
<TH>Algoritmi
<TR>
<TD> 1
<TD> Popescu Vasile
<TD> 10.00
<TD> 9.00
<TD> 8.50 <TR>

<TD> 2
<T0> Zamfir Ion
<TD> 9.00
<TD> 9.50
<TD> 9.25 </TABLE>
Efect:
Nr. crt
Nume si prenume
1
2

Popescu Vasile
Zamfir Ion

Note examen
Baze de date
10.00
9.00

Sisteme de operare
9.00
9.50

Algoritmi
8.50
9.25

2. n exemplul urmtor este prezentat un tabel n care difer numrul de celule de pe fiecare
linie:
<TABLE BORDER=3 ALIGN=CENTER> <TR>
<TH COLSPAN=6 BGCOLOR=#AAAABBxI>ORAR</I>
<TR> <TH WIDTH=60>
<TH WIDTH=80> Luni
<TH WIDTH=80> Marti
<TH WIDTH=80> Miercuri
<TH WIDTH=80> Joi
<TH WIDTH=80> Vineri <TR>
<TH AIIGN=LEFT>8-10
<TD>Matematica
<TD>
<TD> Informatica <TR>
<TH ALIGN=LEPT>10-12
<TD>Fizica
<TD>Chimie
<TD>Sport
<TD>Informatica <TR>
<TH ALIGN=LEFT>12-14
<TD>
<TD>Fizica
<TD>Desen <TD>Chimie
<TD>Muzica </TABLE>
Efect:
ORAR
Luni
8-10

Matematica

10-12

Fizica

12-14

Marti

Miercuri

Joi

Vineri

Informatica
Chimie

Sport

Informatica

Fizica

Desen

Chimie

Muzica

Observai c modul implicit de aliniere a informaiilor din celulele de date este LEFT, n timp
ce modul implicit de aliniere a informaiilor din celulele antet este CENTER. De asemenea,
observai c dimensiunea specificat pentru o celul se ,,motenete" pentru toate celulele de
pe coloana respectiv. Pentru a mbunti aspectul tabelului, am aplicat o culoare de fond
pentru prima linie antet.

3. Aspectul unui tabelul poate fi mbuntit i prin utilizarea atributelor CELLSPACING

i CELLPADDING :
<TABLE BORDER=5 COLS=3 WIDTH="20%"
CELLPADDING=4 CELLSPACING=15>
<TR>
<TH>0
<TH>0
<TH>X
<TR>
<TH>0
<TH>X
<TH>0
<TR>
<TH>X
<TH>0
<TH>0
</TABLE>
Efect:
0