Limbajul HTML

Limbajul HTML

8. Tabele

Tabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare domeniu 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 </tr> este optionala.
Un rand este format din mai multe celule ce contin date.
O celula de date se introduce cu eticheta <td>..</td>.
<html> <head><title>tabelex_1</title></head> <body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr>
<table>
<tr> <td>cell 11 <td>cell 11
<tr> <td>cell 21 <td>cell 22
<tr> <td>cell 31 <td>cell 32
<tr> <td>cell 41 <td>cell 42
</table> </body> </html>

In mod prestabilit, un tabel nu are chenar. pentru a adauga un chenar unui tabel, se utilizeaza un atribut al etichetei <tabel> 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 urmata 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.
<html> <head><title>tabelex_2</title></head> <body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border="4">
<tr> <td>cell 11 <td>cell 11
<tr> <td>cell 21 <td>cell 22
<tr> <td>cell 31 <td>cell 32
<tr> <td>cell 41 <td>cell 42
</table> </body> </html>

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 ( <table align="left"> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului.
daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea stanga a tabelului.
daca tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii, imediat sub tabel.

<html> <head><title>tabelex_3</title></head> <body><h1 align=center>Un tabel aliniat la dreapta</h1><hr> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.
<table border align="right">
<tr> <td>cell 11 <td>cell 11
<tr> <td>cell 21 <td>cell 22
</table>Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. </body> </html>

Daca schimbam alinierea tabelului la centru atunci exemplul anterior va arata asa sau la stanga atunci va arata asa.
Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu ajutorul atributelor hspace si vspace al etichetei <table>. Valoarea atributului hspace poate fi orice numar pozitiv, inclusiv 0, si reprezinta distanta pe orizontala dintre tabel si celelalte elemente ale paginii Web.
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii Web.
Aceste atribute functioneaza numai cu Netscape Communicator.
Exemplul cu aceste atribute gasiti aici.
Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului bgcolor, care poate fi atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare.
Daca in tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmatoarea: <td>, <tr>, <table> ( cu prioritate cea mai mica ).
<html> <head><title>tabelex_4</title></head> <body><h1 align=center>Un tabel simplu colorat</h1><hr>
<table border="3" bgcolor="green">
<tr> <td>verde 11 <td bgcolor="red">rosu 11
<tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22
<tr bgcolor="cyan"> <td>cell 31 <td>cell 32
<tr> <td>cell 41 <td bgcolor="white">cell 42
</table> </body> </html>

Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei: <font color="valoare">...</font>.

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.
<html> <head><title>tabelex_5</title></head> <body><h1 align=center>Un tabel fara chenar de celule alipite</h1><hr>
<table cellspacing="0">
<tr> <td bgcolor="gray">gri 11 <td bgcolor="red">rosu 12
<tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22
</table> </body> </html>

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 ei.
Valorea prestabilita a atributului cellpadding este 1.
<html> <head><title>tabelex_6</title></head> <body><h1 align=center>Un tabel de celule mari</h1><hr>
<table border cellpadding="20">
<tr> <td>gri 11 <td>rosu 12
<tr> <td>albastru 21 <td>galben 22
</table> </body> </html>

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:

numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului;
numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si inaltimea totala a paginii.

<html> <head><title>tabelex_7</title></head> <body><h1 align=center>Un tabel de de 200 pixeli X 50 %</h1><hr>
<table border width="200" height="50%">
<tr> <td>cell 11 <td>cell 12
<tr> <td>cell 21 <td>cell 22
</table> </body> </html>

In exemplul urmator se utilizeaza un truc care permite afisarea intr-o pagina Web a unui text pozitionat in centrul paginii.
<html> <head><title>tabelex_8</title></head> <body><h1 align=center>Un text centrat intr-o pagina</h1>
<table width="100%" height="100%">
<tr> <td align="center">
<h2>Text centrat.</h2>
</table> </body> </html>

Titlul unui tabel

Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ).
Aceasta eticheta trebuie plasata in interiorul etichetelor <table>...</table>, dar nu in interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:

" bottom " ( sub tabel );
" top " ( deasupra tabelului );
" left " ( la stanga tabelului );
" right " ( la dreapta tabelului ).

