Tabele HTML
Tabelele HTML vă permit să aranjați date în rânduri și coloane.
Exemplu
Un tabel cu companii, contacte și țări.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducere Tabele</title>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>Marea Britanie</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italia</td>
</tr>
</table>
</body>
</html>
Definirea Unui Tabel HTML
Un tabel este format din celule de tabel aranjate în rânduri și coloane, toate în interiorul unui element <table>.
Exemplu
Un tabel simplu cu un rând de antet și două rânduri de date.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabel Simplu</title>
</head>
<body>
<table>
<tr>
<th>Companie</th>
<th>Contact</th>
<th>Țară</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germania</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexic</td>
</tr>
</table>
</body>
</html>
Celule de Tabel
Fiecare celulă de tabel este definită de o etichetă <td> și o etichetă </td>. „td” provine de la „table data” (date de tabel), iar tot ce este între etichete reprezintă conținutul celulei.
Notă: O celulă poate conține orice fel de HTML: text, imagini, liste, linkuri, chiar și alte tabele.
Exemplu
Un rând cu trei celule de date.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celule Tabel</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
</body>
</html>
Rânduri de Tabel
Fiecare rând de tabel începe cu o etichetă <tr> și se termină cu </tr>. „tr” provine de la „table row” (rând de tabel). Puteți avea oricâte rânduri doriți; păstrați doar același număr de celule în fiecare rând.
Notă: Uneori un rând poate avea mai puține sau mai multe celule decât altul; veți învăța despre asta într-un capitol ulterior.
Exemplu
Un tabel cu două rânduri.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rânduri Tabel</title>
</head>
<body>
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Antete de Tabel
Când doriți ca o celulă să fie un antet, folosiți eticheta <th> în loc de <td>. „th” provine de la „table header” (antet de tabel). Implicit, textul de antet este bold și centrat, dar puteți schimba asta cu CSS.
Exemplu
Un tabel al cărui prim rând este format din celule de antet.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anteturi Tabel</title>
</head>
<body>
<table>
<tr>
<th>Persoana 1</th>
<th>Persoana 2</th>
<th>Persoana 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Etichetele Tabelului HTML
Etichetele legate de tabel sunt: <table> (un tabel), <th> (o celulă de antet), <tr> (un rând), <td> (o celulă), <caption> (un titlu de tabel), <colgroup> (un grup de coloane pentru formatare), <col> (proprietăți de coloană în cadrul unui colgroup), <thead> (grupează conținutul de antet), <tbody> (grupează conținutul corpului) și <tfoot> (grupează conținutul de subsol).