Inserare unui tabel

Inserare unui tabel

- Cum se foloseste marcajul <table> -

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 (ca 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>. Codul HTML pentru crearea unui tabel cu trei linii si doua coloane este:
 

<TABLE BORDER>
<TR>
<TH> Nume
</TH>
<TH> Telefon
</TH>
</TR>
<TR>
<TD> Bogdan
</TD>
<TD> 444222
</TD>
</TR>
<TR>
<TD> Andrei
</TD>
<TD> 222444
</TD>
</TR>
</TABLE>

Se obtine urmatorul tabel:

S-a folosit atributul BORDER pentru a desena un tabel in care se vad liniile ce formeaza celulele. Absenta atributului determina obtinerea unui tabel fara liniatura.

Celulele tabelului, fie ca fac parte din capul de tabel sau sunt celule obisnuite, pot contine orice marcaj acceptat de HTML, inclusiv legaturi sau alte tabele. Celulele vide nu sunt afisate dar, daca dorim acest lucru, trebuie sa introducem macar un tag <BR> pentru a face celula vizibila.

In exemplul urmator avem un tabel cu trei linii si patru coloane, in care celulele au fost facute vizibile prin introducerea tagului <BR> si a caracterului spatiu (nbsp precedat de &). Marginea groasa a tabelului a fost obtinuta prin specificarea valorii 5 pentru atributul BORDER.
 

Efectul obtinut este unul decorativ. Sursa Html este urmatoarea:

<TABLE Border=5>   <TR> <TH> <BR>  </TH> <TH> <BR>  </TH> <TH> <BR>  </TH> <TH> <BR>  </TH>   </TR>   <TR> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD>   </TR>   <TR> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD> <TD> <BR>  </TD>   </TR> </TABLE> <BR>

Pentru atasarea unei explicatii se foloseste tagul:

<CAPTATION ALIGN='aliniere'> Explicatie </CAPTATION>

unde tipul de aliniere poate fi:

TOP-explicatia este plasata deasupra tabelului (optiune implicita);

BOTTOM-explicatia este plasata dedesuptul tabelului;

Marcajul pentru explicatie trebuie plasat imediat dupa tagul TABLE, inainte de a se incepe definirea randurilor tabelului.

Alinierea datelor in tabel

Alinierea datelor in celulele tabelului se poate face prin doua atribute:

ALIGN -defineste alinierea orizontala si poate lua valorile:

o        LEFT- datele aliniate la stanga;

o        RIGHT-datele aliniate la dreapta;

o        CENTER- datele sunt centrate;

VALIGN- defineste alinierea verticala si poate avea valorile:

o        TOP - datele sunt aliniate la marginea de sus a celulei;

o        BOTTOM -datele sunt aliniate la baza celulei;

o        MIDDLE - datele sunt centrate vertical la mijlocul celulei;

Atributele de aliniere pot fi plasate in tagurile ce delimiteaza liniile si in tagurile ce definesc celulele. Daca plasam atributul ALIGN=left in tagul TABLE, textul care urmeaza tabelului 'curge' pe langa acesta (tabelul este aliniat in stanga ferestrei navigatorului iar in dreapta sa se afiseaza textul. Folosirea atributului ALIGN=right plaseaza tabelul in marginea dreapta iar textul 'curge' in partea stanga a tabelului.

Reluam primul exemplu, utilizand o aliniere diferita pentru liniile si celulele tabelului:

iar sursa Html este:

<TABLE Border>   <TR Valign=TOP> <TH> Nume si prenume </TH> <TH> Telefon    </TH>   </TR>   <TR> <TD Align=left> <BR> Bogdan<BR>  </TD> <TD Align=right> 444222 </TD>   </TR>   <TR> <TD Valign=Middle><BR> <BR> Andrei<BR>  </TD> <TD Valign=Bottom> 222444 </TD>   </TR> </TABLE>

Celule extinse

Daca dorim sa organizam datele in tabel astfel incat este nevoie ca o celula sa se intinda pe mai multe linii sau coloane, avem la dispozitie atributele:

COLSPAN = n - permite unei celule sa se intinda pe n coloane;

ROWSPAN = n - permite unei celule sa se intinda pe n randuri;

Cele doua atribute pot fi plasate in tagurile folosite pentru specificarea celulelor de date. Celulele de date se pot extinde intotdeauna in jos si/sau spre dreapta.