Tabele

postat acum 4 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!

Comentariu postate de how to download minecraft free la data de 14.05.2019
If you are going for most excellent contents like myself, only pay a visit this site daily since it provides feature contents, thanks
Comentariu postate de minecraft for free la data de 15.05.2019
I constantly emailed this web site post page to all my associates, since if like to read it afterward my contacts will too.
Comentariu postate de kobe byrant shoes la data de 17.05.2019
I in addition to my friends were reading the excellent guides found on your web blog while then came up with a terrible suspicion I never expressed respect to you for them. The ladies came absolutely passionate to read all of them and have truly been having fun with these things. Appreciation for simply being simply helpful as well as for settling on this kind of good resources millions of individuals are really desperate to learn about. My honest regret for not expressing appreciation to you earlier.
Comentariu postate de minecraft download mojang la data de 17.05.2019
Good day! Do you know if they make any plugins to assist with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results. If you know of any please share. Thanks!