Tutoriale HTML - Tabele în HTML

Tabele

Pentru a insera un tabel se folosesc etichetele <table> .... </table>. Un tabel este format din rânduri. Pentru a începe un rând într-un tabel se folosesc etichetele <tr> ... <tr> (de la ,,table row” = rând de tabel).

Un rând este format din mai multe celule ce conţin date. O celula de date se introduce cu eticheta <td> (de la "table data" = date în tabel). În mod prestabilit un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizeaza un atribut al etichetei <table> numit border.

tutorial liste html tutorial liste html

Atributul border poate sa nu fie urmat de nici o valoare, caz în care în care tabelul va avea un chenar de grosime prestabilita egala cu 1 pixel.

O valoare egala cu 0 a grosimii semnifica absenţa chenarului.

Când are grosimea nenula, chenarul unui tabel are un aspect tridimensional.

tutorial liste html tutorial liste html tutorial liste html tutorial liste html

Folosirea etichetei de sfârşit </tr> este opţionala. Aşa cum am mai spus, atributul border poate sa nu fie urmat de nici o valoare, caz în care în care tabelul va avea un chenar de grosime prestabilita egala cu 1 pixel.

Dimensiunile unui tabel – laţimea şi înalţimea – pot fi stabilite exact prin intermediul a doua atribute, width şi height ale etichetei <table>.

Valorile acestor atribute pot fi:

  • numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
  • numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi înălţimea totala a paginii.
tutorial liste html tutorial liste html

Zona din jurul unui tabel

Valoarea atributului hspace a etichetei <table> reprezinta distanţa pe orizontala dintre imagine şi text (spre exemplu)

Valoarea atributului vspace a etichetei <table> reprezinta distanţa pe verticala dintre imagine şi text (spre exemplu)

tutorial liste html tutorial liste html

Titlul unui tabel

Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> (de la ,,table caption” = titlu de tabel). Aceasta eticheta trebuie plasata în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor <tr> sau <td>.

Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> astfel:</caption>

  • “bottom” (sub tabel)
  • “top” (deasupra tabelului)
  • “left” (la stânga tabelului)
  • “right” (la dreapta tabelului)
tutorial liste html tutorial liste html

Cap de tabel

Un tabel poate avea celule cu semnificaţia cap de tabel. Aceste celule sunt introduse în eticheta <th> (de la ,,table header” = cap de tabel) în loc de <td>.

Obervaţii:

  • Toate atributele care pot fi ataşate etichetei <td> pot fi, de asemenea, ataşate etichetei <th>.
  • Conţinutul celulelor definite cu <th> este scris cu caractere aldine şi centrat.
tutorial liste html tutorial liste html

Extinderea unei celule peste celulele din dreapta ei se face cu atributul colspan, a carui valoare determina numarul de celule care se unifica.

Extinderea unei celule peste celulele de dedesubt se face cu atributul rowspan, a carui valoare determina numarul de celule care se unifica.

tutorial liste html tutorial liste html

Celule vide ale unui tabel

Daca un tabel are celule de date vide, atunci acestea vor aparea în tabel fara un chenar de delimitare.

Exemplu: <tr><td><td>

În scopul de a afişa un chenar pentru celulele vide, se utilizeaza urmatoarele trucuri (ambele afişeaza un chenar pentru celule vide):

  • dupa <td> se pune caracterul &nbsp; (no break space)
  • dupa <td> se pune <br>
tutorial liste html tutorial liste html

Alte atribute ale etichetei <table>:

  • background permite stabilirea unei imagini pentru fondul unui tabel
  • bordercolor permite stabilirea întregii culorii pentru chenarul unui tabel

(bordercolorlight permite stabilirea unui colţ colorat pentru chenarul 3D al unui tabel)

(bordercolordark permite stabilirea altului colţ colorat pentru chenarul 3D al unui tabel)

tutorial liste html tutorial liste html

Grupuri de coloane

Blocul <colgroup> </colgroup> permite definirea unui grup de coloane. Atribute acceptate de <colgroup>:

  • span determina numarul de coloane dintr-un grup
  • width determina o laţime unica pentru coloanele din grup
  • align determina un tip unic de aliniere pentru coloanele din grup
tutorial liste html tutorial liste html

Într-un bloc <colgroup>, coloanele pot avea configurari diferite daca se utilizeaza elementul <col>, care admite atributele:

  • span identifica acea coloana din grup pentru care se face configurarea. Daca lipseşte, atunci coloanele sunt configurate în ordine;
  • width determina o laţime pentru coloana identica prin span;
  • align determina o aliniere pentru coloana identica prin span.
tutorial liste html tutorial liste html

Atributul rules al etichetei <table> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt: all, cols, rows, none.

tutorial liste html tutorial liste html