E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Bazele HTML (10)

VIII. Tabele

15.05.2008
VIII. Tabele

Tabele au fost utilizate initial pentru a afisa informatiile pe paginile web, la fel ca foile de calcul (spreadsheet). In prezent, ele sunt de obicei folosite fara contururi (borders), pentru a pozitiona textul sau imaginile sau pentru a separa pagina in sectiuni.

Total vizualizari: 8006 8006 afisari   |   Comentarii  0   |   Rating   |   (3 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1 2 »
comenteaza printeaza

Tabele au fost utilizate initial pentru a afisa informatiile pe paginile web, la fel ca foile de calcul (spreadsheet). In prezent, ele sunt de obicei folosite fara contururi (borders), pentru  a pozitiona textul sau imaginile sau pentru a separa pagina in sectiuni. Iti vom arata cum poti utiliza tag-ul <TABLE> si alte tag-uri asociate lui pentu a crea tabele complicate si iti vom oferi sugestii despre cum sa folosesti tabelele in site-ul tau.

Organizarea tabelelor
Elementele fundamentale ale unui tabel sunt celulele (cell), randurile (rows) si coloanele (columns). Fiecare celula se poate intinde pe mai multe linii sau coloane. Exemplu:

A B
C D E
F G H

Acesta este un tabel cu 4 coloane si 4 randuri, si contine 8 celule. Celulele A si B se intind pe cate 2 coloane si 2 randuri. Celula C se intinde pe 1 coloana si 2 randuri. Celula D se intinde pe 2 coloane si 1 rand. Celulele E,F,G si H contin fiecare cate un rand si o coloana (cele mai mici celule disponibile).

Tag-urile Table
Principalele tag-uri pentru crearea unui tabel sunt <table> si </table>, acestea indicand inceputul si sfarsitul unui tabel. Sintaxa pentru <table> este:

<table border="width" cellpadding="padding" cellspacing="spacing" 
width="width">
.
.
.
</table>

Atributul border defineste latimea conturului, in pixeli, care apare in jurul fiecarei celule. Daca vrei ca tabelul sa nu fie conturat, atunci vei scrie border="0". Cellpadding reprezinta spatiul, in pixeli, dintre marginile interioare ale unei celule si informatia pe care aceasta o contine, indiferent daca aceasta informatie este text sau altceva (o imagine). Cellspacing este spatiul, in pixeli, dintre celule. Daca ai optiunea de border activata, aceasta proprietate va mari distanta dintre marginile exterioare si cele interioare ale celulelor.

Width reprezinta latimea pe care tabelul o va avea pe pagina, in pixeli sau ca procentaj. Pentru a specifica un procent din latimea ferestrei browserului (astfel incat tabelul isi va modifica dimensiunile dupa cum fereastra in care este deschis este mai mare sau mai mica), pune semnul % dupa valoarea numerica propriu-zisa (width="50%"). Asigura-te ca nu ai uitat sa incluzi tag-ul </table> la sfarsitul tabelului. Daca acesta este omis, browserul Netscape nu va afisa nici tabelul, nici informatiile pe care acesta le contine (IE este mai tolerant fata de tag-urile de incheiere care lipsesc.)

Randuri si celule
Deci, ce introducem intre tag-urile  <table> si </table>? Mai intai, fiecare rand al tabelului trebuie definit prin tag-urile <tr> si </tr>, marcand astfel inceputul si respectiv sfarsitul acestuia. Intre <tr> si </tr> , pentru a crea fiecare celula in parte trebuie sa folosesti elementele <td> si </td>. Fiecare tag <td> are o serie de proprietati, dupa cum poti observa in exemplul de mai jos:

<td rowspan="n" colspan="n" width="n" align="center|right" 
valign="top|bottom" bgcolor="n">
.
    (informatiile care vor aparea in celula)
.
</td>

Daca celula se intinde pe mai mult de un singur rand, foloseste <td rowspan="n"> unde n este numarul de randuri pe care celula le contine. Pentru coloane, foloseste <td colspan="n"> unde n este numarul de coloane continute. Celula pe care vrem sa o definim se va intinde pe coloanele aflate la dreapta si randurile de sub ea. De exemplu, celula A este definita la randul 1, coloana 1, cu colspan="2" si rowspan="2". Aceasta inseamna ca ea contine 4 celule mai mici, determinate de primele 2 randuri si primele 2 coloane ale tabelului. Poti observa ca celulele A si B contin intreg randul 2, desi sunt definite la randul 1. Aceasta inseamna ca nu mai este necesara o sectiune <tr></tr> pentru randul 2, deoarece acesta nu mai are spatiu pentru alte celule. De fapt, in loc de doua randuri, celulele A si B vor contine un singur rand.

Pentru fiecare celula,  poti preciza latimea (width) in pixeli sau ca procentaj, folosind aceeasi sintaxa ca pentru tag-ul <table>. Uneori, latimea tabelelor poate intra in conflict cu cea a celulelor. Browserele rezolva aceasta problema in moduri diferite, deci testeaza pagina pe cat mai multe browsere, pentru a te asigura ca tabelele pe care le-ai definit apar la fel indiferent de browser. In continuare, fiecare celula poate fi aranjata orizontal sau vertical, ceea ce inseamna ca poti pozitiona textul sau imaginile din celula folosind atributele align si valign. Informatiile din celula sunt aliniate implicit la stanga pe orizontala si la mijloc pe verticala, deci daca vrei ca ele sa apara centrate sau aliniate la dreapta, foloseste align="center" sau align="right", si daca vrei ca ele sa apara in partea de sus sau de jos a celulei, utilizeaza valign="top" sau valign="bottom".

In sfarsit, bgcolor iti permite sa alegi o culoare de fundal (background) pentru fiecare celula din tabel. Pentru a clarifica lucrurile prezentante pana acum, acesta este codul HTML pentru a construi tabelul din exemplul de mai sus:

<table width="390" border="2" cellspacing="0" 
cellpadding="0">
  <tr> 
      <td colspan="2" bgcolor="#333333" align="center">
            <font color="#FFFFFF">A</font>
      </td>    
      <td colspan="2" bgcolor="#999999" align="center">
            <font color="#FFFFFF">B</font>
      </td>
  </tr> 
  <tr> 
      <td rowspan="2" bgcolor="#666666" align="center">
              <font color="#FFFFFF">C</font>
    </td>    
      <td colspan="2" bgcolor="#CCcccc" align="center">
              <font color="#000000">D</font>
      </td>    
      <td bgcolor="#666666" align="center">
              <font color="#FFFFFF">E</font>
      </td>
  </tr>  
  <tr> 
      <td bgcolor="#FFFFFF" align="center">
              <font color="#000000">F</font>
      </td>    
      <td bgcolor="#000000" align="center">
              <font color="#FFFFFF">G</font>
      </td>
      <td bgcolor="#e5e5e5" align="center">
              <font color="#FFFFFF">H</font>
      </td>
  </tr>
</table>

Desi tabelul nu arata ca cel din exemplu, il poti redimensiona. Tabelele sunt elastice, deci ele se pot micsora sau mari si in functie de textul sau imaginile pe care le contin.

Tabele imbricate
Un tabel poate contine la randul lui alte tabele. Tot ce trebuie sa faci este sa incluzi sectiunea <table></table> pentru noul tabel in interiorul unei celule (<td></td>) din tabelul parinte, iar tabelul mai mic va aparea in celula respectiva. Poti observa ca daca folosesti atributul width="n%" pentru un tabel din interiorul altui tabel, latimea acestuia va fi calculata relativ la dimensiunile tabelului parinte (ea nu depinde de latimea ferestrei browserului). Daca vrei ca tabelul tau sa aiba o margine vizibila, dar celulele din interiorul sau sa nu fie conturate, poti include acest tabel in altul cu un singur rand si o singura coloana, cu optiunea de border=0 pentru tabelul inclus si border=1 pentru cel exterior.

Pagina:
1 2 »
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4080
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4055
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3870
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fireworks Verilog HTML Ruby on Rails XHTML Swift 3D Bridge Gimp Powerpoint Fotografie CSS Sony Vegas MySQL Photoshop PHP StyleSheet Python Javascript Java Vista Lightroom Outlook SWF Word Illustrator AJAX SEO Action Script XML Dreamweaver RoR JSON Excel COREL DRAW PSD Flash
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software