HTML si CSS (Programator Web 1)

Un tabel are randuri si coloane, exact cum ne asteptam. Rostul lui pare a fi doar de a afisa informatie tabelara, pe linie sau coloane.
De exemplu avem un tabel cu persoane, in care fiecare linie corespunde unei persoane, si fiecare coloana corespunde numelui, prenumelui, varstei etc. fiecareia din persoane.

Dar, in HTML tabelele au fost si sunt folosite foarte des pentru asezarea elementelor in pagina. Sunt considerate un instrument foarte eficient de a obtine exact asezarea si imbinarea dorita a elementelor. Pentru a va convinge, cautati cuvantul table in urmatoarele pagini: www.crystalmind.ro, www.okazii.ro , www.w3schools.com , www.hi5.com etc.

Un tabel se construieste cu tagurile <table></table> , <tr></tr> , <td></td> .
Tagul <table> marcheaza inceputul si sfarsitul tabelului.
Tagul <tr> marcheaza inceputul si sfarsitul unui rand.
Tagul <td> marcheaza inceputul si sfarsitul unei celule.

Exemplu tabel 3 randuri si 2 coloane:

Sursa .html	Vizualizare in browser
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <table border = "1" align="center"> <tr> <td>celula 11</td> <td>celula 12</td> </tr> <tr> <td>celula 21</td> <td>celula 22</td> </tr> <tr> <td>celula 31</td> <td>celula 32</td> </tr> </table>	celula 11 celula 12 celula 21 celula 22 celula 31 celula 32

Sursa .html	Vizualizare in browser
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <table border = "1" align="right" cellpadding="15"> <tr> <td>celula 11</td> <td>celula 12</td> </tr> <tr> <td>celula 21</td> <td>celula 22</td> </tr> <tr> <td>celula 31</td> <td>celula 32</td> </tr> </table>	celula 11 celula 12 celula 21 celula 22 celula 31 celula 32

Atribute pentru tagul <table>

- border - grosimea tabelului in pixeli
- align - poate fi left, center, right
- width - se specifica latimea in px sau in procente relativa la latimea containerului ce include acest tabel (poate fi body sau alt tabel)
- cellspacing - distanta in pixeli dintre celulele tabelului. Valoarea default este 2. Deci daca nu doriti sa fie spatiu deloc, setati acest atribut cu valoarea 0
- cellpadding - distanta in pixeli dintre continutul unei celule si marginile sale. Default este 1. Deci daca nu doriti sa fie spatiu deloc, setati acest atribut cu valoarea 0

Sursa .html

Vizualizare in browser

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <table border = "1" width="200" cellpadding="4" cellspacing="3" align="right"> <tr> <td><b>Nume</b></td> <td><b>Prenume</b></td> <td><b>Varsta</b></td> </tr> <tr> <td>Horatiu</td> <td>Ionescu</td> <td>25</td> </tr> <tr> <td>Maria</td> <td>Iordanescu</td> <td>34</td> </tr> <tr> <td>Daniel</td> <td>Dragomirescu</td> <td>17</td> </tr> </table>

Nume Prenume Varsta Horatiu Ionescu 25 Maria Iordanescu 34 Daniel Dragomirescu 17