 |
|
 |  |
| Aeronautica | Comunicatii | Drept | Informatica | Nutritie | Sociologie |
| Tehnica mecanica |
Html
|
Qdidactic » stiinta & tehnica » informatica » html HTML - crearea unui tabel, alinierea tabelului in pagina |
HTML - crearea unui tabel, alinierea tabelului in pagina
HTML - Tabele
1. Crearea unui tabel
<table> . <table> se insereaza un tabel
<tr> . </tr> se insereaza o linie in tabel (</tr> este optional)
<td> . </td> se insereaza o celula de date (</td> este optional)
Tabel fara chenar
|
tabele1.html |
|
<html> <head> <title>Tabele 1</title> </head> <body> <h1 align=”center”>Crearea unui tabel fara chenar</h1> <hr> <table> <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 21 <td>celula 22 <tr> <td>celula 31 <td>celula 32 <tr> <td>celula 41 <td>celula 42 </table> </body> </html> |
atributul border la eticheta <table> determina trasarea chenarului la tabel
Tabel cu chenar
|
tabele2.html |
|
<html> <head> <title>Tabele 2</title> </head> <body> <h1 align=”center”>Crearea unui tabel cu chenar</h1> <hr> <table border= > <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 11 <td>celula 12 </table> </body> </html> |
atributul border la eticheta <table> determina trasarea chenarului la tabel
Tabel cu chenar si in celulele de date sunt imagini
|
tabele3.html |
|
<html> <head> <title>Tabele 3</title> </head> <body> <h1 align=”center”>Tabel cu chenar care contine imagini</h1> <hr> <table border=”4”> <tr> <td><img src=” . /imagini/a.gif”> <td><img src=” . /imagini/b.gif”> <tr> <td><img src=” . /imagini/c.gif”> <td><img src=” . /imagini/d.gif”> </table> </body> </html> |
2. Alinierea tabelului in pagina
Se utilizeaza atributul align al etichetei <table>
o left (valoare prestabilita) - tabelul este plasat in partea stanga al tabelului
o center - tabelul este plasat in centrul paginii
o right - tabelul este plasat in dreapta paginii
Tabel cu chenar plasat in dreapta paginii
|
tabele4.html |
|
<html> <head> <title>Tabele 4</title> </head> <body> <h1 align=”center”>Alinierea tabelului in pagina</h1> <hr> <table border=”4” align=”right”> <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 21 <td>celula 22 </table> Acest text este plasat in stanga tabelului </body> </html> |
hspace - distanta in pixeli pe vertivala dintre tabel si textul care il precede
vspace - distanta in pixeli pe orizontala dintre tabel si textul care il urmeaza
Aceste atribute sunt recunoscute de Netscape. Internet Explorer nu recunoaste aceste atribute.
Spatierea tabelului fata de text
|
tabele5.html |
|
<html> <head> <title>Tabele 5</title> </head> <body> <h1 align=”center”>Spatierea tabelului fata de restul textului</h1> <hr> Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. <br> <table border align=”left” vspace=”15” id=”10”> <tr> <td>celula 11 <td>celula 12 <tr> <td>celula 21 <td>celula 22 </table> Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala lata de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala lata de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala lata de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala lata de tabel. </body> </html> |
3. Dimensionarea unui tabel.
Se utilizeaza atributele etichetei <table> :
o width si height
Valorile pot fi :
o Valori intregi pozitive (numar de pixeli) sau
o Valori intregi intre 1 si 100 urmate de % (procent din latimea / inaltimea paginii)
Dimensionarea unui tabel
|
tabelehtml |
||||
|
<html> <head> <title>Tabele 6</title> </head> <body> <h1 align=”center”>Dimensionarea unui tabel </h1> <hr> Tabel cu latimea de 50% din pagina si inaltimea de 200 de pixeli <p> <table border width=”50%” height=”200”> <tr> <td>celula 11 <td>celula 12 <tr>
<td>celula 21 <td>celula 22 </table> </body> </html> |
Pozitionarea unui text intr-o anumita zona a paginii prin realizarea unui tabel fara chenar(border=0).
Tabel fara chenar
|
tabele7.html |
|
<html> <head> <title>Tabele 7</title> </head> <body> <h1 align=”center”>Pozitionarea unui text</h1> <hr> <table border”0” width=”60%” height=”100” align=”center”> <tr> <td> Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. </table> </body> </html> |
4. Spatierea celulelor unui tabel
Atributul cellspacing are valoare prestabilita de 2 pixeli
|
tabele8.html |
|
<html> <head> <title>Tabele 8</title> </head> <body> <h1 align=”center”>Spatierea celulelor </h1> <hr> <table border= cellspacing=”10” > <tr> <td>Vasile <td>Nicolae <tr> <td>Gheorghe <td>Marin </table> </body> </html> |
Atributul cellpadding = distanta dintre marginea unei celule si continutul ei.
o Valoarea prestabilita este de 1 pixel.
|
tabele9.html |
|
<html> <head> <title>Tabele 9</title> </head> <body> <h1 align=”center”>Spatierea textului in celule </h1> <hr> <table border cellpadding=”20” > <tr> <td>Vasile <td>Nicolae <tr> <td>Gheorghe <td>Marin </table> </body> </html> |
5. Dimensionarea celulelor unui tabel.
width si height atribute pentru etichetele <td> si <th>
<th> = descrie capul de tabel
tabele10.html
|
tabele10.html |
|
<html> <head> <title>Tabele 10</title> </head> <body> <h1 align=”center”>Dimensionarea celulelor </h1> <hr> Tabel cu celule dimensionate individual<p> <table border> <tr> <td width=”20%” height=”75%”>Celula 11 <td>Celula 12 <tr> <td>Celula 21 <td>Celula 22 </table> </body> </html> |
Alinierea continutului unei celule.
align alinierea pe orizontala. Poate lua valorile:
o left center (implicit) right
valign alinierea pe verticala. Poate lua valorile:
o baseline – la baza bottom - jos middle – la mijloc(implicit) top - sus
|
tabele11.html |
|
<html> <head> <title>Tabele 11</title> </head> <body> <h1 align=”center”>Alinierea continutului celulelor </h1> <hr> <table border width=”50%” height=”80%”> <tr align=”right”> <td>dreapta <td>dreapta <tr align=”center”> <td>centru <td>centru <tr> <td valign=”top”>sus <td valign=”bottom”>jos <tr align=”left”> <td>stanga <td>stanga </table> </body> </html> |
7. Definirea culorilor pentru un tabel.
bgcolor culoarea de fond a unui tabel; se poate aplica la etichetele: <table> <tr> <td>
|
tabele12.html |
|
<html> <head> <title>Tabele 12</title> </head> <body> <h1 align=”center”>Culori in tabel</h1> <hr> <table border=”5” bgcolor=”lime”> <tr> <td>celula 11 - verde deschis <td bgcolor=”red”>Celula 12 - rosu <tr bgcolor=”blue”> <td>Celula 21 - albastru <td bgcolor=”yellow”>Celula 22 - galben <tr bgcolor=”cyan”> <td>Celula 31 - cyan <td>Celula 32 - cyan <tr> <td>Celula 41 - verde <td bgcolor=”white”>Celula 42 - alb </table> </body> </html> |
background culoarea fundalului unui table (adresa URL a imaginii fundalului).
|
tabele13.html |
|
<html> <head> <title>Tabele 13</title> </head> <body> <h1 align=”center”>Fundalul unui tabel</h1> <hr> <table border=”5” width=”200” height=”120” background=” . /Imagini/lace.gif> <tr> <td>celula 11 <td>Celula 12 <tr> <td>Celula 21 <td>Celula 22 </table> </body> </html> |
bordercolor culoarea pentru chenarul unui tabel.
bordercolorlight culoarea marginilor din stanga si de sus.
bordercolordark culoarea marginilor din dreapta si de jos
<font color=” . .”>text</font> stabileste culoarea textului.
|
tabele14.html |
|
<html> <head> <title>Tabele 14</title> </head> <body> <h1 align=”center”>Culorile chenarului unui tabel</h1> <hr> <table border=”10” bordercolordark=”blue” bordercolorlight=”cyan”> <tr> <td><font color=”green”>Celula 11 - verde</font> <td><font color=”blue”>Celula 12 - albastru</font> <td><font color=”red”>Celula 13 - rosu</font> <tr> <td><font color=”yellow”>Celula 21 - galben</font> <td><font color=”magenta”>Celula 22 - magenta</font> <td><font color=”lime”>Celula 23 - verde deschis</font> </table> </body> </html> |
8. Titlul unui tabel.
<caption>Titlul unui tabel.
o align - alinierea tabelului :
bottom , top , left , right
|
tabele15.html |
|
<html> <head> <title>Tabele 15</title> </head> <body> <h1 align=”center”>Titlul unui tabel</h1> <hr> <table border> <caption align=”top”>Masini <tr> <td>Mercedes <td>Citroen <tr> <td>BMW <td>Renault </table> </body> </html> |
9. Capul de tabel.
<th> table header
|
tabele1html |
|
<html> <head> <title>Tabele 16</title> </head> <body> <h1 align=”center”>Capul de tabel</h1> <hr> <p> <table border> <caption align=”bottom”>Preturi de masini <tr> <th>Pret <th>Citroen <th>Jaguar <th>BMW <tr> <th>In euro<td>12000 <td>32000 <td>21000 <tr> <th>In lei<td>41000 <td>100000 <td>70000 </table> </body> </html> |
10. Tabele de forme oarecare.
colspan concatenarea cu celulele din dreapta celulei curente.
rowspan concatenarea cu celulele de sub celula curenta.
|
tabele17.html |
|
<html> <head> <title>Tabele 17</title> </head> <body> <h1 align=”center”>Tabel cu forma oarecare</h1> <hr> <p> <table border> <caption align=”bottom”>Concatenare de celule <tr> <td rowspan >Celula 11<br>Celula 21<br>Celula 31 <td>Celula 12 <td colspan=”2” rowspan='”3”>Celula' 13 , Celula 14<br> Celula 23 , Celula 24<br> Celula 33 , Celula 34<br> <tr> <td>Celula 22 <tr> <td>Celula 32 <tr> <td>Celula 41 <td colspan=”3”>Celula 42 , Celula 43, Celula 44 </table> </body> </html> |
nowrap anuleaza ajustarea automata a lungimii liniilor.
|
tabele18.html |
|
<html> <head> <title>Tabele 18</title> </head> <body> <h1 align=”center”>Atributul</h1> <hr> <p> <table border> <caption align=”bottom”>Toate randurile au aceeasi lungime <tr> <td>Celula 11 <td>Celula 12 <tr> <td>Celula 21 <td>Celula 22 Textul din aceasta celula este foarte lung </table> </body> </html> |
11. Celule fara continut
Dupa eticheta se adauga:  
Dupa eticheta se adauga: <br>
|
tabele19.html |
|
<html> <head> <title>Tabele 19</title> </head> <body> <h1 align=”center”>Celule fara continut</h1> <hr> <p> <table border> <caption align=”bottom”>Randul doi este fara continut <tr> <td>Celula 11 <td>Celula 12 <td>Celula 13 <tr> <td>Celula 22 <tr> <td> <td><br> <td> </table> </body> </html> |
12. Grupuri de coloane.
<colgroup> . </colgroup> se defineste un grup de coloane. Atributele pot fi:
o span - numarul de coloane din grup.
o width - latimea unica pentru coloanele din grup.
o align - alinierea pentru coloanele din grup.
<colgroup> . <col> . </colgroup> configurarea coloanelor din grup
Atributele etichetei <col> pot fi:
o span - identifica coloana din grup pentru care se face configurarea.
o width - latimea coloanei identificata prin span.
o align - alinierea continutului din coloana identificata prin span.
|
tabele20.html |
|
<html> <head> <title>Tabele 20</title> </head> <body> <h1 align=”center”>Grupuri de coloane</h1> <hr> <p> <table border width=”60” align=”left”> <colgroup> <col width=”60” align=”left”> <col width=”120” align=”center”> <col width=”180” align=”right”> </colgroup> <tr> <td valign=”top”>Celula 11 <td>Celula 12 <td valign=”bottom”>Celula 13 <td>Celula 14 <tr> <td>Celula 21 <td>Celula 22 <td>Celula 23 <td>Celula 24 </table> </body> </html> |
13. Atribute pentru aspectul chenarului unui tabel.
Atributul frame al etichetei <table> precizeaza laturile care vor fi vizibile. Valorile:
o void - elimina toate muchiile exterioare.
o above - afiseaza o muchie in partea superioara a tabelului.
o below - afiseaza o muchie in partea inferioara a tabelului
o lhs - afiseaza o muchie in partea stanga a tabelului.
o below - afiseaza o muchie in partea dreapta a tabelului
o hsides - afiseaza cate o muchie in partea superioara si inferioara a tabelului.
o vsides - afiseaza cate o muchie in partea stanga si dreapta a tabelului.
o box - afiseaza o muchie pe toate laturile tabelului.
Atributul rules al etichetei <table> precizeaza delimitatori. Valorile:
o none - elimina toate muchiile interioare.
o rows - afiseaza muchii orizontale intre toate liniile.
o cols - afiseaza muchii verticale intre toate coloanele.
o all - afiseaza muchii intre toate liniile si coloanele.
|
tabele21.html |
|
<html> <head> <title>Tabele 21</title> </head> <body> <h1 align=”center”>Atributele frame si rules</h1> <hr> <table bordercolor=”red” width=”400” frame=”lhs” rules=”cols”> <tr> <td>Celula 11 <td>Celula 12 <td>Celula 13 <td>Celula 14 <tr> <td>Celula 21 <td>Celula 22 <td>Celula 23 <td>Celula 24 </table> </body> </html> |
| Contact |- ia legatura cu noi -| |  |
| Adauga document |- pune-ti documente online -| |  |
| Termeni & conditii de utilizare |- politica de cookies si de confidentialitate -| |  |
| Copyright © |- 2024 - Toate drepturile rezervate -| |  |
 |
||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
||||||||||||||||||||||||
Proiecte pe aceeasi tema | ||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
|
||||||||||||||||||||||||
|
|
||||||||||||||||||||||||