Descrierea tabelelor (elementul TABLE)

Descrierea tabelelor (elementul TABLE)

Descrierea unui tabel se face cu elementul TABLE. Acesta contine toate elementele ce specifica titlul, rîndurile, continutul si formatul acestora.

Tabelele sînt specificate în HTML rînd cu rînd, fiecare rînd continînd definitii pentru fiecare din celulele care îl formeaza. Prin urmare, pentru a defini un tabel se începe prin a defini rîndul din partea de sus, celula cu celula, apoi se defineste al doilea rînd, celul&# 838d35i 259; cu celula s.a.m.d. Coloanele sînt calculate automat pe baza numarului de celule care sînt în fiecare rînd. Perechea <TR>...</TR> defineste începutul, respectiv sfîrsitul rîndului, perechea <TH>...</TH> defineste o celula cap de tabel pe acest rînd, iar perechea <TD>...</TD> defineste o celula de date din rînd.

Exemplu:

<TABLE>

<TR>

<TH>Cap de tabel</TH>

<TD>Celula 1-1</TD>

<TD>Celula 1-2</TD>

<TD>Celula 1-3</TD>

</TR>

</TABLE>

De remarcat ca forma de scriere a codului HTML de mai sus are în vedere doar usurarea întelegerii codului de la o prima privire. Marea majoritate a navigatoarelor ignora spatiile libere si caracterul <CR>. O exceptie totusi: atunci cînd inserati o imagine într-una din celulele tabelului, pentru a obtine plasarea corecta a imaginii în toate browserele, se recomanda punerea tag-urile în acelasi rînd.

Exemplu:

<TD><IMG SRC="A.GIF"></TD>

La afisarea unui tabel, un browser trebuie sa realizeze urmatoarele operatii:

sa faca disponibil sumarul (definit cu summary) utilizatorului

sa afiseze titlul (explicatia) tabelului

sa afiseze antetul/headerul tabelului, apoi footerul, daca sînt specificate. Locul în care apar sînt bine definite (de exemplu la începutul/sfîrsitul fiecarei pagini listate)

sa calculeze numarul de coloane din tabel. Numarul de rînduri se stabileste simplu: numarul de elemente TR continute de TABLE.

sa grupeze coloanele în conformitate cu specificatiile de grupare a coloanelor

sa afiseze celulele rînd dupa rînd, grupate în coloanele corespunzatoare, între header si footer. Browserele vizuale formateaza tabelul utulizînd atributele si specificatiile de stil (style-sheet).

În acest fel, modelul de tabel din HTML 4.0 este proiectat astfel încît afisarea acestora sa se faca incremental, pe masura ce rîndurile tabelului sosesc, fara a astepta încarcarea completa.

Elementul TABLE

Sintaxa:

<TABLE> ...</TABLE>

Atribute posibile:

SUMMARY=Text (descrierea pe larg a continutului si structurii tabelului)

WIDTH=Length (latimea tabelului)

BORDER=Pixels (latimea marginii tabelului)

FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (margini externe)

RULES=[ none | groups | rows | cols | all ] (margini interne)

CELLSPACING=Length (spatierea între celule)

CELLPADDING=Length (spatierea în interiorul celulelor)

ALIGN=[ left | center | right ] (alinierea tabelului)

BGCOLOR=Color (culoarea de background a tabelului)

atribute comune

Contine:

Un element optional CAPTION, urmat de zero sau mai multe elemente COL si COLGROUP, urmat de un element optional THEAD, un element optional TFOOT, si apoi un element sau mai 7multe elemente optionale TBODY.

Continut în:

APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Descriere:

Orice tabel începe cu tag-ul: <TABLE> si se termina cu </TABLE>, între ele fiind continutul tabelului propriu-zis care poate contine o explicatie cu <CAPTION> si, în esenta, un numar oarecare de rînduri definite în principal cu <TR>.

CAPTION poate fi urmat, optional, de elemente COL si COLGROUP care specifica latimea coloanelor si modul de grupare al acestora. Apoi urmeaza THEAD, TFOOT si TBODY care definesc grupurile de rînduri. Un grup de rînduri contine elemente TR ce definesc rîndurile individual, care, la rîndul lor, contin elemente TH sau TD pentru celulele header sau de date.

Într-un tabel definit cu TABLE este necesar cel putin un element TBODY, dar ambele taguri de definire a acestui element sînt optionale daca nu exista decît un element TBODY si nu exista nici un THEAD sau TFOOT.

