j7t18tg
Prezentarea datelor sub forma de tabele are importante avantaje atat prin claritate si sistematizare cat si prin posibilitatile de comparare oferite. Desi tabelele pot fi construite in HTML si prin aranjarea directa a datelor, din tastatura si utilizarea unui font neproportional (sau formatul PRE), exista taguri dedicate cu ajutorul carora tabelele pot fi formatate aproape la nivelul similar din procesoarele de texte. In prezentarea care urmeaza trebuie sa se retina, totusi, ca multe atribute sau taguri sunt extensii Microsoft.
Marcarea unui tabel se efectueaza printr-un tag de introducere a tabelului si definire a atributelor globale, tagul TABLE, containerul respectiv continand, apoi, definitiile pentru liniile si coloanele tabelului. Se va vedea ca, de fapt, definitia elementara este asupra unei celule a tabelului, restul definitiilor precizand doar gruparea lor in linii/coloane.

Forma generala a marcarii unui tabel este:

<TABLE>
<CAPTION>...</CAPTION> - titlul tabelului
<TR><TH><TH> ... </TR> - linie antet
<TR><TD><TD> ... </TR> - linie curenta
...
<TR><TD><TD> ... </TR> - linie curenta
</TABLE>

Extensiile Microsoft privind gruparea liniilor/coloanelor permit si structuri mai complexe (vezi extensiile Microsoft).
Exemplul urmator va avea ca efect afisarea unui tabel cu doua coloane si doua linii plus o linie de antet:

<TABLE>
<TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
<TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR>
</TABLE>

Se remarca lipsa liniaturii. Aceasta va fi obtinuta prin utilizarea unor atribute adecvate. Textul liniilor de antet este evidentiat prin stilul bold. Fiecare celula admite formatare individuala a textului. In anumite extensii se poate indica si formatarea globala pentru textul tuturor celulelor dintr-o linie/coloana.
Urmariti exemplul urmator in care se indica formatari individuale pentru celulele exemplului anterior:
<TABLE>
<TR><TH><font color=blue>Coloana 1</font></TH><TH><font color=red>Coloana 2</font></TH></TR>
<TR><TD><center>Celula 1.1</center></TD><TD><em>Celula 1.2</em></TD></TR>
<TR><TD>Celula 2.1<br>Celula 2.1 (randul al doilea)</TD><TD><font color=green>Celula 2.2</font></TD></TR>
</TABLE>

Se va observa celula 2.1 care isi modifica inaltimea dupa cantitatea de text.

Marcaje generale pentru tabele
<TABLE a BORDERa=nnii a FRAME=void|above|below|hsides|lhs|rhs|vsides|boxi a RULES=none|groups|rows|cols|alli a WIDTH=ooo|pn%i a HEIGHT=mmm|pm%i a BGCOLOR="#rrggbb"|culoarei a BORDERCOLOR="#rrggbb"|culoarei a BORDERCOLORLIGHT="#rrggbb"|culoarei a BORDERCOLORDARK="#rrggbb"|culoarei a BACKGROUND="URL-imagine"i a CELLSPACING=qqqi a CELLPADDING=rrri a ALIGN=left|center|righti a VALIGN=top|bottomi> continut-tabel
</TABLE> este tagul de definire a unui tabel.

BORDER defineste prezenta chenarului. Daca atributul lipseste sau are valoarea 0 (BORDER=0), atunci tabelul nu va avea chenar. Prin nn pozitiv se indica, in pixeli, marimea umbrei pentru o reprezentare spatiala.
FRAME specifica afisarea bordurilor exterioare. Atributul BORDER trebuie sa fie prezent. Aceasta este o extensie Microsoft.

void - fara bordura exterioara; above - chenar sus; below - chenar jos; hsides - chenar sus si jos; vsides - chenar stanga si dreapta; lhs - chenar stanga; rhs - chenar dreapta; box - chenar complet.
RULES controleaza afisarea liniilor interioare in cazul cand se utilizeaza TBODY, TFOOT si THEAD (vezi in continuare). Atributul BORDER trebuie saa fie prezent. Aceasta este o extensie Microsoft.

