Tabele

HTML | Stefanescu Mihai | 2020-10-11

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 1 Celula 1	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 1 Celula 1	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

Articolul precedent

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
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.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