Lectia 9 HTML | Tabele

O zona dintr-o pagina web poate fi fragmentata astfel incat sa se obtina un tabel.

Prin folosirea unui tabel, poti aranja informatiile sau le poti compara astfel incat site-ul sa capete si un design "curat".

Un tabel se defineste folosind etichetele <table> si </table>. Intre aceste etichete se folosesc etichetele <tr> si </tr>.
Initialele "t" si "r" din eticheta <tr> sunt initialele cuvintelor "table row" (rand de tabel).
Folosind etichetele <tr> si </tr> am creat linile orizontale.
Pentru a crea celulele, trebuie sa folosesti intre etichetele <tr> si </tr>, etichetele <td> si </td>.

    EXEMPLU:


<html>

<head>
<title>Tabel</title>
</head>

<body>

<table border="6">
<tr>
<td>celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
</table>

</body>
</html>

celula 1 celula 2 celula 3
celula 4 celula 5 celula 6


Daca vrei sa integrezi tabelul astfel incat sa se potriveasca cu design-ul site-ului tau, atunci trebuie sa adaugam cateva atribute tabelului.

Implicit, linile si coloanele (bordurile tabelului) care definesc tablourile nu au grosime.

Pentru a seta o grosime se foloseste atributul border="".
Intre ghilimele vei introduce grosimea in cifre.

 

Poti schimba culoarea background-ului folosind atributul bgcolor="".
Intre ghilimele vei introduce culoarea in limba engleza sau in hexadecimale.

Poti schimba culoarea bordurii folosind atributul bordercolor="".
Intre ghilimele vei introduce culoarea in limba engleza sau in hexadecimale.

    EXEMPLU:


<html>

<head>
<title>Tabel</title>
</head>

<body>

<table border="6" bordercolor="red" bgcolor="green">
<tr>
<td>celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td>celula 4</td>
<td>celula 5</td>
<td>celula 6</td>
</tr>
</table>

</body>
</html>

celula 1 celula 2 celula 3
celula 4 celula 5 celula 6


Pozitionarea tabelului se face cu ajutorul atributelor align="" si valign="".

Prin folosirea atributului align, tabelul se va alinia pe orizontala in functie de pozitia specificata.
Pozitiile pot fi "left", "center" si "right".
Exemplu:
<table align="center">

Atributul valign="" se foloseste doar in etichetele <tr> si <td>.
Prin folosirea acestui atribut, continutul celulei unde a fost folosit acest atribut, se va alinia in functie de pozitia specificata.
Pozitiile pot fi "top", "middle" si "bottom".
Exemplu:
<table>
<tr>
<td valign="bottom">
</td>
</tr>
</table>