Programare: Tabele 17/23

[kenzake powah!]

Tagul <table> este folosit pentru a deschide un tabel. Înăuntrul acestui tag vom găsi alte două taguri <tr> (liniile tabelului) şi <td> (coloanele tabelului). Exemplu :

<table border="1">

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>Vizualizare



Conţinutul va fi plasat în interiorul căsuţelor tabelului. O casuţă este ceea ce se află între <td> şi </td>. Atributul border stabileşte lăţimea marginii tabelului.

HTML - Tabele asimetrice

Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii şi "colspan" pentru a traversa mai multe coloane. Deasemenea dacă vrem ca prima linie să aibe titlu pentru toate coloanele vom folosi tagul <th>. Exemplu :

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>Vizualizare



HTML - Spaţierea celulelor

Cu ajutorul atributelor "cellpadding" ÅŸi "cellspacing" vom defini distanÅ£a dintre celule. "cellspacing" stabileÅŸte mărimea marginii, iar "cellpandding" stabileÅŸte distanÅ£a dintre margine ÅŸi conÅ£inut. 

<table border="1" cellspacing="10"
bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
</table>
Pentru a face mai bine diferenţa vom elimina marginea .

<table border="1" cellpadding="10"
bgcolor="rgb(0,255,0)">

<tr>

<th>Column 1</th>
<th>Column 2</th>

</tr>

<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>

</table>
DistanÅ£a între celule ÅŸi dimensiunea margini va fi interpretată de browser în pixeli. Conform acestei "legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseÅŸte ca unitate de măsură, pixeli .