Tabele
Tabelele ne permit să cream o reţea dreptunghiulară de domenii, fiecare domeniu având propriile opţiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rânduri. Pentru a insera un rând intr-un tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rând de tabel ).Folosirea etichetei de sfârşit </tr> este opţională.
Un rând este format din mai multe celule ce conţin date.
O celula de date se introduce cu eticheta <td>..</td>, exemplu:
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice numar întreg ( inclusiv 0 ) si reprezintă grosimea în pixeli a chenarului tabelului.
Dacă atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absenta chenarului.
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional, exemplu:
<html>
<head>
<title>Tabel_ex2</title>
</head>
<body><h1 align="center">Un tabel simplu cu chenar</h1>
<hr> <table border="4">
<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>
Alinierea tabelului
Pentru a alinia un tabel intr-o pagină Web se utilizează atributul align al etichetei <table>, cu următoarele valori posibile:
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezintă distanta pe verticala dintre tabel si celelalte elemente ale paginii Web.
Aceste atribute funcţionează numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi atasat întregului 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.
Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).
Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:
<font color="valoare">...</font>.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, si reprezintă distanta in pixeli dintre doua celule vecine.
Valoarea prestabilita a atributului cellspacing este 2.
<html>
<head>
<title>Tabel_ex5</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>
<td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td>
<td bgcolor="yellow">galben 22</td></tr>
</table>
</body>
</html>
Distanta dintre marginea unei celule si conţinutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, si reprezintă distanta in pixeli dintre celule si conţinutul ei.
Valoarea 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>
<td>rosu 12</td></tr>
<tr><td>albastru 21</td>
<td>galben 22</td></tr>
</table>
</body>
</html>
Dimensionarea unui tabel
Dimensiunile unui tabel - latime si înălţimea - pot fi stabilite exact prin intermediul a doua atribute, width şi height, ale etichetei <table>.
Valorile acestor atribute pot fi:
<html>
<head>
<title>Tabel_ex8</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></td></tr>
</table>
</body>
</html>
Titlul unui tabel
Unui tabel i se poate ataşa 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:
Cap de tabel
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) în loc de <td>.
Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate etichetei <th>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
Alinierea conţinutului unei celule
Alinierea pe orizontala a conţinutului unei celule se face cu ajutorul atributului align care poate lua valorile:
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a două atribute ale acestor etichete: width pentru latime şi height pentru înălţime.
Valorile posibile ale acestor atribute sunt:
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:
Atributul " nowrap "
Atributul nowrap apartine elementelor <td> si <th> ; el interzice întreruperea unei linii de text.Astfel , în tabel pot apărea coloane cu o lăţime oricît de mare.
Celule vide ale unui tabel
Dacă un tabel are celule vide, atunci aceste celule vor aparea în tabel fară un chenar de delimitare.
În scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri:
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:
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:
<colgroup span="3" width="100"></colgroup>
Într-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează elementul <col>, care admite atributele:
Atributele frame si rules
Atributul frame al etichetei <table> permite specificarea parţilor din chenarul unui tabel care vor fi afişate.
Valorile posibile ale acestui atribut sunt:
Subblocurile unui tabel
În specificatiile HTML 4.0, continutul unui tabel poate fi împărţit în subblocuri prin elementele:
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rânduri. Pentru a insera un rând intr-un tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rând de tabel ).Folosirea etichetei de sfârşit </tr> este opţională.
Un rând este format din mai multe celule ce conţin date.
O celula de date se introduce cu eticheta <td>..</td>, exemplu:
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice numar întreg ( inclusiv 0 ) si reprezintă grosimea în pixeli a chenarului tabelului.
Dacă atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absenta chenarului.
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional, exemplu:
<html>
<head>
<title>Tabel_ex2</title>
</head>
<body><h1 align="center">Un tabel simplu cu chenar</h1>
<hr> <table border="4">
<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>
Alinierea tabelului
Pentru a alinia un tabel intr-o pagină Web se utilizează atributul align al etichetei <table>, cu următoarele valori posibile:
- "left " ( valoarea prestabilita );
- "center ";
- "right ".
- daca tabelul este aliniat stanga ( <table align="left"> ), atunci textul care urmează după punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului.
- daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmează după 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 urmează după punctul de inserare al tabelului va fi afişat pe toata lăţimea paginii, imediat sub tabel.
Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezintă distanta pe verticala dintre tabel si celelalte elemente ale paginii Web.
Aceste atribute funcţionează numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel
Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi atasat întregului 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.
Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).
Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:
<font color="valoare">...</font>.
Dimensionarea celulei unui tabel
Distanta dintre doua celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, si reprezintă distanta in pixeli dintre doua celule vecine.
Valoarea prestabilita a atributului cellspacing este 2.
<html>
<head>
<title>Tabel_ex5</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>
<td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td>
<td bgcolor="yellow">galben 22</td></tr>
</table>
</body>
</html>
Distanta dintre marginea unei celule si conţinutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, si reprezintă distanta in pixeli dintre celule si conţinutul ei.
Valoarea 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>
<td>rosu 12</td></tr>
<tr><td>albastru 21</td>
<td>galben 22</td></tr>
</table>
</body>
</html>
Dimensionarea unui tabel
Dimensiunile unui tabel - latime si înălţimea - pot fi stabilite exact prin intermediul a doua atribute, width şi height, ale etichetei <table>.
Valorile acestor atribute pot fi:
- numere întregi pozitive reprezentând latime respectiv înălţimea in pixeli a tabelului;
- numere întregi intre 1 si 100, urmate de semnul %, reprezentând fracţiunea din latime si înălţimea totala a paginii.
<html>
<head>
<title>Tabel_ex8</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></td></tr>
</table>
</body>
</html>
Titlul unui tabel
Unui tabel i se poate ataşa 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 ).
Cap de tabel
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) în loc de <td>.
Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate etichetei <th>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
Alinierea conţinutului unei celule
Alinierea pe orizontala a conţinutului 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 ).
- "baseline" ( la baza );
- "bottom" ( jos );
- "middle" ( la mijloc, valoarea prestabilita );
- "top" ( sus ).
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a două atribute ale acestor etichete: width pentru latime şi height pentru înălţime.
Valorile posibile ale acestor atribute sunt:
- numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule;
- procente din latime , respectiv inaltimea tabelului.
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 cărui valoare determină numarul de celule care se unifică.
- extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare determină numarul de celule care se unifică.
Atributul " nowrap "
Atributul nowrap apartine elementelor <td> si <th> ; el interzice întreruperea unei linii de text.Astfel , în tabel pot apărea coloane cu o lăţime oricît de mare.
Celule vide ale unui tabel
Dacă un tabel are celule vide, atunci aceste celule vor aparea în tabel fară un chenar de delimitare.
În scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri:
- dupa <td> se pune ;
- dupa <td> se pune <br>.
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;
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.
<colgroup span="3" width="100"></colgroup>
Într-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează elementul <col>, care admite atributele:
- span identifica acea coloană din grup pentru care se face configurarea. Dacă lipseşte, atunci coloanele sunt configurate în ordine;
- width determina o latime pentru coloana identificata prin span;
- align determina o aliniere pentru coloana identificata prin span.
Atributele frame si rules
Atributul frame al etichetei <table> permite specificarea parţilor din chenarul unui tabel care vor fi afişate.
Valorile posibile ale acestui atribut sunt:
- void - elimina toate muchiile exterioare ale tabelului;
- above - afişează o muchie in partea superioara a cadrului tabelului;
- below - afişează o muchie in partea inferioara a cadrului tabelului;
- hsides - afişează cate o muchie in partea superioara si inferioara cadrului tabelului;
- lhs - afişează o muchie in partea din stanga a cadrului tabelului;
- rhs - afişează o muchie in partea din dreapta a cadrului tabelului;
- vsides - afişează o muchie in partea din stanga si din dreapta a cadrului tabelului;
- box - afişează o muchie pe toate laturile cadrului tabelului;
- border - afişează o muchie pe toate laturile cadrului tabelului;
- none - elimina toate muchiile interioare ale tabelului;
- groups - afişează muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>si <colgroup>.
- rows - afişează muchii orizontale intre toate liniile tabelului;
- cols - afişează muchii verticale intre toate coloanele tabelului;
- all - afişează muchii intre toate liniile si coloanele;
Subblocurile unui tabel
În specificatiile HTML 4.0, continutul unui tabel poate fi împărţit în subblocuri prin elementele:
- <thead><tr><td>...</thead> ( un singur rand );
- <tfoot><tr><td>...</tfoot> ( un singur rand );
- <tbody><tr><td>...</tbody> ( oricate randuri );