| PROIECTARE SITE WEB > DOCUMENTATIE - HTML - Tabele |
Proiectare Site si Web Design - Standardul HTML
Tabele in HTML
Tabelele ne permit sa cream o retea dreptunghiulara de zone, fiecare
zona avand propriile optiuni pentru culoarea fondului, culoarea textului,
alinierea textului, etc.
Pentru a insera un tabel se folosesc etichetele corespondente <TABLE>...</TABLE>.
Un tabel este format din randuri. Pentru a insera un rand intr-un
tabel se folosesc etichetele <TR> ...</TR>
(de la "table row" = rand de tabel ). Folosirea etichetei
de sfarsit este optionala. Un rand este format din mai multe celule
ce contin date. O celula de date se introduce cu etichetele <TD>...</TD>.
In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar
unui tabel, se utilizeaza un atribut al etichetei numit "border".
Acest atribut poate primi ca valoare orice numar intreg (inclusiv
0) si reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul
"border" nu este urmat de o valoare, atunci tabelul va avea
o grosime prestabilita egala cu 1 pixel. O valoare egala cu 0 a grosimii
semnifica absenta chenarului. Cand atributul "border" are
o valoare nenula, chenarul unui tabel are un aspect tridimensional.
Alinierea tabelului
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul
"align" al etichetei <TABLE>, cu urmatoarele
valori posibile: "left" (valoarea prestabilita), "center"
si "right ". Alinierea este importanta pentru textul ce
inconjoara tabelul. Astfel:
- daca tabelul este aliniat stanga, atunci textul
care urmeaza dupa punctul de inserare al tabelului va fi dispus
in partea dreapta a tabelului.
- daca tabelul este aliniat dreapta, atunci textul care urmeaza
dupa punctul de inserare al tabelului va fi dispus in partea stanga
a tabelului.
- daca tabelul este aliniat pe centru, atunci textul care urmeaza
dupa punctul de inserare al tabelului va fi afisat pe toata latimea
paginii, imediat sub tabel.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabileste cu ajutorul atributului "bgcolor",
care poate fi atasat intregului tabel prin specificarea in cadrul
etichetei <table> sau numai celulor de date prin specificarea
sa in etichetele de celula (<td>). Valorile pe care le poate
primi atributul "bgcolor" sunt cele cunoscute pentru o culoare.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se defineste cu ajutorul atributului
"cellspacing" al etichetei <TABLE>. Valorile
acestui atribut pot fi numere intregi pozitive, inclusiv 0, si reprezinta
distanta in pixeli dintre doua celule vecine. Valorea prestabilita
a atributului "cellspacing" este 2. Distanta dintre marginea
unei celule si continutul ei poate fi definita cu ajutorul atributului
"cellpadding" al etichetei <TABLE>. Valorile
acestui atribut pot fi numere intregi pozitive si reprezinta distanta
in pixeli dintre celule si continutul lor. Valorea prestabilita a
atributului "cellpadding" este 1.
Dimensionarea unui tabel
Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite
exact prin intermediul a doua atribute - "width"
si "height" - ale etichetei <TABLE>. Valorile
acestor atribute pot fi:
1. numere intregi pozitive reprezentand latimea respectiv
inaltimea in pixeli a tabelului;
2. numere intregi intre 1 si 100, urmate de semnul
%, reprezentand fractiunea din latimea si inaltimea totala a paginii.
Alinierea continutului unei celule
Alinierea pe orizontala a continutului unei celule se face cu ajutorul
atributului "align" care poate lua valorile:
1. "left" (la stanga);
1. "center" (centrat) - valoarea prestabilita;
3. "right" (la dreapta);
4. "char" (alinierea se face fata de un
caracter).
Alinierea pe verticala a continutului unei celule se face cu ajutorul
atributului "valign" care poate lua valorile:
1. "baseline" (la baza);
2. "bottom" (jos);
3. "middle" (la mijloc, valoarea prestabilita);
4. "top" (sus).
Exemplu
de tabel reunind toate elementele descrise pana acum:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15"
width="100%">
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>
Tabele cu forme oarecare
Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul
a doua atribute ale etichetelor <TR> si <TD>, o celula
se poate extinde peste celule vecine. Astfel:
1. extinderea unei celule peste celulele
din dreapta ei se face cu ajutorul atributului "colspan",
a carui valoare determina numarul de celule care se unifica.
2. extinderea unei celule peste celulele de sub ea
se face cu ajutorul atributului "rowspan",
a carui valoare determina numarul de celule care se unifica.
Sunt posibile extinderi simultane ale unei celule pe orizontala si
pe verticala. In acest caz, in etichete vor fi prezente ambele atribute
"colspan" si "rowspan".
Exemplu:
<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15"
width="100%">
<tr>
<td align="middle" rowspan="3">data data
data</td>
<td align="middle" colspan="2">data data
data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>
|
Creare
si actualizare site