Tabele

Tabele

De cele mai multe ori este nevoie ca datele prezentate sa fie sintetizate sub forma unui tabel, avand astfel un impact mai mare asupra vizitatorului ("o coloana lunga de cifre si trei pagini de explicatii nu au acelasi efect ca un mic tabel si o imagine sugestiva"- citat din mine, sfat pentru incepatori !).

Tabelele sunt introduse prin utilizarea marcajului <TABLE> </TABLE> Limbajul HTML ia in considerare urmatoarele elemente pentru construirea unui tabel (unele sunt optionale):

Text explicativ care se refera la continutul tabelului;
Capul de tabel (capul de tabel va fi scos in evidenta fata de restul liniilor);
Datele din tabel (=valorile din celulele tabelului);
Celulele tabelului (alinierea continutului...);

In HTML, construirea unui tabel se face rand cu rand, specificand celulele de pe fiecare linie. Prima linie este considerata ca fiind capul de tabel, unde se precizeaza ce fel de date sunt continute in coloanele respective. Linia se specifica prin tagul <TR> </TR> Celulele tabelului sunt introduse prin marcajul <TD> </TD>, iar celulele cap de tabel prin <TH> </TH>.

Instructiunile de mai jos sunt folosite aproape in orice site deoarece cu ajutorul lor:
- putem crea tabele propriu - zise (cum este cel de mai jos);
- putem controla mult mai bine aranjarea in pagina a elementelor (folosind tabele fara chenar, eventual introducem tabele in interiorul altui tabel).

Instructiune	Atribute	Descriere
< table atribute > < / table>	-	inceput de tabel HTML
	border =	chenarul tabelului (in pixeli sau %)
	bgcolor =	culoarea fondului pentru tabel (valoare RGB sau nume culoare)
	*background = " url* "**	imaginea de fond pentru tabel; probleme: fond inchis-text deschis sau fond inadecvat (ca marime sau model)
	cellpadding =	spatiu intre continutul celulelor tabelului si continutul lor (in pixeli)
	cellspacing =	spatiu intre celulele tabelului (in pixeli)
	width =	latimea tabelului (in pixeli sau % din spatiul disponibil)
	bordercolor =	culoarea chenarului (nume culoare sau valoare RGB)
	bordercolorlight =	culoarea mai deschisa a chenarului (stanga + sus) (nume culoare sau valoare RGB)
	bordercolordark =	culoarea mai inchisa a chenarului (dreapta + jos) (nume culoare sau valoare RGB)
	align =	aliniaza tabelul in dreapta (right) sau stanga (left) paginii; textul din jurul tabelului curge pe partea opusa
	hspace =	spatiu pe orizontala in jurul tabelului (in pixeli)
	vspace =	spatiu pe verticala in jurul tabelului (in pixeli)
	cols =	numarul de coloane ale unui tabel
	frame =	ajustarea cadrelor in tabel - doar in IE
	rules =	ajustarea riglelor in tabel - doar in IE
< tr atribute > < / tr >	-	linie de tabel
	bgcolor =	culoarea fondului pentru intreaga linie (valoare RGB sau nume culoare)
	align =	alinierea continutului celulelor (left, center, right); implicit left
	height =	inaltimea liniei (in pixeli); in unele browsere nu functioneaza, dar puteti folosi height in TD
< td atribute > < / td >	-	celula de tabel
	height =	inaltimea celulei; daca pe aceeasi linie (TR) dati din greseala 2 valori diferite pentru height in TD, va lua maximul pentru toate celulele liniei
	width =	latimea celulei
	bgcolor =	culoarea fondului pentru intreaga celula (valoare RGB sau nume culoare)
	*background = " url* "**	imaginea de fond pentru celula
	align =	alinierea continutului celulei pe orizontala (left, center, right); implicit left
	valign =	alinierea continutului celulei pe verticala: top (sus), middle (mijloc), bottom (jos); implicit middle
	align = baseline	aliniaza celulele cu linia de baza a textului adiacent
	align = caracter	aliniaza coloana fata de un anumit caracter (implicit caracterul " . ")
	align = justify	aliniaza marginile din stg. si dr. ale textului
	colspan =	numarul de coloane pe care se intinde celula
	rowspan =	numarul de linii pe care se intinde celula
	nowrap	nu permite despartirea textului pe linii in celula
