Pagina de start a forumului ImperiumSv.MyForum.ro ImperiumSv.MyForum.ro
Bine ati venit pe Forumul Aliantei ImperiumSv
 
 FAQFAQ   CautareCautare   MembriMembri   GrupuriGrupuri   InregistrareInregistrare 
 ProfilProfil   Mesaje privateMesaje private   AutentificareAutentificare 

Tabele

 
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului ImperiumSv.MyForum.ro -> Limbajul HTML
Subiectul anterior :: Subiectul urmator  
Autor Mesaj
marin
Founder
Founder
marin

Data inscrierii: 04/Apr/2008
Mesaje: 48
Localitate: suceava
MesajTrimis: 09/04/2008 15:13    Titlul subiectului: Tabele Raspunde cu citat (quote)
Tabelele ne consimt 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>.

Cod:
<html>
    <head><title>tabelex_1</title></head>
    <body><h1>Un tabel modest compus din 4 linii si 2 coloane</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 11</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td></tr>
    <tr> <td>cell 31</td> <td>cell 32</td></tr>
    <tr> <td>cell 41</td> <td>cell 42</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_1.html]vezi acest exemplu[/url]

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 alură tridimensional.

Cod:
<html>
    <head><title>tabelex_2</title></head>
    <body><h1>Un tabel rudimentar cu chenar</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 11</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td></tr>
    <tr> <td>cell 31</td> <td>cell 32</td></tr>
    <tr> <td>cell 41</td> <td>cell 42</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_2.html]vezi acest exemplu[/url]

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> ), atunci textul care urmeaza dupa punctul de inserare al
tabelului va fi dispus in partea dreapta a tabelului.
* daca tabelul este aliniat dreapta ( <table> ), atunci textul care urmeaza dupa punctul de inserare
al tabelului va fi dispus in bucată stanga a tabelului.
* daca tabelul este aliniat pe centru ( <table> ), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii, fără întârziere sub tabel.

Cod:
<html>
    <head><title>tabelex_3</title></head>
    <body><h1>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>
    <tr> <td>cell 11</td> <td>cell 11</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td></tr>
    </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>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_3.html]vezi acest exemplu[/url]

Daca schimbam alinierea tabelului la centru atunci exemplul anterior va arata[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_3_1.html]asa[/url]
sau la stanga atunci va arata [url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_3_2.html]asa.[/url]

Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu susținerea atributelor hspace si vspace al etichetei <table>. Valoarea atributului hspace poate fi absolut 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 [url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_3_3.html]aici.[/url]

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 numeroase semnale bgcolor, atunci prioritatea este urmatoarea: <td>, <tr>, <table> ( cu prioritate cea mai mica ).

Cod:
<html>
    <head><title>tabelex_4</title></head>
    <body><h1>Un tabel necomplicat colorat</h1><hr>
    <table>
    <tr> <td>verde 11</td> <td>rosu 11</td></tr>
    <tr> <td>albastru 21</td> <td>galben 22</td></tr>
    <tr> <td>cell 31</td> <td>cell 32</td></tr>
    <tr> <td>cell 41</td> <td>cell 42</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_4.html]vezi acest exemplu[/url]

Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei:
Cod:
<font>...</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.

Cod:
<html>
    <head><title>tabelex_5</title></head>
    <body><h1>Un tabel fara chenar de celule alipite</h1><hr>
    <table>
    <tr> <td>gri 11</td> <td>rosu 12</td></tr>
    <tr> <td>albastru 21</td> <td>galben 22</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_5.html]vezi acest exemplu[/url]

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.

Cod:
<html>
    <head><title>tabelex_6</title></head>
    <body><h1>Un tabel de celule mari</h1><hr>
    <table>
    <tr> <td>gri 11</td> <td>rosu 12</td></tr>
    <tr> <td>albastru 21</td> <td>galben 22</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_6.html]vezi acest exemplu[/url]

Dimensionarea unui tabel

Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite întocmai prin intermediul a doua atribute, width si height, ale etichetei <table>.
Valorile acestor semne pot fi:
* numere intregi optimiste 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.

Cod:
<html>
    <head><title>tabelex_7</title></head>
    <body><h1>Un tabel de de 200 pixeli X 50 %</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 12</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_7.html]vezi acest exemplu[/url]

In exemplul urmator se utilizeaza un truc care îngăduie afisarea intr-o pagina Web a unui text pozitionat in centrul paginii.

Cod:
<html>
    <head><title>tabelex_8</title></head>
    <body><h1>Un text centrat intr-o pagina</h1>
    <table>
    <tr> <td>
    <h2>Text centrat.</h2>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_8.html]vezi acest exemplu[/url]

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

Cod:
<html>
    <head><title>tabelex_9</title></head>
    <body><h1>Un tabel cu titlu</h1>
    <table><caption>Masini
    <tr><td>Mercedes </td><td>Citroen </td><td>Jaguar </td></tr>
    <tr><td>BMW </td><td>Volvo </td><td>Renault </td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_9.html]vezi acest exemplu[/url]

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.

Cod:
<html>
    <head><title>tabelex_10</title></head>
    <body><h1>Un tabel cu titlu si cap de tabel</h1>
    <table><caption>Preturile masinii
    <tr><th>Pret</th>
    <th>Citroen</th>
    <th>Jaguar</th>
    <th>BMW</th>
    <th>Volvo</th></tr>
    <tr><th>In dolari</th>
    <td>5000</td>
    <td>100000</td>
    <td>50000</td>
    <td>80000</td></tr>
    <tr><th>In lei</th>
    <td>15000</td>
    <td>300000</td>
    <td>150000</td>
    <td>240000</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_10.html]vezi acest exemplu[/url]

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.