none - nu se afiseaza linii interioare; groups - afiseaza linii intre grupurile tabelului (specific extensiei Microsoft de definire a grupurilor: COLGROUP etc.); rows - afiseaza linii intre linii; cols - afiseaza linii intre coloane; all - afiseaza toate liniile interioare.
WIDTH comanda latimea tabelului: in pixeli, ooo, sau procentual, pn%, din latimea ecranului;
HEIGHT, similar cu WIDTH, pentru inaltimea tabelului;
BGCOLOR este culoarea pentru fundalul tabelului. Culoarea de fundal este acoperita, evident, de culoarea declarata ca fundal pentru linii (vezi TR), care este acoperita de culoarea declarata ca fundal pentru celule (vezi TH si TD). Aceasta este o extensie Netscape si Microsoft;
BORDERCOLOR este culoarea bordurii tabelului. Aceasta este o extensie Microsoft;
BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordura umbrita. Aceasta este o extensie Microsoft;
BORDERCOLORDARK este culoarea umbrei dintr-o bordura umbrita.Aceasta este o extensie Microsoft;
BACKGROUND specifica adresa URL a fisierului imagine utilizat drept fundal pentru fiecare celula a tabelului. Aceasta este o extensie Microsoft;
CELLSPACING arata spatierea, in pixeli, dintre celule;
CELLPADDING arata spatierea, in pixeli, dintre marginile celulei si continutul ei:
ALIGN comanda alinierea tabelului intre marginile laterale ale ferestrei;
VALIGN arata alinierea verticala a tabelului.Aceasta este o extensie Microsoft. continut-tabel defineste celulele tabelului, antetul, captarea si continutul celulelor tabelului.

Exemplul urmator reia un tabel anterior si ii marcheaza chenarul.

<TABLE BORDER>
<TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
<TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR>
</TABLE>

Pentru a obtine efectul de spatialitate utilizam, de exemplu,
<TABLE BORDER=5> care va produce o bordura exterioara caracteristica.
Spatierea celulelor se poate realiza prin atributul:
Cellspacing=6 care impreuna cu optiunile anterioare are efectul din exemplul urmator:
Pentru a departa textul din interiorul celulelor de marginile celulelor putem utiliza atributul:
Cellpadding=10 efectul, corelat, sau nu, cu optiunile anterioare este un tabel mai "aerisit":
Pentru acest tabel linia de definire este, prin acumulare de atribute:
<TABLE BORDER=5 Cellspacing=6 Cellpadding=10>
In sfarsit, optiunile de culoare de fond si de aliniere a tabelului pot fi utilizate ca in exemplul:
<TABLE BORDER=5 Cellspacing=6 Cellpadding=10 BGCOLOR=yellow ALIGN=center>

Pentru cazul in care se utilizeaza extensiile Microsoft, posibil ca ele, intre, timp sa fie preluate si de alte browsere, tabelul anterior poate fi modificat prin:
<TABLE BORDER=5 Cellspacing=6 Cellpadding=10 ALIGN=center BORDERCOLOR=green BORDERCOLORDARK=maroon VALIGN=bottom BACKGROUND="pap02.jpg">

unde "pap02.jpg" este, evident, un fisier imagine din directorul/folderul curent. Se va remarca faptul ca indicarea unei imagini de fundal presupune renuntarea la culoarea de fundal. In cazul in care browserul pe care-l utilizati nu accepta extensiile Microsoft, tabelul afisat nu difera de cel anterior decat prin culoarea de fond.

<CAPTION a ALIGN=top|bottom|left|center|righti a VALIGN=top|bottomi> captare-tabel
</CAPTION>

adauga un titlu (captare) pentru tabel. Tagul CAPTION trebuie sa fie scufundat in tagul TABLE.

ALIGN=top|bottom este un atribut standard si arata pozitionarea titlului deasupra sau dedesubtul tabelului, titlul fiind centrat orizontal pe tabel; left|center|right sunt extensii Microsoft si indica alinierea orizontala a titlului in raport cu tabelul.
VALIGN fixeaza alinierea captarii in raport cu tabelul (sus/jos). Este extensie Microsoft, alinierea orizontala se precizeaza cu ALIGN. text este titlul tabloului.

Un exemplu uzual este

<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#ADEADA" ALIGN=center>

<CAPTION ALIGN=top>Tabelul I (exemplu)</CAPTION>
<TR><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
<TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR>
</TABLE>

Centrarea pe orizontala a tabelului, ca obiect, se poate face prin:
<center>
<TABLE ...>
... definire tabel
</TABLE>
<center>
Utilizarea extensiilor Microsoft
<CAPTION ALIGN=right VALIGN=top>Tabelul I (exemplu)</CAPTION> poate produce
in care ALIGN arata alinierea pe orizontala iar VALIGN pozitioneaza titlul in raport cu tabelul.
<TR a ALIGN=left|center|righti a VALIGN=top|middle|bottom|baselinei a BGCOLOR="#rrggbb"|culoarei a BORDERCOLOR="#rrggbb"|culoarei a BORDERCOLORLIGHT="#rrggbb"|culoarei a BORDERCOLORDARK="#rrggbb"|culoarei a BACKGROUND="URL-imagine"i>
a"continut-linie"i
a</TR>i

