Dark-Knight.MyForum.ro

Crystydica · Administrator Data inscrierii: 20/Mai/2008 Mesaje: 200

Tabele in HTML

Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu susținerea lor, pe langa crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR> care vine de la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia, cateva celule, cu ajutorul tag-urilor <TD> si </TD>.

Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Primul tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Nota</B></TD>
</TR>
<TR>
<TD>Ionescu</TD>
<TD>Bogdan</TD>
<TD>7</TD>
</TR>
<TR>
<TD>Stancu</TD>
<TD>George</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Dumitrescu</TD>
<TD>Alexandra</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Marin</TD>
<TD>Paul</TD>
<TD>8</TD>
</TR>
<TR>
<TD>Ivanov</TD>
<TD>Mihaela</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Salveaza pagina cu numele de tabel.html. Pentru a vedea rezultatul: click aici.
Proprietatile tabelelor
Asa cum ai observat, in exemplul de mai sus am concretizat un tabel, dar fara nici o linie. Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul BORDER avand valoarea egala cu cel putin 1. In plus, poti modifica nuanță liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite. Astfel, daca vrem ca liniile tabelului nostru sa aiba colorație rosie vom folosi urmatoarea linie de cod:
<TABLE BORDER="1" BORDERCOLOR="#FF0000">

Inlocuieste in exemplul de mai sus si salveaza pagina cu numele tabel2.html. Pentru a vedea rezultatul: click aici.

Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si atributul CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora.

Pentru a stabili măsură unui tabel, unui rand sau a unei celule, folosim atributele WIDTH pentru latime si/sau HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top", "middle" sau "bottom".

Pentru a transforma colorit unei celule, unui rand sau chiar a intregului tabel folosim atributul BGCOLOR impreuna cu codul culorii alese. Sa facem impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta lectie. Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cu numele de tabel3.html.
<HTML>
<HEAD>
<TITLE>Proprietatile tabelelor</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Rezultatele obţinute la matematic&#259</H2></CENTER>
<HR WIDTH="50%" ALIGN="center" COLOR="#FF0000">
<TABLE WIDTH="500" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000" CELLSPACING=”0” CELLPADDING="0">
<TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle">
<TD WIDTH="200" HEIGTH="50"><B><FONT COLOR="#FFFFFF">Nume</FONT></B></TD>
<TD WIDTH="200"HEIGTH="50"><B><FONT COLOR="#FFFFFF">Prenume</FONT></B></TD>
<TD WIDTH="100" HEIGTH="50"><B><FONT COLOR="#FFFFFF">Nota</FONT></B></TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Ionescu</TD>
<TD WIDTH="200" HEIGTH="20">Bogdan</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">7</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Stancu</TD>
<TD WIDTH="200" HEIGTH="20">George</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Dumitrescu</TD>
<TD WIDTH="200" HEIGTH="20">Alexandra</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">10</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Marin</TD>
<TD WIDTH="200" HEIGTH="20">Paul</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">8</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Ivanov</TD>
<TD WIDTH="200" HEIGTH="20">Mihaela</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Pentru a vedea rezultatul: click aici.
Folosirea tabelelor ca plan al unei pagini web
Asa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web. Practic, folosind tabelele, putem adauga o imagine sau un text peste tot in pagina web. Sa vedem un exemplu: click aici.

Pagina de mai sus a fost facuta folosind tabele. Iata cum ar fi aratat pagina daca tabelele folosite ar fi avut atributul BORDER egal cu "1" in loc de "0": click aici.

In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem inca doua semne extraordinar de importante ale tag-ului <TD>: COLSPAN (numarul de coloane pe care se intinde celula) si ROWSPAN (numarul de linii pe care se intinde celula).

am folosit pentru celula rosie atributul COLSPAN="2", deoarece se intinde pe doua coloane, iar pentru celula albastra am utilizat atributul ROWSPAN="3" deoarece se intinde pe trei randuri.

Pentru a intelege mai bine întrebuințarea tag-urilor si a atributelor lor, nu uita sa exersezi cat mai mult. Incearca sa realizezi diferite pagini web pe baza notiunilor invatate in acest curs.