Crearea de tabele în HTML este o modalitate eficientă de a organiza și afișa datele într-un format structurat și ușor de înțeles. Indiferent dacă doriți să prezentați informații statistice, să creați o listă de produse sau să afișați rezultatele unui sondaj, tabelele HTML vă permit să aranjați datele în rânduri și coloane.
Elemente cheie:
- HTML Tables (Tabele HTML)
- Creating Tables (Crearea de Tabele)
Noțiuni:
În această lecție, vom explora utilizarea elementelor HTML pentru crearea și structurarea tabelelor. Tabelele sunt instrumente utile pentru afișarea datelor într-un mod organizat și ușor de înțeles.
Crearea de Tabele în HTML:
<table> (Tabel):
- Definiție: Definește începutul și sfârșitul unei tabele.
- Exemplu:
<table>
<!-- Conținutul tabelului va fi adăugat aici -->
</table>
<tr> (Rând):
- Definiție: Definește un rând în cadrul tabelului.
- Exemplu:
<tr>
<!-- Celulele rândului vor fi adăugate aici -->
</tr>
<th> (Căsuță antet):
- Definiție: Definește o căsuță de antet într-un rând sau coloană.
- Exemplu:
<th>Nume</th>
<td> (Căsuță de date):
- Definiție: Definește o căsuță de date (celulă) într-un rând.
- Exemplu:
<td>John Doe</td>
De exemplu, următorul cod creează o tabelă simplă cu trei rânduri și trei coloane:
<table>
<tr>
<td>Celulă 1</td>
<td>Celulă 2</td>
<td>Celulă 3</td>
</tr>
<tr>
<td>Celulă 4</td>
<td>Celulă 5</td>
<td>Celulă 6</td>
</tr>
<tr>
<td>Celulă 7</td>
<td>Celulă 8</td>
<td>Celulă 9</td>
</tr>
</table>| Celulă 1 | Celulă 2 | Celulă 3 |
| Celulă 4 | Celulă 5 | Celulă 6 |
| Celulă 7 | Celulă 8 | Celulă 9 |
Stilizarea tabelelor
HTML oferă o serie de atribute pentru a stiliza și formata tabelele. Iată câteva exemple comune:
border: specifică grosimea liniei de bordură a tabelului;bgcolor: specifică culoarea de fundal a tabelului;align: aliniază tabelul la stânga, dreapta sau în centru;cellpadding: specifică spațiul dintre conținutul celulelor și bordura acestora;cellspacing: specifică spațiul dintre celulele tabelului;width: specifică lățimea tabelului.
De exemplu, pentru a adăuga o bordură de 2 pixel și un spațiu de 10 pixeli între celule, puteți utiliza următorul cod:
<table border="2" cellpadding="10" cellspacing="10">
<tr>
<td>Celulă 1</td>
<td>Celulă 2</td>
<td>Celulă 3</td>
</tr>
<tr>
<td>Celulă 4</td>
<td>Celulă 5</td>
<td>Celulă 6</td>
</tr>
<tr>
<td>Celulă 7</td>
<td>Celulă 8</td>
<td>Celulă 9</td>
</tr>
</table>| Celulă 1 | Celulă 2 | Celulă 3 |
| Celulă 4 | Celulă 5 | Celulă 6 |
| Celulă 7 | Celulă 8 | Celulă 9 |
Combinarea celulelor
Uneori, poate fi necesar să combinați mai multe celule într-una singură pentru a crea un format special sau pentru a afișa informații agregate. HTML oferă atributele colspan și rowspan pentru a realiza acest lucru.
De exemplu, următorul cod combină două celule într-una singură în primul rând:
<table>
<tr>
<td colspan="2">Celulă combinată</td>
<td>Celulă 3</td>
</tr>
<tr>
<td>Celulă 4</td>
<td>Celulă 5</td>
<td>Celulă 6</td>
</tr>
<tr>
<td>Celulă 7</td>
<td>Celulă 8</td>
<td>Celulă 9</td>
</tr>
</table>| Celulă combinată | Celulă 3 | |
| Celulă 4 | Celulă 5 | Celulă 6 |
| Celulă 7 | Celulă 8 | Celulă 9 |
Acest cod va combina primele două celule din primul rând într-una singură, lăsând un spațiu gol în locul celei de-a doua celule.
Crearea de tabele în HTML este un instrument util pentru organizarea și afișarea datelor într-un format structurat. Prin utilizarea elementelor de bază precum <table>, <tr> și <td>, puteți crea tabele personalizate și le puteți stiliza în funcție de nevoile dumneavoastră. De asemenea, puteți combina celulele pentru a crea formate speciale sau pentru a afișa informații agregate. În final, tabelele HTML vă oferă flexibilitatea de a organiza și prezentă informațiile într-un mod clar și concis.