defineste o linie intr-un tabel. Acest tag trebuie sa fie scufundat in tagul TABLE si anume fiecare linie a tabelului care se vrea marcat trebuie sa aiba corespondent un tag TR.

ALIGN precizeaza modul in care continutul celulelor liniei se va alinia orizontal in interiorul celulelor;
VALIGN precizeaza modul in care continutul celulelor se va alinia vertical in interiorul celulelor;
BGCOLOR indica fondul colorat al liniei. Aceasta este extensie Netscape si Microsoft.
BORDERCOLOR este culoarea bordurii celulelor. Aceasta este o extensie Microsoft;
BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordura umbrita a celulelor. Aceasta este o extensie Microsoft;
BORDERCOLORDARK este culoarea umbrei dintr-o bordura umbrita a celulelor. Aceasta este o extensie Microsoft;
BACKGROUND specifica adresa URL a fisierului imagine utilizat drept fundal pentru fiecare celula a liniei. Aceasta este o extensie Microsoft. continut-linie contine tagurile TH sau TD de definire a celulelor liniei curente.

In exemplul urmator se vede cum setarile generale de aliniere si culoare, pentru intregul tabel, sunt inlocuite de cele precizate pentru o linie (cea de antet):

<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#ADEADA" ALIGN=center>
<CAPTION ALIGN=top>Tabelul II</CAPTION>
<TR BGCOLOR="#00AA00" ALIGN=right><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
<TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR>
</TABLE>

Utilizand extensiile Microsoft se poate evidentia o linie de tabel prin bordura sa:
<TABLE ...>
<CAPTION ...
<TR>...
<TR BORDERCOLORLIGHT=red BORDERCOLORDARK=black>
<TR>...
</TABLE>

<TH a ALIGN=left|center|righti a VALIGN=top|middle|bottom|baselinei a BACKGROUND="URL-imagine"i a COLSPAN=nni a ROWSPAN=mmi a BGCOLOR="#rrggbb"|culoarei a BORDERCOLOR="#rrggbb"|culoarei a BORDERCOLORLIGHT="#rrggbb"|culoarei a BORDERCOLORDARK="#rrggbb"|culoarei a NOWRAPi >
a"continut-celula"i
a</TH>i defineste o celula din antetul tabelui (capul de tabel). Continutul celulei va fi evidentiat, in general, prin scriere si centrare.

ALIGN, VALIGN indica alinierea orizontala si verticala, in celula, a continutului celulei;
COLSPAN specifica numarul de coloane peste care se intinde celula spre dreapta (operatiunea de unificare a celulelor pe orizontala din procesoarele de texte);
ROWSPAN specifica numarul de linii peste care se intinde celula in jos (operatiunea de unificare a celulelor pe verticala din procesoarele de texte);

In coloanele/liniile peste care s-au extins alte celule, extensiile nu se mai declara. Pentru aceste coloane/linii se vor declara doar celulele care apar aici pentru prima data (este ca si cum unele celule se obtin prin mostenirea unor linii/coloane anterioare).
NOWRAP anuleaza defilarea textului din celula pe mai multe linii;
BGCOLOR, BACKGROUND, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK precizeaza fundalul si culorile bordurilor celulei (vezi TABLE, TR). Primul atribut este extensie Netscape si Microsoft; urmatoarele sunt doar extensii Microsoft. continut-celula este informatia (textuala sau hipertext) a celulei.

Deoarece TH este un tag HTML 3.2, nu este recunoscut de toate broaserele cu atat mai mult extensiile Microsoft.

In exemplul urmator se va remarca extinderea antetului de tabel la doua linii, fiecare altfel formatata:

<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#ADEADA">
<TR BGCOLOR=cyan><TH COLSPAN=2 ALIGN=right>TABELUL III</TH></TR>
<TR BGCOLOR="#00AA00" ALIGN=right><TH>Coloana 1</TH><TH>Coloana 2</TH></TR>
<TR><TD>Celula 1.1</TD><TD>Celula 1.2</TD></TR>
<TR><TD>Celula 2.1</TD><TD>Celula 2.2</TD></TR>
</TABLE>

Prin jocul dintre liniile de antet si compactarea celulelor pe linii/coloane se poate crea imaginea unui tabel "rasturnat":
<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=10 BGCOLOR="#ADEADA">
<TR><TH ROWSPAN=2>TABELUL<BR> III</TH><TH>Linia 1</TH><TD>Celula 1.1</TD></TR>
<TR><TH>Linia 2</TH><TD>Celula 2.1</TD></TR>
</TABLE>

