Tabele in HTML

Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se remarca si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul, meniul, footerul, etc. Desi in zilele noastrea aceasta numai este o practica obisnuita (locul ei fiind luat de CSS), totusi ramane ca o alternativa.Un tabel este compus din randuri sicoloane si se se defineste cu ajutorul marcajului <table>, continand in sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data).

In continuare vom crea un tabel cu doua randuri si trei coloane:

Exemplu:

<table> <tr> <td>Randul 1, celula 1</td> <td>Randul 1, celula 2</td> <td>Randul 1, celula 3</td> </tr> <tr> <td>Randul 2, celula 1</td> <td>Randul 2, celula 2</td> <td>Randul 2, celula 3</td> </tr> </table>

Rezultat:

Randul 1, celula 1	Randul 1, celula 2	Randul 1, celula 3
Randul 2, celula 1	Randul 2, celula 2	Randul 2, celula 3

1.   Ce să mai citim?

2. Ce să mai citim?

3. Tatăl fondator al Uniunii Europene.            

4. Colonizarea de pe Marte !

5.   Ne pregătim pentru Marte

6. Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?

7. Cine mai urăște să poarte mască?

Pentru a reda forma tabelara, adica fiecare celula sa fie luata intr-un chenar, este necesar adaugarea atributului border=1 .

<table border="1">

Rezultat:

Randul 1, celula 1	Randul 1, celula 2	Randul 1, celula 3
Randul 2, celula 1	Randul 2, celula 2	Randul 2, celula 3

Atributele tabelului:

Cele mai uzuale:
align - alinirea tabelului, valori posibile: left,center,right.
valign - alinierea pe verticala, valori posibile:top (sus), middle (mijloc), bottom (jos).
width - latimea, se specifica in pixeli
height - inaltimea, se specifica in pixeli
bgcolor - culoarea de fundal
border - chenar. In cazul cand border=0, chenarul este invizibil.
cellpadding - distanta dintre marginile celulelor si continutul acestora
cellspacing - distanta dintre celulele unui tabel

In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>.
Acestea sunt:
colspan - numarul de coloane pe care se intinde celula
rowspan - numarul de randuri pe care se intinde celula

Exemplu colspan:

<table border="1" align="center" width="200"> <tr> <td colspan="2" bgcolor="orange"><b>Vechime in munca </b> </td> </tr> <tr> <td>Ion Paladi</td> <td width="30">5</td> </tr> <tr> <td>Mihai Cretu</td> <td>3</td> </tr> <tr> <td>Anton Stolbetski</td> <td>6</td> </tr> </table>

Rezultat:

Vechime in munca
Ion Paladi	5
Mihai Cretu	3
Anton Stolbetski	6

Datorita faptului ca am specificat in celula primului rand colspan="2", in rezultat celula se intinde pe distanta celor doua celule.
Sa analizam un exemplu cu rowspan


Exemplu rowspan:

<table border="1" align="center" width="200"> <tr> <td rowspan="3" bgcolor="orange"><b>Angati</b></td> <td>Ion Paladi</td> <td width="30">5</td> </tr> <tr> <td>Mihai Cretu</td> <td>3</td> </tr> <tr> <td>Anton Stolbetski</td> <td>6</td> </tr> </table>

Rezultat:

Angati	Ion Paladi	5
	Mihai Cretu	3
	Anton Stolbetski	6

rowspan i-a valoarea "3", doarece acum celula trebuie sa se intinda pe toata inaltimea celor treicelule.

Atat am avut a spune cu privire la tabelele din HTML. Acestea sunt notiunile de baza insa cel mai des folosite!

Am vazut o multime de saituri in care autorii acestora, pentru a mentine contact cu vizitatorii lor, aveau intro pagina niste campuri in care se cerea sa se introduca email-ul, numele si mesajul propus spre expediere, dupa care trebuia sa apesi un buton si mesajul era trimis la destinatar.
Cum se realizeaza aceasta? Se realizeaza cu ajutorul formularelor!