📊 Tabellen in HTML

🔹 Grundaufbau einer Tabelle

Zweck: Darstellung von Daten in Zeilen und Spalten.

<table>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Datenfeld 1</td>
    <td>Datenfeld 2</td>
  </tr>
</table>

Beispielausgabe:

Elemente:

• <table> – umschließt die gesamte Tabelle
• <tr> – definiert eine Tabellenzeile (Table Row)
• <th> – Tabellenkopf (Table Header, fett & zentriert)
• <td> – Tabellenzelle (Table Data)

<caption> – Tabellenüberschrift

Zweck: Beschriftet die Tabelle oben (ähnlich wie ein Titel).

<table>
  <caption>Umsätze 2026</caption>
  <tr><th>Monat</th><th>Umsatz</th></tr>
  <tr><td>Januar</td><td>10.000 €</td></tr>
</table>

Beispielausgabe:

📐 Zellen verbinden mit colspan & rowspan

Zweck: Mehrere Zellen horizontal (colspan) oder vertikal (rowspan) zusammenfassen.

<table border="1">
  <tr>
    <th colspan="2">Kopfzeile über 2 Spalten</th>
  </tr>
  <tr>
    <td rowspan="2">Linke Zelle über 2 Zeilen</td>
    <td>Rechts oben</td>
  </tr>
  <tr>
    <td>Rechts unten</td>
  </tr>
</table>

Beispielausgabe:

🧩 Strukturierung mit <thead>, <tbody>, <tfoot>

Zweck: Trennt Kopf-, Körper- und Fußbereich für bessere Lesbarkeit & Styling.

<table>
  <thead>
    <tr><th>Produkt</th><th>Preis</th></tr>
  </thead>
  <tbody>
    <tr><td>Kaffee</td><td>3 €</td></tr>
    <tr><td>Tee</td><td>2 €</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Gesamt</td><td>5 €</td></tr>
  </tfoot>
</table>

Beispielausgabe:

🎨 Tabellen mit CSS gestalten

Zweck: Für sauberes Layout und lesbare Daten.

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

th {
  background: #004aad;
  color: white;
}

Beispielausgabe: (Design durch CSS möglich, siehe obigen Code)