Capitolul 13(Tabele)


Tabele...
Exemplu de tabel:
La ce sunt bune tabelele?
Tabelele sunt facute pentru a face informatia mai usor de interpretat si se pot considera chiar grafice.

Sursa:
<table border=3>
<tr>
<th>La ce sunt bune tabelele?</th>
</tr>
<tr>
<td>Tabelele sunt facute pentru a face informatia mai usor de interpretat si se pot considera chiar grafice.</td>
</tr>
</table>

     Tabelele sunt unele dintre cele mai provocatoare lucruri din codul HTML. Nu sunt greu de folosit, doar ca au un cod mai lung si necesita mai multa atentie. Tabelele incep cu tagul <table> care de obicei contine atributul border=n si se inchide cu tagul </table>. Atributul border indica grosimea chenarului tabelului. Daca atributul border are valoarea n=0 atunci marginea tabelei este invizibila.
     Fiecare rand din tabela este definit de tagul <tr>.In fiecare rand al tabelului se gasesc casute, care sunt definite prin tagurile <td> si </td>. De multe ori, vei avea nevoie de un titlu al coloanei care se va afla pe primul rand, pentru aceasta se foloseste <th> si </th>. Tagul de introducere titlul coloanei face textul bold si centrat.

Exemplu de tabela cu mai multe randuri si coloane:
Titlu 1Titlu 2Titlu 3
Casuta ACasuta BCasuta C
Casuta DCasuta ECasuta F

Sursa:
<table border=2>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
<td>Casuta A</td><td>Casuta B</td><td>Casuta C</td>
</tr>
<tr>
<td>Casuta D</td><td>Casuta E</td><td>Casuta F</td>
</tr>
</table>

Introducerea atributului rowspan=n.
Exemplu:
Titlu 1Titlu 2Titlu 3
Casuta A & DCasuta BCasuta C
Casuta ECasuta F

Sursa:
<table border=2>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
<td rowspan=2>Casuta A & D</td><td>Casuta B</td><td>Casuta C</td>
</tr>
<tr>
<td>Casuta E</td><td>Casuta F</td>
</tr>
</table>

     Se remarca adaugarea atributului rowspan=2 tagului <td>. Acest atribut a permis acelei casute sa se intinda pe doua randuri. Daca vrei ca o casuta sa se intinda pe n coloane adauga atributul colspan=n. Pentru schimbarea pozitiei textului pe orizontala in casuta se foloseste atributul align=left/center/right. Pentru schimbarea pozitiei textului pe verticala se foloseste atributul valign=top/middle/bottom.


Capitolul 12 | Home | Capitolul 14