< th > < / th >	-	poate fi folosit : - in loc de TD, dar continutul va fi centrat si ingrosat (bold); - impreuna cu TD pe aceeasi linie (TR)
< caption atribute > < / caption >	-	text explicativ asociat tabelului
< caption atribute > < / caption >	align =	alinierea textului (top = implicit, bottom, left, right)

Extensiile Microsoft pentru tabele

Aceste extensii permit gruparea liniilor în linii de antet de tabel, linii de picior de tabel, linii de corp de tabel. Gruparea permite formatãri globale, în general alinieri, pentru toate liniile unui grup.
Coloanele pot fi si ele grupate, fiecare grup fiind, dacã se doreste, formatat global.

<THEAD>
linii-antet
</THEAD>

defineste grupul liniilor din antetul tabelului.

linii-antet contine definitiile TR pentru liniile care formeazã antetul tabelului.

<TBODY>
corp-tabel
</TBODY>

defineste grupul liniilor din corpul tabelului.

corp-tabel contine definitiile TR pentru liniile care formeazã corpul tabelului.

<TFOOT>
linii-picior
</TFOOT>

defineste grupul liniilor din piciorul de tabel.

linii-picior contine definitiile TR pentru liniile care formeazã piciorul de tabel.

<COLGROUP ALIGN=left|center|right [ SPAN=nn]>
[... </COLGROUP>]

grupeaza si formateaza un grup de coloane ale unui tabel. Coloanele sunt grupate potrivit ordinii de la stânga spre dreapta: primul tag COLGROUP se va referi la primele nn coloane, al doilea tag COLGROUP la urmãtoarele coloane etc.

ALIGN se referã la alinierea implicitã a textului în toate celulele din coloanele grupate;
SPAN indicã numãrul coloanelor care se grupeazã pentru formatare. Implicit (lipsa atributului SPAN) este 1.

<COL ALIGN=left|center|right [ SPAN=nn]>
[</COL>]

formateazã un grup de coloane ale unui tabel. Coloanele sunt considerate potrivit ordinii de la stânga spre dreapta: primul tag COL se va referi la primele nn coloane, al doilea tag COL la urmãtoarele coloane etc. Tagul COL se poate scufunda în tagul COLGROUP schimbând setarea implicitã datã de COLGROUP.

ALIGN se referã la alinierea implicitã a textului în toate celulele din coloanele considerate;
SPAN indicã numãrul coloanelor care se considerã pentru formatare. Implicit (lipsa atributului SPAN) este 1.

Instructiune	Atribute	Descriere
< colgroup > < / colgroup>	-	impreuna cu marcajul < col > defineste un set de definitii de coloane
< colgroup > < / colgroup>	bgcolor =	culoarea de fond
< col atribute >	-	fara atribute: aceeasi latime pentru toate coloanele
	width =	latimea coloanei, in pixeli, % sau " * "
	align =	alinierea textului pentru intreaga coloana (se pare ca nu functioneaza in Netscape 4.51)
	char =	alinierea textului fata de un anumit caracter
	bgcolor =	culoarea de fond
< thead > < / thead >	-	defineste titlul tabelului
< thead > < / thead >	bgcolor =	culoarea de fond
< tbody > < / tbody >	-	corpul tabelului
< tbody > < / tbody >	bgcolor =	culoarea de fond
< tfoot > < / tfoot >	-	pentru liniile de sfarsit ale tabelului; COLGROUP, THEAD, TBODY, TFOOT nu sunt neaparat necesare intr-un tabel, dar uneori demarcarea facuta de ele este folosita de alte marcaje, de ex. <TABLE RULES = GROUPS>
< tfoot > < / tfoot >	bgcolor =	culoarea de fond

    Utilizarea extensiilor Microsoft pentru marcarea tabelelor pot produce urmãtoarea structurã de definire:

<TABLE>
   <CAPTION>...</CAPTION> - titlul tabelului
      <COLGROUP ...
      <COLGROUP ...
   <THEAD>
     <TR><TH><TH> ... </TR> - linie antet
     ...
     <TR><TH><TH> ... </TR> - linie antet
   </THEAD>
   <TBODY>
     <TR><TD><TD> ... </TR> - linie curentã
     ...
     <TR><TD><TD> ... </TR> - linie curentã
   </TBODY>
   <TFOOT>
     <TR><TD><TD> ... </TR> - linie picior
      ...
     <TR><TD><TD> ... </TR> - linie picior
   </TFOOT>
</TABLE>

Taguri COL si COLGROUP se pot scufunda în tagurile THEAD, TBODY si TFOOT pentru a schimba formatãrile locale.