Tag „table” în limbajul HTML

În acest articol vă prezentăm tag-ul html table.

Să luăm în considerare un exemplu real și anume lista cu consumul lunar la o scară de bloc.

Pentru afișarea unor informații sub formă de tabel, în limbajul HTML, se folosește tag-ul table.

Acest tag are o etichetă de început <table> și o etichetă de sfârșit </table>.

Pentru a descrie un tabel, mai întâi trebuie precizate câte rânduri conține tabelul, iar apoi câte coloane conține fiecare rând.

În acest tabel, pentru a lista informația, se folosesc X rânduri, iar pentru fiecare rând se folosesc Y coloane.

Dacă în bloc se afla 15 locuințe, 15 rânduri va avea tabelul.

Pentru fiecare locuință se afișează numărul apartamentului, numele proprietarului, suma restantă totală și suma de plată pentru luna curentă, de unde reies cele 4 coloane care trebuie afișate pentru fiecare rând din tabel.

Astfel, descrierea situației pentru fiecare apartament, va ocupa 1 rând, iar acel rând va fi impărțit în 4 coloane.

Pentru a descrie un rând, folosim tagul tr, acesta are eticheta de început <tr> și eticheta de sfârșit </tr>;

Fiecare rând conține una sau mai multe coloane.

Pentru a descrie o coloană, folosim tagul td, acesta are eticheta de început <td> și eticheta de sfârșit </td>

Între etichetele <td> și </td> se va scrie conținutul pentru fiecare coloană în parte.

În continuare am descris structura pentru un caz similar celui descris mai sus:

<table>

<tr>

<td>numar apartament</td>

<td>proprietari</td>

<td>suma totala restanta</td>

<td>consum lunar</td>

</tr>

<tr>

<td>1</td>

<td>popescu</td>

<td>1234 ron</td>

<td>250 ron</td>

</tr>

<tr>

<td>2</td>

<td>gheorghe</td>

<td>-</td>

<td>124 ron</td>

</tr>

</table>

În exemplul de mai sus, am descris un tabel cu 3 rânduri, fiecare rând avand 4 coloane.

Pe prima linie din tabel am inserat un antet, pentru a înțelege ce informații afișăm în fiecare coloană.

În continuare, încercați să creați un fișier html, fișier în care să dezvoltați codul HTML de mai sus, iar apoi, folosind un browser web, deschideți acest fișier pentru a vizualiza datele.

În cazul în care doriți verificarea codului, click aici pentru a descărca fișierul. (p.s.: după descărcarea fișierului, dezarhivați conținutul)

Continuați studiul tag-ului html table, accesând următorul articol:

HTML tag „table” exemple și exerciții

1 thought on “Tag „table” în limbajul HTML

Write a Reply or Comment

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

my

*


Vă rugăm nu treceți date personale în secțiunea de comentarii.