Tabele

postat acum 2 ani de Stefanescu Mihai in categorie HTML

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
Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!