De multe ori atunci cand avem de facut o prezentare se utilizeaza tabele , de aceea astazi o sa vorbim despre cum puteti sa creati ,sa utilizati si sa personalizati tabele in html . Pentru a organiza un text in cadrul unui tabel va trebui sa lucram cu lini si coloane . Intersectia unei lini cu o coloana formeaza asa numitele celule.Funcția reală a tabelelor este de a aranja date (adică text, imagini și alt conținut) în rânduri și coloane. Dar, cel mai frecvent, tabele sunt folosite ca un dispozitiv de aspect pentru a împărți pagini web în secțiuni diferite, cum ar fi antet, subsol, dreapta și coloana din stânga, conținutul principal centru și așa mai departe.
Pentru a defini un tabel vom folosi tag-ul <table> respectiv </table> pentru a inchide tabelul.
Cele mai importante atribute pe care tag-ul tabel le are sunt urmatoarele :
1. border - acest atribut adauga o bordura tabelului
2. cellpadding - atributul ajuta la tapisarea / capitonarea textului in celula.
3. cellspacing - spatiaza celulele intre ele , in cadrul tabelului.
4. bgcolor - acest atribut adauga o coloare de fundal tabelului.
5. background - adauga o imagine de fundal tabelului
6. frame - adauga o rama tabelului : "border" , "box" , "void" , "above" , "below" , "hsides" , "rhs", "vsides", "lhs"
Tag-ul <tr> -</tr> - defineste un rand /linie in cadrul unui tabel.
Tag-ul <td>-</td> - defineste o celula ; acest tag se pozitioneza in interiorul elementului <tr> respectiv </tr>
Exemplu :
<html>
<head>
<title>Tabele pe site</title>
</head>
<body>
<h3>Tabel cu trei lini si trei coloane</h3>
<table border="1">
<tr>
<td>Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
<td>Randul 1 Coloana 3</td></tr>
<tr>
<td>Randul 2 Coloana 1</td>
<td>Randul 2 Coloana 2</td>
<td>Randul 2 Coloana 3</td>
</tr>
<tr>
<td>Randul 3 Coloana 1</td>
<td>Randul 3 Coloana 2</td>
<td>Randul 3 Coloana 3</td>
</tr>
</table>
</body>
</html>
<th> </th> -Defineste un titlu de celula sau ,mai bine zis un cap de coloana .Asa cum elementul <td> defineste o celula standard elementul <th> defineste un titlu si trebuie de asemenea introdus in interiorul tag <tr>
Atribute speciale in cadrul tag-urrilor <tr> ,<td> ,<th> :
1. colspan - uneste doua coloane
2. rowspan -uneste doua celule
3. bgcolor - adauga o culoare de fundal celulei sau randului
4. background - adauga o imagine de fundal celulei sau randului
5. align - aliniaza continutul unei celule "left" , "right" , "center"
Exemplu
<html>
<head>
<title>Tutorial Tabele</title>
</head>
<body>
<table border="1">
<tr>
<th>Titlu 1</th>
<th>Titlu 2</th>
<th>Titlu 3</th>
</tr>
<tr>
<td>Randul 2 celula 1</td>
<td colspan="2">Randul 2 celula 2 unita cu celula 3</td>
</tr>
<tr>
<td rowspan="2">Randul 3 celula 1 unit cu randul patru celula 1</td>
<td>Randul 3 celula 2 </td>
<td>Randul 3 celula 3 </td>
</tr><tr>
<td>Randul 4 celula 2 </td>
<td>Randul 4 celula 3 </td>
</tr>
</table>
</body>
</html>
Rezultatul acestui cod este :
<caption> </caption> -Defineste un titlu pentru tabel
Atributele in cadrul unui tabel sunt foarte importante ,fără atribute, dimensiunea tabelului (înălțime și lățime) va fi întotdeauna determinată de cantitatea de conținut din celulele tabelului. Atributele cele mai frecvent utilizate pentru elementul TABLE sunt: ALIGN , BORDER , WIDTH , HEIGHT , CELLPADDING și CELLSPACING .
ALIGN : Valori posibile: left / right / centre . În mod prestabilit, un tabel este aliniat la marginea din stânga, deci trebuie să includeți acest atribut numai când doriți să centrați masa sau să aliniați tabelul la marginea dreaptă. Exemplu : <table align="center">
BORDER : grosimea marginii mesei în pixeli, implicit este 0.
<table align="center" border="5">
Atributele WIDTH și HEIGHT
WIDTH si HEIGHT : aceste două atribute definesc o lățime și înălțime tabelului, fie cu o valoare absolută în pixeli sau o valoare relativă ( în procente). Deci, o valoare de 70 înseamnă o lățime / înălțime absolută de 70 pixeli și 70% înseamnă 70% din spațiul orizontal / vertical disponibil.
Pentru acest exemplu am inclus două tabele: una cu o lățime absolută de 400 de pixeli și o înălțime absolută de 100 de pixeli, iar una cu o lățime relativă de 30% și o înălțime relativă de 10%.
<table align="center" border="2" width="400" height="100">
<table align="center" border="2" width="30%" height="10%">
Atributele CELLPADDING și CELLSPACING
CELLPADDING și CELLSPACING : Atributul CELLPADDING descrie spațiul în pixeli între granița celulei tabelului și conținutul acesteia, în timp ce atributul CELLSPACING descrie spațiul în pixeli între diferitele celule de tabelă. Aceste spații sunt întotdeauna aplicate în mod egal pe toate cele patru laturi. Următorul grafic ilustrează acest lucru. Mai multă flexibilitate în aplicarea spațiilor la tabele este dată cu CSS (Cascading Style Sheets)
Alinierea implicită pentru conținut (text, imagini) din interiorul unei celule din tabel este lăsată (orizontal) și mijlocă (verticală).
Există două atribute pe care le puteți utiliza în interiorul elementului TD pentru a alinia conținutul: ALIGN pentru alinierea orizontală (stânga, mijlocul, dreapta) și VALIGN pentru alinierea verticală (partea superioară, mijlocul, partea de jos).
Cu toate acestea, o opțiune mai bună pentru alinierea conținutului într-o celulă de tabelă este dată cu CSS (Cascading Style Sheets ). Pentru moment, trebuie doar să aruncați o privire la exemplul de mai jos, care vă arată câteva opțiuni diferite pentru alinierea orizontală și verticală.
<table>
<tr>
<td align = "center" > Abreviere </ td>
<td align = "center" valign = "top" > Form lung </ td>
</ tr>
<tr>
<td align =“ dreapta“ > cat mai repede posibil </ td>
<td align = "dreapta" valign = "bottom" > cât mai curând posibil </ td>
</ tr>
<tr>
<td> IMHO </ td>
<td> în umila mea Opinie </ td>
</ tr>
</ table>
În cele din urmă, aș dori să vă arăt rapid două atribute pentru elementul de date TD : COLSPAN și ROWSPAN . Nu voi intra în detalii despre acestea acum, pentru că nu vreau să-ți subliniez creierul cu lucruri complexe pe care, probabil, nu le vei avea nevoie oricum. Vreau doar să vă arăt ceea ce este posibil, așa că vă amintiți atunci când doriți să creați tabele mai complexe, de exemplu pentru utilizarea în aspectul paginii dvs. de web.
Funcția COLSPAN este să cuprindă o celulă de date de tabel peste un anumit număr de coloane, îmbinând astfel celulele din același rând. Și funcția ROWSPAN este de a spama o celulă de date de tabel peste un anumit număr de rânduri, adunând astfel celulele din aceeași coloană.
