Wie ist die Struktur einer Tabelle in HTML?

Die Struktur einer Tabelle in HTML wird durch mehrere Elemente definiert:

• <table>: Der Container der Tabelle.
• <caption>: Optionaler Titel der Tabelle.
• <colgroup> und <col>: Optionale Elemente zur Gruppierung von Spalten und Anwendung von Stilen.
• <thead>: Abschnitt der Spaltenüberschriften.
• <tbody>: Abschnitt des Hauptinhalts der Tabelle.
• <tfoot>: Abschnitt der Fußzeile der Tabelle.
• <tr>: Tabellenzeile.
• <th>: Kopfzelle in einer Zeile.
• <td>: Datenzelle in einer Zeile.

Die Elemente <thead>, <tbody> und <tfoot> helfen, Zeilen nach Bedeutung zu gruppieren und können von Browsern zur Optimierung der Anzeige großer Tabellen verwendet werden. Innerhalb dieser Abschnitte befinden sich <tr>-Elemente. Innerhalb von <tr> befinden sich <th> (in <thead>, manchmal in <tbody> oder <tfoot>) oder <td> (in <tbody> und <tfoot>, manchmal in <thead>).

Beispiel für eine Grundstruktur:

<table>
  <caption>
    Produktliste
  </caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Produkt 1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Produkt 2</td>
      <td>150</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Summe: 250</td>
    </tr>
  </tfoot>
</table>