Tabele

Stefanescu Mihai 2 years ago 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

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
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.