Cod:
<html>
    <head><title>tabelex_11</title></head>
    <body><h1>Un tabel avand continutul celulelor aliniate</h1>
    <table>
    <tr><td>Aici</td> <td>alinierea</td><td>este centru</td><td>dreapta</td></tr> <tr>
    <td>stanga</td>
    <td>centru</td><td>sus</td> <td>jos</td></tr>
    <tr><td>aici</td><td>alinierea</td> <td>este centru</td><td>stanga (implicita)</td></tr>

</table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_11.html]vezi acest exemplu[/url]

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 benefice ( inclusiv 0 ) reprezentand măsură in pixeli a latimii, respectiv a inaltimii unei celule;
* procente din latimea , respectiv inaltimea tabelului.

Cod:
<html>
    <head><title>tabelex_12</title></head>
    <body><h1>Un tabel cu celule de 100x150 de pixeli</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 11</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_12.html]vezi acest exemplu[/url]

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 crește 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 cele două atribute colspan si rowspan.

Cod:
<html>
    <head><title>tabelex_13</title></head>
    <body><h1>Un tabel simplu cu chenar</h1><hr>
    <table>
    <tr> <td>cell 11</td><br>cell 21<br>cell 31</td> <td>cell 12</td><td>cell 13 ,cell 14</td><br>cell 23, cell 24<br>cell 33, cell 34</td></tr>
    <tr> <td>cell 22</td></tr>
    <tr> <td>cell 32</td></tr>
    <tr> <td>cell 41</td> <td>cell 42,cell 43,cell 44</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_13.html]vezi acest exemplu[/url]

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.

Cod:
<html>
    <head><title>tabelex_14</title></head>
    <body><h1>Un tabel cu celule de latime mare</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 12</td></tr>
    <tr> <td>cell 21</td> <td>cell 22 este destul de lata,aceasta celula este foaret lata.</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_14.html]vezi acest exemplu[/url]

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 &nbsp;;
* dupa <td> se pune <br>.

Caracterul &nbsp; ( no break space ) este de fapt caracterul spatiu.Un spatiu introdus prin im\ntermediul acestui caracter nu va fi ignorat de browser.

Cod:
<html>
    <head><title>tabelex_15</title></head>
    <body><h1>Un tabel cu celule vide</h1><hr>
    <table>
    <tr> <td>cell 11<td> <td>cell 12</td><td>cell 13</td></tr>
    <tr> <td>&nbsp;</td> <td></td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_15.html]vezi acest exemplu[/url]

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 utilizate pentru fond;
* bordercolor permite stabilirea culorii pentru chenarul unui tabel;
* bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel;
* bordercolordark permite stabilirea nuanței pentru chenarul 3D al unui tabel;

Cod:
<html>
    <head><title>tabelex_16</title></head>
    <body><h1>Atribute "Internet Explorer"</h1><hr>
    <table>
    <tr> <td>cell 11</td> <td>cell 12</td><td>cell 13</td></tr>
    <tr> <td>&nbsp;</td><td></td> <td></td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_16.html]vezi acest exemplu[/url]

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></colgroup>

Intr-un bloc <colgroup>, coloanele pot avea configurari deosebite 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.

Cod:
<html>
    <head><title>tabelex_17</title></head>
    <body><h1>Grupuri de coloane</h1><hr>
    <table>
    <colgroup> <col> <col> <col>
</colgroup>
    <tr> <td>Text in întâia coloana.Text in prima coloana.Text in prima coloana. Text in prima coloana.</td> <td>Text in coloana doua.Text in coloana doua.Text in coloana doua.Text in coloana
doua.</td> <td>Text in coloana a treia.Text in coloana a treia.Text in coloana a treia.Text in coloana a treia.</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_17.html]vezi acest exemplu[/url]

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 componentă din stanga a cadrului tabelului;
* rhs - afiseaza o muchie in partea din dreapta a cadrului tabelului;
* vsides - afiseaza o muchie in fracțiune 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;

Cod:
<html>
    <head><title>tabelex_18</title></head>
    <body><h1>Atributele frames si rules</h1>
    <table>
    <tr> <td>cell 11</td> <td>cell 12</td><td>cell 13</td></tr>
    <tr> <td>cell 21</td> <td>cell 22</td><td>cell 23</td></tr>
    </table>
    </body>
    </html>


[url=http://www.worklance.com/htmltutorial/exemple/tabel/tabelex_18.html]vezi acest exemplu[/url]

Subblocurile unui tabel

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

* <thead><tr><td>...</thead> ( un solitar 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>.
Sus
Vezi profilul utilizatorului Trimite mesaj privat
Afiseaza mesajele pentru a le previzualiza:   
Creaza un subiect nou   Raspunde la subiect    Pagina de start a forumului ImperiumSv.MyForum.ro -> Limbajul HTML Ora este GMT + 2 ore
Pagina 1 din 1

 
Mergi direct la:  
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum


Powered by phpBB © 2001, 2002 phpBB Group
Fa-ti si tu propriul forum GRATUIT, pe www.myforum.ro