Tabele HTML ( Table ), exemple, curs online, html

Definirea unui tabel HTML

Tabelele HTML permit autorilor web să aranjeze date precum text, imagini, link-uri, alte tabele etc. în rânduri și coloane de celule.
Tabelele HTML sunt create folosind eticheta <table> în care eticheta <tr> este utilizată pentru a crea rânduri de tabelă și <td> tag este utilizată pentru a crea celule de date.
Elementele de sub <td> sunt regulate și se lasă aliniate în mod implicit.

Exemplu:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati Tabelele HTML?</title>
  </head>
<body>

<table>

 <tr>

    <td>Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Eva</td>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

</table>

</body>  	 
 </html>

Notă: Elementele <td> sunt containerele de date din tabel. Pot conține tot felul de elemente HTML; text, imagini, liste, alte tabele etc.

HTML Table - Adding a Border

Tabel HTML - Adăugarea unui chenar
Dacă nu specificați un chenar pentru tabel, acesta va fi afișat fără margini. Un chenar este setat fara chenar CSS:

Exemplu 2:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati chenar Tabelelor HTML?</title>
  </head>
<body>

<table border = "2">

 <tr>

    <td>Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Eva</td>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

</table>

</body>  	 
 </html>

Nota: Aici, chenarul este un atribut al etichetei <table> și este utilizat pentru a pune un chenar pe toate celulele. Dacă nu aveți nevoie de margine, atunci puteți utiliza border = "0".

Adaugare Titlu tabelelor HTML

Titlul tabelului poate fi definit folosind eticheta <th>.
Această etichetă va fi pusă pentru a înlocui eticheta <td>, care este utilizată pentru a reprezenta celula de date reală.
În mod normal, veți pune rândul superior ca titlu de tabel, așa cum se arată mai jos, altfel puteți utiliza elementul <th> în orice rând. Titlurile, care sunt definite în etichetă <th> sunt centrate și bolduite în mod implicit.

Exemplu 3:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati Titlu tabelelor HTML?</title>
  </head>
<body>

<table border = "2">
   <tr>

       <th>Nume</th>

       <th>Prenume</th>

       <th>Varsta</th>

   </tr>

 <tr>

    <td>Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Eva</td>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

</table>

</body>  	 
 </html>

Adaugare Cellpadding and Cellspacing Tabelelor HTML

Există două atribute numite Cellpadding and Cellspacing pe care le veți folosi pentru a regla spațiul alb din celulele tabelului.
Atributul Cellspacing definește spațiul dintre celulele tabelului, în timp ceCellpadding reprezintă distanța dintre marginile celulelor și conținutul unei celule.

Exemplu 4:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati Cellpadding and Cellspacing Tabelelor HTML?</title>
  </head>
<body>

<table border = "2" cellpadding = "5" cellspacing = "5">
   <tr>

       <th>Nume</th>

       <th>Prenume</th>

       <th>Varsta</th>

   </tr>

 <tr>

    <td>Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Eva</td>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

</table>

</body>  	 
 </html>

Colspan și Rowspan Tabelelor HTML

Veți folosi atributul colspan dacă doriți să îmbinați două sau mai multe coloane într-o singură coloană. În mod similar, veți utiliza intervale de rând dacă doriți să îmbinați două sau mai multe rânduri.

Exemplu 5:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati Colspan și Rowspan Tabelelor HTML?</title>
  </head>
<body>

<table border = "2" cellpadding = "5" cellspacing = "5">

   <tr>

       <th>Nume</th>

       <th>Prenume</th>

       <th>Varsta</th>

   </tr>

 <tr>

    <td rowspan = "2">Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

 <tr>
   <td colspan = "3">3vile si 4 apartamente</td>
 </tr> 
</table>

</body>  	 
 </html>

Tables Backgrounds

Tablouri Fundaluri
Puteți seta fundalul tabelului folosind una dintre următoarele două moduri -
bgcolor atribut - Puteți seta culoarea de fundal pentru întreaga tabelă sau doar pentru o singură celulă.
background atribut - Puteți seta imaginea de fundal pentru întreaga tabelă sau doar pentru o singură celulă.
Puteți seta, de asemenea, culoarea fundalului folosind atributul bordercolor.

Exemplu 6:

<!DOCTYPE html>
<html> 
  <head> 
     <title>Cum sa adaugati Fundaluri in HTML?</title>
  </head>
<body>

<table border = "2" cellpadding = "5" cellspacing = "5" 

bordercolor = "red" bgcolor = "yellow">

   <tr>

       <th>Nume</th>

       <th>Prenume</th>

       <th>Varsta</th>

   </tr>

 <tr>

    <td rowspan = "2">Orban</td>

    <td>Victor</td>

    <td>55</td>

 </tr>

 <tr>

   <td>Magdalena</td>

   <td>44</td>

 </tr>

 <tr>
   <td colspan = "3">3vile si 4 apartamente</td>
 </tr> 
</table>

</body>  	 
 </html>

Notă - Atributele bgcolor, background si bordercolor sunt depășite în HTML5. Nu folosiți aceste atribute.

Tags: Tabele HTML, Table, exemple, curs online, HTML editor

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.