Author Topic: Tabele  (Read 400 times)

0 Members and 1 Guest are viewing this topic.

Offline -=[Vyorel]=-

  • Owner
  • Administrator
  • High-Roller
  • *
  • Posts: 4657
  • Respect: +176/-28
  • Gender: Male
  • Last Login:Yesterday at 12:06:56 AM
  • www.RO-PH.com
    • RO Power Hosting
  • Oras: Braila
Tabele
« on: November 23, 2009, 02:15:24 PM »
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent  .

Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor)
Code: [Select]
<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 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folositi style)
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea

Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4
Code: [Select]
<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>

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.

Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele <th> si </th>
Code: [Select]
<table border="1">  <tr>  <th width="120">Titlul 1</th>  <th width="120">Titlul 2lt;/th>  </tr>  <tr>  <td>1</td>  <td>2</td>  </tr>  <tr>  <td>3</td>  <td>4</td>  </tr> </table>

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.

Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
Code: [Select]
<table border="1"> <caption>Necesar alimente</caption>  <tr>  <th width="120">Produse</th>  <th width="120">Cantitatelt;/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 ii adaugam o imagine de fundal folosind style in zona head
Code: [Select]
<html>
<head>
<style type="text/css">
#fundal {
background-image : url(poza.jpg);
}
</style>
</head>
<body>
<table border="1" id="fundal">
...
</body>
</html>

Legenda:
tr = Defines a row in a table
td = Defines a cell in a table
th = Defines a table header cell in a table

Offline The Matrix

  • RMDCorp
  • ROPH Friends
  • High-Roller
  • *****
  • Posts: 2764
  • Respect: +11/-47
  • Gender: Male
  • Last Login:October 27, 2014, 09:53:23 PM
  • IT
  • Oras: Bucuresti
Re: Tabele
« Reply #1 on: June 06, 2012, 08:18:39 PM »
Chiar aveam nevoie de Tipul asta de tabele, mersi  ^:)^


Offline Shadow

  • Junior Member
  • ***
  • Posts: 72
  • Respect: +0/-0
  • Gender: Male
  • Last Login:January 24, 2014, 06:25:54 PM
  • Oras: Iasi
Re: Tabele
« Reply #2 on: September 17, 2012, 07:07:55 PM »
Multumesc -=[Vyorel]=- pentru acest tutorial chiar aveam nevoie :)