Curs de realizare pagini Web folosind limbajul HTML

Capitolul IV – Despre tabele

Tabelele se utilizeaza folosind tag-ul <TABLE>…</TABLE>. Imaginati-va un tabel simplu deschis in Word care cuprinde mai multe casute. In fisierul HTML, casutele sunt organizate pe randuri (rows – linii orizontale de casute). La randul lor, randurile sunt organizate in elemente (casute).

In interiorul unui tag de tip TABLE, randurile sunt declarate folosind tag-ul <TR>…</TR>, iar in cadrul fiecarui tag TR elementele sunt declarate cu tag-ul <TD>…</TD>. Fiecare element (casuta) poate contine text, imagini, link-uri, etc. Un tabel de tipul celui de mai sus ar fi codificat astfel:

<TABLE>
<TR><TD>1</TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>

In exemplul de mai sus avem un tag <TABLE>…</TABLE> care delimiteaza tabelul si trei tag-uri <TR>…</TR> corespunzand celor trei randuri ale tabelului. Fiecare tag TR contine cate 5 tag-uri <TD>…</TD>. Intre <TD> si </TD> se introduce continutul efectiv al fiecarei casute. In exemplul de mai sus numai casuta din stanga-sus are continut – cifra 1 (nu incercati exemplul de mai sus, intrucat casutele fara continut nu sunt afisate).

Tag-urile de definire a tabelelor pot avea diverse atribute, pentru formatarea tabelului. Astfel, tag-ul TABLE poate avea:
- WIDTH=x sau WIDTH=x% – acesta specifica lungimea intregului tabel in pixeli (de exemplu WIDTH=500) sau in procente fata de lungimea intregii ferestre (de exemplu WIDTH=50%);
- HEIGHT=x sau HEIGHT=x% – similar cu WIDTH, dar pentru inaltimea intregului tabel (exemple: HEIGHT=300 sau HEIGHT=100%);
- BORDER=x – daca x este 1 atunci tabelul va avea si “cadru” (linii de delimitare a elementelor. Daca x este 0, atunci acestea vor lipsi (deci BORDER=0 sau BORDER=1);
- CELLSPACING=x – specifica spatiul dintre casute, in pixeli;
- CELLPADDING=x – specifica spatiul dintre marginea unei casute si continutul acesteia, in pixeli.
Si in acest caz pot fi folosite toate aceste atribute impreuna, numai o parte a lor, sau nici unul. Un tag TABLE ce le foloseste pe toate ar arata astfel:

<TABLE WIDTH=80% HEIGHT=200 BORDER=1 CELLPADDING=0 CELLSPACING=5>
……….
</TABLE>

Si tag-ul TD poate avea tot felul de atribute interesante:
- WIDTH=x sau WIDTH=x% – lungimea casutei in pixeli sau ca procent din lungimea intregului tabel;
- HEIGHT=x sau HEIGHT=x% – inaltimea casutei in pixeli sau ca procent din inaltimea intregului tabel;
- BGCOLOR=#RRGGBB – culoarea fundalului casutei, ca de exemplu BGCOLOR=#EEEEDD.
- ALIGN=RIGHT, ALIGN=LEFT sau ALIGN=CENTER – modul cum va fi pozitionat continutul casutei in casuta: la dreapta, la stanga sau central;
- VALIGN=TOP, VALIGN=BOTTOM sau VALIGN=CENTER – similar, dar pentru pozitionarea pe verticala: sus, jos sau central.
Tine cont de faptul ca textul din interiorul unei casute trebuie formatat si el la randul sau. O casuta ce ar contine un text rosu pe fond verde deschis s-ar codifica astfel:

<TD BGCOLOR=#DDFFDD><FONT COLOR=#AA0000>text</FONT></TD>

2 exemple de tabele atipice:

<TABLE>
<TR><TD>CELULA 1</TD><TD>CELULA 2</TD><TD>CELULA 3</TD></TR>
<TR><TD COLSPAN=3>CELULA 4</TD></TR>
</TABLE>

Noteaza utilizarea atributului COLSPAN=3 in prima celula a celui de-al doilea rand. Acesta spune ca celula respectiva se “intinde” pe lungimea a trei celule din structura normala a tabelului.Desigur, acest al doilea rand va contine numai o singura celula, nu trei. Similar se poate proiecta un tabel cu o celula care se intinde pe verticala pe spatiul a doua celule.

<TABLE>
<TR><TD>CELULA 1</TD><TD>CELULA 2</TD>
<TD ROWSPAN=2>CELULA 3</TD></TR>
<TR><TD>CELULA 4</TD><TD>CELULA 5</TD></TR>
</TABLE>

Se observa utilizarea atributului ROWSPAN=2 in a treia celula a primului rand al tabelului. Acesta spune ca aceasta celula se intinde pe verticala pe “inaltimea” a doua randuri. Desigur, cel de-al doilea rand contine numai doua celule (nu trei), intrucat a treia vine din randul de sus.

Tabelele pot reprezenta un instrument foarte puternic in cadrul unui fisier HTML. O tehnica interesanta de pozitionare cat mai exacta a unor informatii consta in utilizarea unor tabele in tabele (tag-uri TD care au drept continut un tabel, de exemplu). In acest caz este foarte importanta succesiunea corecta a tag-urilor TD, TR si TABLE pentru o afisare corecta. O alta tehnica interesanta este utilizarea tabelelor cu BORDER=0 (fara cadru) pentru gruparea unor date fara a da impresia existentei unui tabel propriu-zis.

 

Leave a Reply