Realizarea tabelelor în HTML

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 poziţionarea elementelelor în cadrul paginilor web.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> şi </TABLE>. Tot ce va fi scris între aceste tag-uri va forma un tabel. După tag-ul <TABLE> urmează tag-ul <TR> care vine de la "Table Row" (rândul tabelului) şi reprezintă introducerea unui rând în cadrul tabelului. Tot ce va fi scris între tag-urile <TR> şi </TR> va forma un rând al tabelului. După crearea unui rând, trebuie să adăugăm în cadrul acestuia, câteva celule, cu ajutorul tag-urilor <TD> şi </TD>.

Exemplu:

<table border="1">
<tr>
<td>mere</td>
<td>1,5 RON</td>
</tr>
<tr>
<td>banane</td>
<td>5 RON</td>
</tr>
</table>

Tabelul va arăta astfel:

mere 1,5 RON
banane 5 RON

Try it yourself >>

Proprietăţile tabelelor

Pentru ca liniile unui tabel să fie vizibile tag-ul <TABLE> trebuie sa fie însoţit de atributul BORDER având valoarea egală cu cel puţin 1.

După cum observaţi, liniile tabelului sunt linii duble. Pentru a avea decât o singură linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifică distanţa dintre celulele unui tabel. Alături de acest atribut putem folosi şi atributul CELLPADING care indică distanţa dintre marginile celulelor şi textul din cadrul acestora.

Pentru a stabili dimensiunea unui tabel, unui rând sau a unei celule, folosim atributele WIDTH pentru lăţime şi / sau HEIGHT pentru înălţime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele tabelului pe verticală folosim atributul VALIGN însoţit de una dintre valorile "top", "middle" sau "bottom".

Pentru a schimba culoarea unei celule, unui rând sau chiar a întregului tabel folosim atributul BGCOLOR împreună cu codul culorii alese.

Tabele asimetrice

Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a uni mai mute linii şi "colspan" pentru a uni mai multe coloane. De asemenea, dacă vrem ca prima linie să conţină titluri pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere îngroşate ca în exemplul următor:

Exemplu:

<TABLE BORDER=10>
<tr>
<th colspan=2>Vegetables</th>
<TR> <TD>carrots</TD> <TD>garlic</TD> </TR>
<TR> <TD>celery</TD> <TD>onions</TD> </TR>
</TABLE>

Tabelul va arăta astfel:

Vegetables
carrots garlic
celery onions

Try it yourself >>

Atributul "bgcolor" este folosit pentru a stabilii fondul de culoare al unui paragraf, tabel sau alte componente ale HTML.

Exemplu:

<table bgcolor="#000000">

<tr><td bgcolor="#009900">

<font color="#FFFF00" align="right">Garlic</font></td>

<td><font color="#FFFFFF">27</font></td></tr>

<tr><td bgcolor="#0000FF">

<font color="#DDDDDD" align="right">Celery</font></td>

<td><font color="#FFFFFF">20</font></td></tr>

</table>

Tabelul va arăta astfel:

Garlic 27
Celery 20

Try it yourself >>

Alte tag-uri mai găsiţi şi la secţiunea Tag-uri HTML -> Marcaje pentru tabele.

Aplicații: Realizați următoarele tabele în HTML

1.

tabel2

2.

tabel1

3.

t3

4.

t4

5.

t9

6.

t10

7.

t6

8.

t7

9.

t8

10.

t9

11.

t5

12.

t13

13.

t11

14.

t15

15.

t14

16.

t16

17.

t18

18.

t17