[Tutorial HTML] Crearea tabelelor

[Tutorial HTML] Crearea tabelelor

#1 de BoGdY

Nume Tutorial: Crearea tabelelor
Descriere: Crearea tabelelor
Download:
Autor: Anonim
Sursa (Link-ul oficial):

Afiseaza Textul

Propria parere: Folositor.
Tutorialul:

Aceste etichete au o mare utilizare deoarece tabelele constituie structura care stă la baza organizării marii majorități a paginilor web (inclusiv cea de față).

Tabelul este format din linii și coloane împărțind zona în celule. Fiecare celulă păstrează informația care va fi afișată. Pentru o afișare corectă a tabelului, fiecare rând va avea același număr de celule. Dacă dorim ca o celulă să fie goală vom introduce un spațiu gol (space) sau codul html echivalent  

Pentru inserarea unui tabel este folosită perechea de etichete <table> și </table>, pentru un rând <tr> și </tr> (table rows) iar pentru o celulă <td> și </td> (table data cell) .

Tabele pot fi îmbricate, adică în interior pot conține unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane și 2 rânduri, border 1, coloana 1 lățime 80px, coloana 2 lățime 160px, fiecare celulă are o altă culoare de fond (bgcolor)

Cod: Selectaţi tot

<table border="1">
   <tr>
      <td width="80" bgcolor="red">rosu</td>
      <td width="160" bgcolor="yellow">galben</td>
   </tr>
   <tr>
      <td bgcolor="white">alb</td>
      <td bgcolor="green">verde</td>
   </tr>
</table>

Atributele etichetei table sunt:
border = bordura (0 = lipsă bordura)
width = lățimea tabelului
height = înălțimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiți în loc style)
cellspacing = distanța între celule
cellpaddind = distanța dintre marginea celului și conținut

Atributele etichetei td sunt:
align = aliniere pe orizontală a conținutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticală a conținutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)
width = lățimea celulei
height = înălțimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiți în loc atributul style)
colspan = unește celula cu cea din dreapta ei
rowspan = unește celula cu cea de sub ea

Exemplu: un tabel în care am folosit colspan pentru a uni celulele 1 și 2 din rândul 2 și rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4:

Cod: Selectaţi tot

<table border="1">
   <tr>
      <td bgcolor="white">R1 C1</td>
      <td bgcolor="yellow">R1 C2</td>
      <td bgcolor="white">R1 C3</td>
      <td bgcolor="yellow">R1 C4</td>
   </tr>
   <tr>
      <td colspan="2" bgcolor="red">R2 C1+C2</td>
      <td bgcolor="yellow">R2 C3</td>
      <td bgcolor="red">R2 C4</td>
   </tr>
   <tr>
      <td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td>
      <td bgcolor="yellow">R3 C2</td>
      <td bgcolor="white">R3 C3</td>
      <td bgcolor="yellow">R3 C4</td>
   </tr>
   <tr>
      <td bgcolor="red">R4 C2</td>
      <td bgcolor="yellow">R4 C3</td>
      <td bgcolor="red">R4 C4</td>
   </tr>
</table>

Dacă dorim să evidențiem conținutul primului rând (capul de tabel) putem folosi perechea de etichete <th> și </th> (table header cell) în locul etichetelor <td> și </td>. Astfel conținutul celulei va fi afișat îngroșat și aliniat pe mijloc.

Exemplu: un tabel cu 3 rânduri și 2 coloane folosind pe primul rând etichetele <th> și </th>:

Cod: Selectaţi tot

<table border="1">
   <tr>
      <th width="120">Titlul 1</th>
      <th width="120">Titlul 2</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr>
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
</table>

Eticheta caption va adăuga o linie text deasupra tabelului, centrată pe mijloc, de obicei folosită ca fiind un titlu al tabelului. Caption se plasează obligatoriu imediat după tag-ul table dar înainte de prima etichetă tr.

Exemplu: un tabel cu 4 rânduri și 2 coloane folosind eticheta caption:

Cod: Selectaţi tot

<table border="1">
   <caption>Necesar alimente</caption>
   <tr>
      <th width="120">Produse</th>
      <th width="120">Cantitate</th>
   </tr>
   <tr>
      <td>Fructe</td>
      <td>1 kg</td>
   </tr>
   <tr>
      <td>Legume</td>
      <td>5 kg</td>
   </tr>
   <tr>
      <td>Carne</td>
      <td>1,5 kg</td>
   </tr>
</table>

Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:

Cod: Selectaţi tot

 <html>
 <head>
    <style type="text/css">
       #fundal {
          background-image : url(poza.jpg);
       }
    </style>
 </head>
 <body>
    <table border="1" id="fundal">
       <caption>Necesar alimente</caption>
       <tr>
       <th width="120">Produse</th>
       <th width="120">Cantitate</th>
       </tr>
       <tr>
       <td>Fructe</td>
       <td>1 kg</td>
       </tr>
       <tr>
       <td>Legume</td>
       <td>5 kg</td>
       </tr>
       <tr>
       <td>Carne</td>
       <td>1,5 kg</td>
       </tr>
       </table>
 </body>
 </html>

[Tutorial HTML] Crearea tabelelor

[Tutorial HTML] Crearea tabelelor

Cine este conectat