<html> <head><title>tabelex_9</title></head> <body><h1 align=center>Un tabel cu titlu</h1>
<table border><caption align="top">Masini
<tr><td>Mercedes<td>Citroen<td>Jaguar
<tr><td>BMW<td>Volvo<td>Renault
</table> </body> </html>

Cap de tabel

Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) in loc de <td>.
Toate atribute care pot fi atasate etichetei <td> pot fi de asemenea atasate etichetei <th>. Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
<html> <head><title>tabelex_10</title></head> <body><h1 align=center>Un tabel cu titlu si cap de tabel</h1>
<table border><caption align="bottom">Preturile masinii
<tr><th>Pret<th>Citroen<th>Jaguar<th>BMW<th>Volvo <tr><th>In dolari<td>5000<td>100000<td>50000
<td>80000
<tr><th>In lei<td>2000000<td>2000000000<td>2000000
<td>16000000
</table> </body> </html>

Alinierea continutului unei celule

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului align care poate lua valorile:

" left " ( la stanga );
" center " ( centrat , valoarea prestabilita );
" right " ( la dreapta );
" 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:

" baseline " ( la baza );
" bottom " ( jos );
" middle " ( la mijloc, valoarea prestabilita );
" top " ( sus ).

Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula.
<html> <head><title>tabelex_11</title></head> <body><h1 align=center>Un tabel avand continutul celulelor aliniate</h1>
<table border width="50%" height="50%">
<tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr>
<td align="left">stanga
<td align="center">centru<td valign="top">sus <td valign="bottom">jos
<tr align="left"><td>aici<td>alinierea <td>este centru<td>stanga (implicita) </table> </body> </html>

Dimensionarea exacta a celulelor unui tabel

Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a doua atribute ale acestor etichete: width pentru latime si height pentru inaltime.
Valorile posibile ale acestor atribute sunt:

numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule;
procente din latimea , respectiv inaltimea tabelului.

<html> <head><title>tabelex_12</title></head> <body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1><hr>
<table border>
<tr> <td width="100" height="150">cell 11 <td width="100" height="150">cell 11
<tr> <td width="100" height="150">cell 21 <td width="100" height="150">cell 22
</table></body> </html>

Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule.Cu ajutorul a doua atribute ale etichetelor <td> si <th>, o celula se poate extinde peste celule vecine.
Astfel:

extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a carui valoare determina numarul de celule care se unifica.
extinderea unei celule peste celulele dedesubt 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 etichetele <td> si <th> vor fi prezente ambele atribute colspan si rowspan.
<html> <head><title>tabelex_13</title></head> <body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border>
<tr> <td rowspan="3">cell 11<br>cell 21<br>cell 31 <td>cell 12<td colspan="2" rowspan="3">cell 13 ,cell 14<br>cell 23, cell 24<br>cell 33, cell 34
<tr> <td>cell 22
<tr> <td>cell 32
<tr> <td>cell 41 <td colspan="3">cell 42,cell 43,cell 44
</table> </body> </html>

Atributul " nowrap "

Atributul nowrap apartine elementelor <td> si <th> ; el interzice intreruperea unei linii de text.Astfel , in tabel pot aparea coloane cu o latime oricat de mare.
<html> <head><title>tabelex_14</title></head> <body><h1 align=center>Un tabel cu celule de latime mare</h1><hr>
<table border>
<tr> <td>cell 11 <td>cell 12
<tr> <td nowrap>cell 21 <td>cell 22 este foarte lata,aceasta celula este foaret lata.
</table> </body> </html>

Celule vide ale unui tabel

daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara un chenar de delimitare.
In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele trucuri:

dupa <td> se pune  ;
dupa <td> se pune <br>.

Caracterul   ( no break space ) este de fapt caracterul spatiu.Un spatiu introdus prin im\ntermediul acestui caracter nu va fi ignorat de browser.
<html> <head><title>tabelex_15</title></head> <body><h1 align=center>Un tabel cu celule vide</h1><hr>
<table border>
<tr> <td>cell 11 <td>cell 12<td>cell 13
<tr> <td> <td> <td>
</table> </body> </html>

