tabele

Tabele

Sa setam primul tabel...

Once	You	Set	`up`
	a table
`you`	may N e v e r		Go
	may N e v e r		Back!

...si nu ne vom mai intoarce la paginile de web obisnuite

Obiective

Cum sa introducem un tabel in fisierul HTML

Cum sa integram textul si imaginea utilizand tabele

Crearea efectului de coloane, utilizand tabele invizibile

Utilizarea culorilor in celulele din tabel

Construirea unui tabel

Tabelele au fost introduse in limbajul HTML 3.0, pentru a permite diversificarea formelor de prezentare a paginilor de web. Tagurile de tabele permit organizarea paginii de web sub forma unei grile de celule a caror dimensiune poate fi configurata.

Tabelele se construiesc de la prima linie catre ultima linie dupa linie.

--> --> --> --> --> -->
___________________________|
|
--> --> --> --> --> -->

HTML

Rezultatul

</table>

Row 1 col 1	Row 1 col 2	Row 1 col 3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

Atributul border, indica browserului sa deseneze o linie cu grosimea de 1 pixel in jurul tabelului. <table border=1>...</table>
Fiecare linie este definita de tagul <tr>...</tr>
Trecerea la o noua coloana este definita de tagul <td>...</td>
In interiorul tagului <td> pot fi incluse texte, imagini, atribute de formatare (toate celelalte taguri studiate pina acum).
Tagul <td> poate sa includa cateva atribute de aliniere a continutului celulelor pe orizontala si pe verticala.

Aliniere orizontala

Aliniere verticala

<td align=left> aliniaza toate elementele la stanga celulei
<td align=right> aliniaza toate elementele la dreapta celulei
<td align=center> aliniaza toate elementele la centrulcelulei

<td valign=top> aliniaza toate elementele in partea de sus a celulei
<td valign=bottom> aliniaza toate elementele in partea de jos a celulei
<td valign=middle> aliniaza toate elementele la mijlocul celulei

Tagurile pot fi combinate ca in exemplul de mai jos:
<td align=left valign=bottom>

Atribute suplimentare care pot fi utilizate in tabele:

colspan sau rowspan permit unirea a doua celule (liniii sau coloane)

<th>...</th> este tagul de titlu pentru coloanele din tabel

cellpadding este un atribut care indica browserului cat spatiu sa lase intre text si marginea celului.

cellspacing este un atribut care indica browserului cat spatiu sa lase intre celule.

<table bgcolor=#880000> indica culoarea de background al intregului tabel

<tr bgcolor=#880000> indica culoarea de background a randului curent

<td bgcolor=#880000> indica culoarea de backgroundcoloanei curent

Exercitiu:

Deschideti un editor text (Notpade, Write, Word)

Editati un fisier in care sa introduceti tagul <table>...</table> si atributele lui. Creati un tabel in care introduceti si text si grafica.

Salvati fisierul cu extensia htm sau html (daca ati utilizat alt fisier decit Notpade, asigurati-va ca se face salvare in format text)

Deschideti un browser (Netscape Navigator sau Internet Explorer) si incarcati in el fisierul salvat.