<TD a ALIGN=left|center|righti a VALIGN=top|middle|bottom|baselinei a BACKGROUND="URL-imagine"i a COLSPAN=nni a ROWSPAN=mmi a BGCOLOR="#rrggbb"|culoarei a BORDERCOLOR="#rrggbb"|culoarei a BORDERCOLORLIGHT="#rrggbb"|culoarei a BORDERCOLORDARK="#rrggbb"|culoarei a NOWRAPi >
a"continut-celula"i
a</TD>i defineste o celula din tabel (nu din antet).

ALIGN, VALIGN indica alinierea orizontala si verticala a continutului celulei;
COLSPAN specifica numarul de coloane peste care se intinde celula spre dreapta (operatiunea de unificare a celulelor pe orizontala din procesoarele de texte);
ROWSPAN specifica numarul de linii peste care se intinde celula in jos (operatiunea de unificare a celulelor pe verticala din procesoarele de texte);

In coloanele/liniile peste care s-au extins alte celule, extensiile nu se mai declara. Pentru aceste coloane/linii se vor declara doar celulele care apar aici pentru prima data (este ca si cum unele celule se obtin prin mostenirea unor linii/coloane anterioare).
NOWRAP anuleaza defilarea textului din celula pe mai multe linii;
BGCOLOR, BACKGROUND, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK precizeaza fundalul si culorile bordurilor celulei (vezi TABLE, TR). Primul atribut este extensie Netscape si Microsoft; urmatoarele sunt doar extensii Microsoft. continut-celula este informatia (textuala sau hipertext) a celulei.

Tagurile TH si TD se scufunda in tagul TR, astfel ca orice linie trebuie sa aiba atatea taguri TD (sau TH pentru linia antet) cate celule sunt initiate in respectiva linie.
Exemplul urmator este ilustrativ pentru unirea celulelor din linii uzuale (nu din antet), desi distintia intre modurile de definire nu este atat de mare:
<TABLE BORDER>
<CAPTION ALIGN=top>CULORI</CAPTION>
<TR><TD BGCOLOR=blue COLSPAN=2>albastru</TD><TD> </TD><TD></TD></TR>
<TR><TD> </TD><TD BGCOLOR=yellow COLSPAN=2>galben</TD><TD></TD></TR>
<TR><TD> </TD><TD> </TD><TD BGCOLOR=red COLSPAN=2>rosu</TD></TR>
</TABLE>

Extensiile Microsoft pentru tabele
Aceste extensii permit gruparea liniilor in linii de antet de tabel, linii de picior de tabel, linii de corp de tabel. Gruparea permite formatari globale, in general alinieri, pentru toate liniile unui grup.
Coloanele pot fi si ele grupate, fiecare grup fiind, daca se doreste, formatat global.
<THEAD> linii-antet
</THEAD>

defineste grupul liniilor din antetul tabelului.

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

<TBODY> corp-tabel
</TBODY>

defineste grupul liniilor din corpul tabelului.

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

<TFOOT> linii-picior
</TFOOT>

defineste grupul liniilor din piciorul de tabel.

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

<COLGROUP ALIGN=left|center|right a SPAN=nni>
a... </COLGROUP>i

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

ALIGN se refera la alinierea implicita a textului in toate celulele din coloanele grupate;
SPAN indica numarul coloanelor care se grupeaza pentru formatare. Implicit (lipsa atributului SPAN) este 1.

<COL ALIGN=left|center|right a SPAN=nni>
a</COL>i

formateaza un grup de coloane ale unui tabel. Coloanele sunt considerate potrivit ordinii de la stanga spre dreapta: primul tag COL se va referi la primele nn coloane, al doilea tag COL la urmatoarele coloane etc. Tagul COL se poate scufunda in tagul COLGROUP schimband setarea implicita data de COLGROUP.

ALIGN se refera la alinierea implicita a textului in toate celulele din coloanele considerate;
SPAN indica numarul coloanelor care se considera pentru formatare. Implicit (lipsa atributului SPAN) este 1.

Utilizarea extensiilor Microsoft pentru marcarea tabelelor pot produce urmatoarea structura 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 curenta
...
<TR><TD><TD> ... </TR> - linie curenta
</TBODY>
<TFOOT>
<TR><TD><TD> ... </TR> - linie picior
...
<TR><TD><TD> ... </TR> - linie picior
</TFOOT>
</TABLE>

Taguri COL si COLGROUP se pot scufunda in tagurile THEAD, TBODY si TFOOT pentru a schimba formatarile locale.