Atribute Internet Explorer pentru tabele

Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4.0 , 5.0, dar nu cu Netscape Communicator 4.5:

background permite stabilirea unei imagini pentru fondul unui tabel.Primeste ca valoare adresa URL a imaginii folosite pentru fond;
bordercolor permite stabilirea culorii pentru chenarul unui tabel;
bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;

<html> <head><title>tabelex_16</title></head> <body><h1 align=center>Atribute "Internet Explorer"</h1><hr>
<table border="5" background=".../images/ubm1.jpg" cellspacing=15 bordercolor="maroon" bordercolodark="red">
<tr bgcolor="yellow"> <td>cell 11 <td>cell 12<td>cell 13
<tr bgcolor="yellow"> <td> <td> <td>
</table> </body> </html>

Grupuri de coloane

Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:

span determina numarul de coloane dintr-un grup;
width determina o latime unica pentru coloanele din grup;
align determina un tip unic de aliniere pentru coloanele din grup.
Exemplu:
<colgroup span="3" width="100"></colgroup>
Intr-un bloc <colgroup>, coloanele pot avea configurari diferite daca se utilizeaza elementul <col>, care admite atributele:

span identifica acea coloana din grup pentru care se face configurarea.Daca lipseste, atunci coloanele sunt configurate in ordine;
width determina o latime pentru coloana identificata prin span;
align determina o aliniere pentru coloana identificata prin span.

<html> <head><title>tabelex_17</title></head> <body><h1 align=center>Grupuri de coloane</h1><hr>
<table width="400" cellspacing=10>
<colgroup> <col width="100" align=right> <col width="100" align=center> <col width="200" align=right> </colgroup>
<tr> <td valign=top>Text in prima coloana.Text in prima coloana.Text in prima coloana. Text in prima coloana. <td valign=top>Text in coloana doua.Text in coloana doua.Text in coloana doua.Text in coloana doua. <td valign=top>Text in coloana a treia.Text in coloana a treia.Text in coloana a treia.Text in coloana a treia.
</table> </body> </html>

Atributele frame si rules

Atributul frame al etichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate.
Valorile posibile ale acestui atribut sunt:

void - elimina toate muchiile exterioare ale tabelului;
above - afiseaza o muchie in partea superioara a cadrului tabelului;
below - afiseaza o muchie in partea inferioara a cadrului tabelului;
hsides - afiseaza cate o muchie in partea superioara si inferioara cadrului tabelului;
lhs - afiseaza o muchie in partea din stanga a cadrului tabelului;
rhs - afiseaza o muchie in partea din dreapta a cadrului tabelului;
vsides - afiseaza o muchie in partea din stanga si din dreapta a cadrului tabelului;
box - afiseaza o muchie pe toate laturile cadrului tabelului;
border - afiseaza o muchie pe toate laturile cadrului tabelului;

Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:

none - elimina toate muchiile interioare ale tabelului;
groups - afiseaza muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>si <colgroup>.
rows - afiseaza muchii orizontale intre toate liniile tabelului;
cols - afiseaza muchii verticale intre toate coloanele tabelului;
all - afiseaza muchii intre toate liniile si coloanele;

<html> <head><title>tabelex_18</title></head> <body><h1 align=center>Atributele frames si rules</h1>
<table width="400" frame=box rules=rows cellspacing=10>
<tr> <td>cell 11 <td>cell 12<td>cell 13
<tr> <td>cell 21 <td>cell 22<td>cell 23
</table> </body> </html>

Subblocurile unui tabel

In specificatiile HTML 4.0, continutul unui tabel poate fi impartit in subblocuri prin elementele:

<thead><tr><td>...</thead> ( un singur rand );
<tfoot><tr><td>...</tfoot> ( un singur rand );
<tbody><tr><td>...</tbody> ( oricate randuri );

Intr-un tabel exista un singur subbloc de tipul <thead> si un singur subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.

1111

| Ce este HTML ? | Primii pasi | Fonturi | Blocuri de text | Imagini | Legaturi | Liste | Tabele |

| Ferestre in HTML | Formulare | Stiluri | Javascript | Tag-uri |

[ HOME ]