Tabele
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe lângă crearea propriu-zisă a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
Eticheta folosită pentru crearea unui tabel este:
- <table> si </table>.
Între aceste etichete se defineşte câte randuri va avea tabelul cu ajutorul etichetelor <tr> şi </tr> (table row - rândul tabelului), după creare rândurilor va trebui să introducem şi ceva celule in tabel cu ajutorul etichetelor <td> şi </td>.
Tabele pot fi imbricate, adică în interior pot conţine unul sau mai multe tabele.
Exemplu: un tabel în care am folosit colspan pentru a uni celulele 2 şi 3 din rândul 2 şi rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4, celulele sunt colorate diferit.
<table border="1">
<tr>
<td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
<td bgcolor="lime">R1 C3</td>
<td bgcolor="blue">R1 C4</td>
</tr>
<tr>
<td bgcolor="red">R2 </td>
<td colspan="2" bgcolor="yellow">R2 C2+C3</td>
<td bgcolor="aqua">R2 C4</td>
</tr>
<tr>
<td rowspan="2" bgcolor="orange">R3 C1 + R4 C1</td>
<td bgcolor="yellow">R3 C2</td>
<td bgcolor="maroon">R3 C3</td>
<td bgcolor="green">R3 C4</td>
</tr>
<tr>
<td bgcolor="red">R4 C2</td>
<td bgcolor="yellow">R4 C3</td>
<td bgcolor="gray">R4 C4</td>
</tr>
</table>
<tr>
<td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
<td bgcolor="lime">R1 C3</td>
<td bgcolor="blue">R1 C4</td>
</tr>
<tr>
<td bgcolor="red">R2 </td>
<td colspan="2" bgcolor="yellow">R2 C2+C3</td>
<td bgcolor="aqua">R2 C4</td>
</tr>
<tr>
<td rowspan="2" bgcolor="orange">R3 C1 + R4 C1</td>
<td bgcolor="yellow">R3 C2</td>
<td bgcolor="maroon">R3 C3</td>
<td bgcolor="green">R3 C4</td>
</tr>
<tr>
<td bgcolor="red">R4 C2</td>
<td bgcolor="yellow">R4 C3</td>
<td bgcolor="gray">R4 C4</td>
</tr>
</table>
Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> în locul etichetelor <td> şi </td>. Astfel conţinutul celulei va fi afişat îngroşat şi aliniat pe mijloc.
Eticheta <caption> va adăuga o linie text deasupra tabelului, centrată pe mijloc, deobicei folosită ca fiind un titlu al tabelului. Eticheta caption se plasează obligatoriu imediat după tag-ul table dar înainte de prima etichetă <tr>.
Exemplu un tabel cu 2 rânduri, 2 coloane şi folosind şi eticheta <caption> şi <th>:
<table border="1">
<caption>Browser web</caption>
<tr>
<th width="120">Nume</th>
<th width="120">Nota</th>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>10</td>
</tr>
</table>
<caption>Browser web</caption>
<tr>
<th width="120">Nume</th>
<th width="120">Nota</th>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>10</td>
</tr>
</table>
