Cauta rapid aici ↑

HTML -- TABEL

Sunt anumite situatii in care este nevoie sa prezentam anumite date sub forma unui tabel. Limbajul HTML ne ofera in acest caz cateva tag-uri pereche pentru afisarea tabelului. Tag-ul pereche <table></table> reprezinta inceputul si sfarsitul tabelului nostru. Dupa cum stim toate tabelele au randuri si campuri. Pentru inceperea unui rand intr-un tabel se va folosi tag-ul pereche <tr></tr> care la randul lui va avea asa zisele campuri sau celule in componenta lui, acestea fiind reprezentate prin tag-ul pereche <td></td> . Pentru ca tabelul nostru sa se vada in pagina HTML, tag-ul <table></table> are un atribut foarte folositor pentru acest lucru. Atributul border (linie) va avea ca valoare o masura in pixeli ce va inconjuta tot tabelul cu o linie de culoarea neagra (culoare default) si de grosimea specificata de noi in pixeli (minim 1 pixel). Tabelul nostru mai are inca doua atribute cu care ii putem seta latimea si inaltimea pe care o dorim. Atributele width si height vor avea ca valoare latimea si inaltimea pe care ne-o dorim pentru tabelul nostru exprimata in pixeli.

In prezent avem toate ingredientele necesare pentru afisarea unui tabel si desi acesta va functiona perfect, tabelul nostru nu va arata prea bine in pagina HTML. Informatia din acesta se va afisa lipita de marginea din stanga-sus a fiecarei celule. Pentru a corecta acest lucru va trebui sa ii dam o margine interioara fiecarei celule. Pentru asta va trebui sa folosim un stil inline pe fiecare celula in parte sau metoda cea mai eficienta, acelasi stil scris doar o singura data intr-un fisier extern CSS si aplicat de browser la fiecare celula dintr-un tabel pe care o va intalni in paginile noastre HTML (in acest caz pentru exemplificare voi folosi un stil intern). Stilul dintr-un fisier extern CSS va fi in felul urmator: td{padding: 5px;} . Mai multe informatii legate despre aceasta margine interioara o veti gasi in tutorialele CSS.

Sunt situatii in care vrem ca un camp sa fie afisat peste doua sau mai multe campuri cu scopul de a adauga un titlu sau altceva in acel camp extins, pe orizontala sau pe verticala in tabel. Pentru asta va trebui sa ii dam acelui camp, in tag-ul de inceput <td></td> urmatoarele atribute.

Pentru ca un camp sa fie afisat pe orizontala peste doua sau mai multe campuri va trebui sa folosim atributul colspan care va avea ca valoare numarul de campuri peste care vrem sa fie afisat. Acelasi lucru il vom face si daca vrem ca un camp sa ocupe mai mult de un rand. In acest caz vom folosi atribut rowspan caruia ii vom da ca valoare numarul de randuri peste care vrem sa fie afisat.

HTML --- TAG-uri PENTRU INSERAREA UNUI TABEL SI ROLUL LOR

  • <table> === defineste un tabel
  • <th> === defineste un camp in partea de sus a unui tabel
  • <tr> === defineste un rand dintr-un tabel
  • <td> === defineste un camp dintr-un tabel
  • <caption> === defineste o legenda din tabel
  • <colgroup> === specifica un grup de una sau mai multe coloane intr-un tabel de formatare
  • <col> === specifica proprietatilor coloana pentru fiecare coloana intr-un element de <colgroup>
  • <thead> === defineste grupuri de continut antet dintr-un tabel
  • <tbody> === defineste grupuri de continut corp dintr-un tabel
  • <tfoot> === defineste grupuri de continut din subsolul unui tabel