verde.ro - cu noi internetul este simplu

Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink



exploateaza internetul la maxim

CAP 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):

1

Tabelul de mai sus contine 3 randuri, fiecare rand continand 5 elemente.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>

Va prezentam si doua tabele atipice:

CELULA 1	CELULA 2	CELULA 3
CELULA 4

Un asemenea tabel s-ar codifica astfel:

<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:

CELULA 1	CELULA 2	CELULA 3
CELULA 4	CELULA 5	CELULA 3

Si codul este:

<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.

< continuare > CAP III << | CAP IV | >> CAP V | Pagina principala | Nelamuriri sau intrebari? Scrie-ne

CUPRINS
INTRODUCERE
CAP I - Structura paginii
CAP II - Despre texte
CAP III - Despre culori
CAP IV - Despre tabele
CAP V - Exemple de tabele
CAP VI - Link-uri si pozitionare
CAP VII - Ultimele retusuri
CAP VIII - Despre imagini
CAP IX - Despre cadre (frames)
CAP X - Grafica pe web
CAP XI - Design pe web
CAP XII - Continut pe web
CAP XIII - Continut extern
CAP XIV - Testare si verificare
CAP XV - Gazduire pagini
CAP XVI - Nume domenii
CAP XVII - Promovare pagina
CAP XVIII - Intretinere pagina
CAP XIX - Incheiere

~ (C) reddog 2006. Ai ceva de spus, de intrebat, de criticat sau laudat? scrie. Acceptam si propuneri de colaborare ~