bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online Pe HaiSaRadem.ro vei gasi bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online. Nu ne crede pe cuvant, intra pe HaiSaRadem.ro ca sa te convingi.
     
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 1CELULA 2CELULA 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 1CELULA 2CELULA 3
CELULA 4CELULA 5

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 ~