Tutorial HTML – tabele

Tutorial HTML – tabele

Tutorial HTML – tabele abordează pe scurt etichetele de formare a structurii tabelelor și stilizarea lor cu ajutorul CSS.

Tabelele sunt folosite în paginile web în mai multe moduri. Dacă trebuie să afișăm o structură tabelară, sau vrem să aranjăm anumite elemente fără să fie vizibile chenarele tabelare, atunci tabelele ne pot ajuta. Chiar și pentru formarea unui meniu se poate folosi la bază un tabel.

Etichete de structură a tabelului

Ca și o pagină HTML, un tabel are 3 secțiuni ce trebuie definite dacă dorim ca browserele web să preia corect conținutul tabelului. Astfel, un tabel are un head, un body și un footer ce se definesc ca în exemplul de mai jos.

În <table> </table> se cuprinde întreaga structură a tabelului. În <thead> se trec datele de cap de coloane, în <tbody> se formează corpul tabelului cu datele lor, iar la final în <tfoot> se trec informații de subsol sau explicații.

Ceea ce trebuie reținut este faptul că datele din <thead> și <tfoot> sunt definite prin <th>, în timp ce în <tbody> se folosește <td>.

Atributele colspan și rowspan ne pot ajuta să întindem un rând pe mai multe coloane, și respectiv, o coloană să se întindă pe mai multe rânduri. Aceste atribute se declară în etichetele <td> sau <th>.

table example

Stiluri de tabel

Un mic exemplu în acest sens este:

Exemplul de mai sus aduce definește o margine a tabelului de 2 pixeli, linie continuă și de culoare neagră.

Apoi comanda border-spacing:0; elimină spațiile dintre marginile celulelor, însă acest lucru va conduce la dublarea marginilor interioare, lucru ce va fi corectat cu instrucțiunea următoare.

border-collapse:collapse; va face ca toate liniile alăturate să fie afișate ca o singură linie, ceea ce va face ca liniile tabelului să fie de acceași grosime.

Pentru ca textul din tabel să fie ușor de citit, se folosește instrucțiunea padding:5px pentru ca textul să se afle la 5 pixeli distanță de toate părțile celulei.

 

Tags: , , ,

Spune-ti parerea