LECTIA 14 - TABELE HTML ( Html tables )

Firstname	Lastname	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

Tabelul de mai sus este preluat de pe http://www.w3schools.com 

• Un tabel html  este definit de tag-ul <table>
• Un tabel html este impartit in randuri folosind tag-ul <tr>
• Un rand este impartit in celule de date folosind tag-ul <td>
• Un rand poate avea titlu folosind tag-ul <th>
• Elementele <td> sunt containerele unui tabel
• Intre tag-urile <td></td> se poate folosi diverse elemente html ( text, imagini, liste, link-uri sau alte tabele )
• Stilizarea unui tabel se poate defini folosind CSS ( Cascading Style Sheets )

Exemple:
<table style="width:300px">
<tr>
  <td>Ion</td>
  <td>Vasile</td> 
  <td>50</td>
</tr>
<tr>
  <td>Alex</td>
  <td>Marius</td> 
  <td>23</td>
</tr>
</table>
Exemplu tabel cu border:
<table border="1" style="width:300px">
<tr>
  <td>Ion</td>
  <td>Vasile</td> 
  <td>50</td>
</tr>
<tr>
  <td>Alex</td>
  <td>Marius</td> 
  <td>23</td>
</tr>
</table>
Nota* Pentru stilizarea unui tabel folositi CSS. Atributul border nu se va mai folosi in html 5
Exemplu tabel cu border folosind css:
<style>
table,th,td
{
border:1px solid black;
}
</style>
Exemplu folosind tag-ul <th>
<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>
Putem alinia titlul la dreapta, la stanga sau pe centru folosind css:
th
{
text-align:left;
}
TABELE HTML - TAG-URI
<table> - defineste un tabel <th> - defineste titlul unei celule intr-un tabel <tr> - defineste un rand intr-un tabel <td> - defineste o celula intr-un tabel <caption> - defineste o legenda tabel <colgroup> - defineste un grup de una sau mai multe coloane intr-un tabel de formatare

Pentru a intelege mai bine aceasta lectie va recomand sa incercati singuri modificarea datelor din tabel sau stilizarea unui tabel accesand acest link