Atributul tag-ului <TABLE> WIDTH indica latimea tabelului în pagina data ca numar de pixeli sau ca procent din spatiul orizontal disponibil. Latimile date în pixeli (în special cele peste 500) ar trebui evitate întrucît, uneori, cauzeaza scroll inutil orizontal.

Un numar de atribute specifice tabelelor permit un control mai bun asupra pozitiei tabelelor în pagina si asupra textului care (eventual) curge pe lînga tabel:

Browser-ele trateaza în general tabelele ca fiind "flotante", continutul care urmeaza lui TABEL curgînd pe lînga el (daca se poate). Pentru a preveni aceasta manifestare se poate folosi elementul "break" <BR CLEAR=all> la sfirsitul lui TABLE.

<TABLE> mai poate fi folosit împreuna cu atributele UNITS si COLSPEC. UNITS poate avea ca valori PIXELS, EN (implicit) sau procente (RELATIVE) din dimensiunea totala a tabelului.

Atributul tag-ului <TABLE> FRAME, putin suportat acum de browsere, specifica marginile exterioare vizibile ale tabelului. Valorile posibile sînt:

void - nici o margine vizibila

above - marginea de sus

below- marginea de jos

hsides - marginile din stînga si dreapta

vsides - marginile de sus si jos

lhs - numai marginea din stînga

rhs - numai marginea din dreapta

box (border) - toate marginile

Valoarea implicita este void, daca nu este specificat atributul BORDER cu o valoare pozitiva, caz în care valoarea implicita este box. <TABLE BORDER> este o abreviere foarte bine suportata pentru <TABLE FRAME=border>.

Atributul RULES, si el destul de putin suportat de browsere, specifica marginile interioare vizibile (între celulele tabelului). Valorile posibile sînt:

none - nici o margine interioara vizibila

groups - numai marginile între grupurile de rînduri si coloane

rows - numai marginile între rînduri

cols - numai marginile între coloane

all - toate marginile interioare

Valoarea implicita este none daca BORDER=0 (sau se foloseste atributul no BORDER). Orice alta folosire a lui BORDER are ca efect trecerea lui all ca valoare implicita.

Atributul BGCOLOR sugereaza o culoare de background pentru tabel. Poate fi folosita în combinatie cu <FONT COLOR= >, dar efectele pot fi imprevizibile daca se ia în considerare posibilitatea de suprascriere a acestor atribute de catre browsere. Metoda recomandata este cea a style-sheet-urilor.

Atributul tag-ului <TABLE> BORDER     indica latimea chenarului tabelului, CELLSPACING - spatiul dintre celulele tabelului, iar CELLPADDING - spatiul dintre marginile celulelor si continut. Figura urmatoare sugereaza aceste elemente:

Exemplu:

Un tabel simplu ar putea fi descris astfel:

<TABLE>

<CAPTION>Common Usenet Abbreviations</CAPTION>

<THEAD>

<TR>

<TH>Abbreviation</TH>

<TH>Long Form</TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>AFAIK</TD>

<TD>As Far As I Know</TD>

</TR>

<TR>

<TD>IMHO</TD>

<TD>In My Humble Opinion</TD>

</TR>

<TR>

<TD>OTOH</TD>

<TD>On The Other Hand</TD>

</TR>

</TBODY>

</TABLE>

Exemplu:

Un alt exemplu de tabel poate fi urmatorul:

<TABLE border="1"

summary="This table gives some statistics about... ">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR>

<TH rowspan='"2">

<TH colspan="2">Average

<TH rowspan='"2">Red<BR>eyes

'

<TR>

<TH>height

<TH>weight

<TR>

<TH>Males

<TD>1.9

<TD>0.003

<TD>40%

<TR>

<TH>Females

<TD>1.7

<TD>0.002

<TD>43%

</TABLE>

si el ar putea arata cu un browser negrafic ca în figura urmatoare:

A test table with merged cells

/-------- ----- ------ --------\

| | Average | Red |

| |----- ----- --------- eyes |

| height | weight | |

|-------- ----- ------ --------|

Males | 1.9 | 0.003 | 40% |

|-------- ----- ------ --------|

| Females    | 1.7 | 0.002 | 43% |

\-------- ----- ------ --------/

iar cu unul grafic astfel: