Tabele

Tabelele HTML permit programatorilor sa aranjeze datele (text, imagine, link, alte tabele, etc) in randuri si coloane.

Aceste tabele pot fi create cu tag-ul <table> in interiorul caruia sunt puse randuri cu ajutorul tagului <tr> si coloane cu tag-ul <td>.

<!DOCTYPE html>
<html>
<head>
<title>Tabele HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Rand 1, Coloana 1</td>
<td>Rand 1, Coloana 2</td>
</tr>
<tr>
<td>Rand 2, Coloana 1</td>
<td>Rand 2, Coloana 2</td>
</tr>
</table>
</body>
</html>

Acest cod va avea urmatorul rezultat:

Rand 1, Coloana 1 Rand 1, Coloana 2
Rand 2, Coloana 1 Rand 2, Coloana 2

Atributul border folosit in interiorul tag-ului <table> genereaza un border pentru toate randurile/coloanele. Daca nu doriti border puteti sa-l setati la 0 astfel border=”0″.

Heading Tabel

Un heading de tabel poate fi definit folosind tag-ul <th>. Acesta va fi pus in locul tag-ului <td>.

<!DOCTYPE html>
<html>
<head>
<title>Header Tabele HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>Nume</th>
<th>Functie</th>
<th>Salariu</th>
</tr>
<tr>
<td>Georgescu Mircea</td>
<td>Designer</td>
<td>5000</td>
</tr>
<tr>
<td>Ionescu George</td>
<td>Programator</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Acest cod va avea urmatorulo rezultat:

Nume Functie Salariu
Georgescu Mircea Designer 5000
Ionescu George Programator 7000

 Cellpadding si Cellspacing

Sunt doua atribute numite cellpadding si cellspacing ce sunt folosite pentru a ajusta spatiul dintre marginile celulei si text si pentru spatiul dintre celule.

<!DOCTYPE html>
<html>
<head>
<title>Cellspacing si Cellpadding Tabele HTML</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Nume</th>
<th>Functie</th>
<th>Salariu</th>
</tr>
<tr>
<td>Georgescu Mircea</td>
<td>Designer</td>
<td>5000</td>
</tr>
<tr>
<td>Ionescu George</td>
<td>Programator</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Si acest cod va avea urmatorul rezultat:

Nume Functie Salariu
Georgescu Mircea Designer 5000
Ionescu George Programator 7000

Colspan si Rowspan

Puteti folosi atributul colspan pentru a uni doua sau mai mule coloane in una singura. Iar atributul rowspan face acelasi lucru pentru randuri.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Coloana 1</th>
<th>Coloana 2</th>
<th>Coloana 3</th>
</tr>
<tr>
	<td rowspan="2">Rand 1 Celula 1</td>
	<td>Rand 1 Celula 2</td>
	<td>Rand 1 Celula 3</td>
</tr>
<tr>
	<td>Rand 2 Celula 2</td>
	<td>Rand 2 Celula 3</td>
</tr>
<tr>
	<td colspan="3">Rand 3 Celula 1</td>
</tr>
</table>
</body>
</html>

Rezultatul va fi urmatorul:

Coloana 1 Coloana 2 Coloana 3
Rand 1 Celula 1 Rand 1 Celula 2 Rand 1 Celula 3
Rand 2 Celula 2 Rand 2 Celula 3
Rand 3 Celula 1

Background

Putem seta si un background petntru un tabel, ba chiar avem doua optiuni:

  • bgcolor – setam o culoare pentru tot tabelul sau doar o celula
  • background – setam o imagine de fundal pentru tot tabelul sau pentru o celula

Pentru culoarea borderului putem seta si atributul bordercolor.

<!DOCTYPE html>
<html>
<head>
<title>Background Tabele</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="lightgreen">
<tr>
<th>Coloana 1</th>
<th>Coloana 2</th>
<th>Coloana 3</th>
</tr>
<tr>
	<td rowspan="2">Rand 1 Celula 1</td>
	<td>Rand 1 Celula 2</td>
	<td>Rand 1 Celula 3</td>
</tr>
<tr>
	<td>Rand 2 Celula 2</td>
	<td>Rand 2 Celula 3</td>
</tr>
<tr>
	<td colspan="3">Rand 3 Celula 1</td>
</tr>
</table>
</body>
</html>

Acest cod va avea urmatorul rezultat:

Coloana 1 Coloana 2 Coloana 3
Rand 1 Celula 1 Rand 1 Celula 2 Rand 1 Celula 3
Rand 2 Celula 2 Rand 2 Celula 3
Rand 3 Celula 1

Inaltime si Latime

Puteti seta inaltimea si latimea folosind atributele width si height si pot fi exprimate in procente sau numere (nu px sau pt, unitate de masura a HTML-ului).

<!DOCTYPE html>
<html>
<head>
<title>Inaltime/Latime Tabel</title>
</head>
<body>
<table border="1" width="380" height="120">
<tr>
<td>Rand 1, Coloana 1</td>
<td>Rand 1, Coloana 2</td>
</tr>
<tr>
<td>Rand 2, Coloana 1</td>
<td>Rand 2, Coloana 2</td>
</tr>
</table>
</body>
</html>

Acest cod va avea urmatorul rezultat:

Rand 1, Coloana 1 Rand 1, Coloana 2
Rand 2, Coloana 1 Rand 2, Coloana 2

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.