Antete de tabel în HTML

Antete Tabel HTML

Tabelele pot avea antete pentru fiecare coloană sau rând, sau pentru mai multe coloane sau rânduri deodată. Celulele de antet se fac cu elemente <th>; fiecare <th> este o celulă de tabel.

Exemplu

Un tabel cu un rând de antet.

Un tabel al cărui prim rând conține celule de antet (th): Firstname, Lastname, Age, urmat de două rânduri de date (Jill Smith 50, Eve Jackson 94).

> Rezultat: pagină HTML completă

Prompt

Un tabel al cărui prim rând conține celule de antet (th): Firstname, Lastname, Age, urmat de două rânduri de date (Jill Smith 50, Eve Jackson 94).

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ând de Antet</title>
</head>
<body>

<table>
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârstă</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

Antete Verticale de Tabel

Pentru a folosi prima coloană ca antete, faceți prima celulă a fiecărui rând un element <th>.

Exemplu

Un tabel cu antete pe partea stângă.

Un tabel care folosește prima celulă din fiecare rând ca antet (th), astfel încât anteturile coboară pe partea stângă: rânduri Firstname (Jill, Eve), Lastname (Smith, Jackson), Age (94, 50).

> Rezultat: pagină HTML completă

Prompt

Un tabel care folosește prima celulă din fiecare rând ca antet (th), astfel încât anteturile coboară pe partea stângă: rânduri Firstname (Jill, Eve), Lastname (Smith, Jackson), Age (94, 50).

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 Verticale</title>
</head>
<body>

<table>
  <tr>
    <th>Prenume</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Nume</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Vârstă</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

</body>
</html>

Alinierea Antetelor de Tabel

Implicit, textul de antet este bold și centrat. Pentru a-l alinia la stânga, folosiți proprietatea CSS text-align pe th.

Exemplu

Antete aliniate la stânga cu CSS.

Un tabel cu celulele de antet aliniate la stânga folosind proprietatea CSS text-align setată pe left pentru th, cu anteturile Firstname/Lastname/Age și două rânduri de date.

> Rezultat: pagină HTML completă

Prompt

Un tabel cu celulele de antet aliniate la stânga folosind proprietatea CSS text-align setată pe left pentru th, cu anteturile Firstname/Lastname/Age și două rânduri de date.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Prenume</th>
    <th>Nume</th>
    <th>Vârstă</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

Antet pentru Coloane Multiple

Un antet se poate întinde pe două sau mai multe coloane. Folosiți atributul colspan pe elementul <th>. Veți învăța mai multe despre colspan și rowspan în capitolul Colspan și rowspan tabel.

Exemplu

Un antet care se întinde pe două coloane.

Un tabel cu un antet care se întinde pe două coloane folosind colspan=2 pe un th Name, plus un th Age, urmat de două rânduri de date (Jill Smith 50, Eve Jackson 94).

> Rezultat: pagină HTML completă

Prompt

Un tabel cu un antet care se întinde pe două coloane folosind colspan=2 pe un th Name, plus un th Age, urmat de două rânduri de date (Jill Smith 50, Eve Jackson 94).

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>Antet Colspan</title>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Nume</th>
    <th>Vârstă</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

Titlul Tabelului

Puteți adăuga un titlu care funcționează ca un antet pentru întregul tabel cu eticheta <caption>.

Notă: Eticheta <caption> trebuie să vină imediat după eticheta <table>.

Exemplu

Un tabel cu un titlu.

Un tabel lat de 100% cu un titlu „Monthly savings” adăugat imediat după tag-ul table, un rând de antet Month/Savings și două rânduri (January $100, February $50).

> Rezultat: pagină HTML completă

Prompt

Un tabel lat de 100% cu un titlu „Monthly savings” adăugat imediat după tag-ul table, un rând de antet Month/Savings și două rânduri (January $100, February $50).

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>Titlu Tabel</title>
</head>
<body>

<table style="width:100%">
  <caption>Economii lunare</caption>
  <tr>
    <th>Lună</th>
    <th>Economii</th>
  </tr>
  <tr>
    <td>Ianuarie</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Februarie</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>