Table, TR, TD, TH – cum să inserezi un tabel HTML

Crearea unui tabel HTML perfect

Dacă vrem să punem un tabel pe un website pe care îl construim, trebuie să-l definim în codul HTML, inserând tag-urile necesare pentru a crea structura tabelului. Putem modifica aspectul și planul tabelului folosind diferite atribute. Vom vorbi despre astfel de atribute și cum poți crea tabele HTML în acest articol, oferind și exemple editabile.

Folosind tabele HTML, putem organiza text, numere, poze și linkuri în rânduri, coloane și celule.

Putem crea un tabel HTML folosind tag-ul <table>. Pentru a adăuga rânduri, trebuie să folosim tag-uri <tr>, în timp ce poți adăuga celule cu tag-ul <td> tag (numele acestor tag-uri sunt prescurtări pentru „table row” și „table data”). Conținutul celulelor (datele) trebuie pus între tag-uri <td>.

Heading-urile sunt importante pentru a crea tabele cât mai lizibile. Le putem crea folosind tag-uri <th>, făcând conținutul celulelor să fie heading-uri în loc de date: textul din aceste celule va fi îngroșat (bold).

În mod implicit, conținutul pus între tag-urile <td> e aliniat spre stânga, în timp ce heading-urile sunt centrate.

Învață să creezi tabele HTML la CodeBerry

Captația – titlul unui tabel HTML

Poți crea o descriere sau un titlul pentru tabel folosind tag-ul <caption>—textul va apărea deasupra tabelului. Captațiile sau titlurile trebuie plasate după tag-ul <table>, dar înainte de primul tag <tr>.

Table Border – bordura unui tabel HTML

Informația despre bordura tabelului e scrisă în cod ca atributul border al tag-ului <table>. Dacă vrem să vedem liniile bordurii, vom folosi border = “1”, “2” etc. în funcție de cât de groasă vrem să fie bordura.

Cellpadding, Cellspacing – spațierea celulelor unui tabel HTML

Structura unui tabel nu trebuie să fie mereu cea implicită. Putem să mărim spațiul dintre celule sau să spațiem conținutul și bordurile celulelor pentru a face tabelul mai ușor de citit folosind atributele cellpadding și cellspacing. Și acestea trebuie puse înăuntrul tag-ului <table>.

Width și Height – scalarea tabelelor HTML

Putem seta înălțimea și lățimea tabelelor folosind atributele width și height. Valoarea poate fi definită în pixeli sau în procente relative la dimensiunea întregului ecran.

Colspan și Rowspan – îmbinarea rândurilor și coloanelor într-un tabel HTML

Pentru a îmbina rânduri și coloane, trebuie să folosești atributele colspan (pentru coloane) și rowspan (pentru rânduri) în tag-urile <td>, înainte de conținutul propriu-zis al celulelor. Putem defini câte celule vrem să îmbinăm cu valoarea care vine după atribut.

Învață despre crearea tabelelor HTML la CodeBerry

Setări de culoare ale tabelelor

Bordercolor – culoarea bordurii unui tabel HTML

Culoarea liniilor de bordură poate fi setată folosind atributul bordercolor. Putem defini culoarea pe care o vrem cu nume de culori sau coduri de culori. Poți citi mai multe despre acestea în articolul nostru intitulat Coduri de culori HTML.

Bgcolor – culoarea de fundal a unui tabel HTML

Poți defini culoarea de fundal a celulelor sau a întregului tabel folosind atributul bgcolor. Și în acest caz folosim nume de culori sau coduri de culori pentru a defini culori.

Învață cum să creezi un tabel HTML la CodeBerry

Sperăm că ai găsit informațiile necesare pentru a putea să creezi tabele lizibile și spectaculoase. Vrem să te încurajăm să dai clic pe interfața de editat și să încerci tot felul de setări. Definește noi dimensiuni și culori, și schimbă tabelul după cum îți place. Încearcă să găsești codurile pentru culorile tale preferate. Astfel poți practica ce ai învățat—te va ajuta să-ți întărești cunoștințele și te va ajuta să înveți cum să creezi tabele.

În seria „Ghidul începătorului” de la Școala de Programare CodeBerry, vom răspunde la întrebările pe care le poți avea despre limbajul de programare pe care trebuie să-l alegicât vei câștiga, ce poți face în calitate de programator și de unde să începi.