<tfoot>

Zuletzt aktualisiert am 4. Februar 2026

Das <tfoot>-Element (Table Foot) definiert den Fußbereich einer Tabelle und enthält typischerweise Summen, Gesamtergebnisse oder Zusammenfassungen. Es ist das Gegenstück zu <thead>: während der Kopf die Spaltenüberschriften liefert, liefert der Fuß die abschließende Auswertung. Zusammen mit <thead> und <tbody> bildet <tfoot> die drei semantischen Bereiche einer vollständig strukturierten Tabelle.

Grundlagen

<tfoot> ist besonders nützlich bei Tabellen mit numerischen Daten, bei denen am Ende eine Summe oder ein Durchschnitt stehen soll. Browser können den Fußbereich beim Drucken auf jeder Seite wiederholen, ähnlich wie bei <thead>. Das ist bei langen Tabellen ein großer Vorteil.

• <tfoot> ist ein direktes Kind von <table> und steht nach <tbody>
• Pro Tabelle ist nur ein <tfoot> erlaubt
• Es enthält <tr>-Zeilen mit <td>- oder <th>-Zellen
• Historisch durfte <tfoot> im HTML-Quellcode vor <tbody> stehen, der Browser renderte es trotzdem unten. In HTML5 steht <tfoot> nach <tbody>
• Browser können <tfoot> beim Drucken auf jeder Seite am Ende wiederholen
• CSS-Selektoren wie tfoot td greifen gezielt nur auf den Fußbereich zu

Syntax

<table>
  <thead>
    <tr>
      <th scope="col">Artikel</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Domain</td>
      <td>12,00 €</td>
    </tr>
    <tr>
      <td>Hosting</td>
      <td>5,00 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Gesamt</td>
      <td>17,00 €</td>
    </tr>
  </tfoot>
</table>

Beispiele

Einkaufsliste mit Summe

Eine klassische Anwendung: Eine Bestellübersicht mit Einzelpreisen und einer Gesamtsumme im Fußbereich. Der Fußbereich ist visuell vom Datenbereich abgesetzt.

<table>
  <thead>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Menge</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tastatur</td>
      <td>1</td>
      <td>89,00 €</td>
    </tr>
    <tr>
      <td>Maus</td>
      <td>1</td>
      <td>49,00 €</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>2</td>
      <td>598,00 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Gesamtsumme</td>
      <td>736,00 €</td>
    </tr>
  </tfoot>
</table>

Mehrzeiliger Fußbereich

Der Fußbereich kann mehrere Zeilen enthalten, etwa für Zwischensumme, Mehrwertsteuer und Gesamtbetrag. Jede Zeile im <tfoot> ist eine eigene <tr>.

<table>
  <thead>
    <tr>
      <th scope="col">Leistung</th>
      <th scope="col">Betrag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Website-Entwicklung</td>
      <td>3.500,00 €</td>
    </tr>
    <tr>
      <td>SEO-Optimierung</td>
      <td>800,00 €</td>
    </tr>
    <tr>
      <td>Hosting (1 Jahr)</td>
      <td>120,00 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Nettobetrag</td>
      <td>4.420,00 €</td>
    </tr>
    <tr>
      <td>MwSt. (19%)</td>
      <td>839,80 €</td>
    </tr>
    <tr>
      <td>Gesamtbetrag</td>
      <td>5.259,80 €</td>
    </tr>
  </tfoot>
</table>

Statistik-Tabelle mit Durchschnitt

Der Fußbereich eignet sich nicht nur für Summen: auch Durchschnittswerte, Mediane oder andere statistische Zusammenfassungen passen gut hierhin.

<table>
  <thead>
    <tr>
      <th scope="col">Monat</th>
      <th scope="col">Besucher</th>
      <th scope="col">Seitenaufrufe</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>1.200</td>
      <td>3.400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>1.500</td>
      <td>4.100</td>
    </tr>
    <tr>
      <td>März</td>
      <td>1.800</td>
      <td>5.200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Gesamt</td>
      <td>4.500</td>
      <td>12.700</td>
    </tr>
    <tr>
      <td>Durchschnitt</td>
      <td>1.500</td>
      <td>4.233</td>
    </tr>
  </tfoot>
</table>

Barrierefreiheit

Screenreader nutzen <tfoot>, um den Fußbereich einer Tabelle als solchen zu identifizieren. Nutzer können gezielt zum Fuß springen, um Summen oder Zusammenfassungen zu lesen, ohne alle Datenzeilen durchgehen zu müssen. Das spart bei großen Tabellen erheblich Zeit.

Tipp: Wenn du im <tfoot> ein Label wie “Gesamt” verwendest, kannst du statt <td> auch <th scope="row"> verwenden. Dann ordnet der Screenreader die nachfolgenden Zellen dieser Überschrift zu, das macht die Zusammenfassung für blinde Nutzer noch verständlicher.

Häufige Fehler

Mehrere <tfoot> pro Tabelle: Eine Tabelle darf nur ein <tfoot>-Element enthalten. Wenn du mehrere Zusammenfassungszeilen brauchst, packe sie als mehrere <tr> in dasselbe <tfoot>.

<tfoot> innerhalb von <tbody>: Die drei Bereiche <thead>, <tbody> und <tfoot> sind Geschwister-Elemente auf derselben Ebene innerhalb von <table>. Ein <tfoot> innerhalb von <tbody> ist ungültiges HTML.

Summen ohne <tfoot>: Wenn du eine Summenzeile einfach als letzte <tr> in den <tbody> packst, fehlt die semantische Information. Screenreader können die Zeile dann nicht als Zusammenfassung erkennen, und die Druckwiederholung funktioniert nicht.

Historische Platzierung vor <tbody>: In älteren HTML-Versionen durfte <tfoot> vor <tbody> stehen (damit der Browser den Fuß schon kennt, bevor alle Daten geladen sind). In HTML5 steht <tfoot> nach <tbody>. Beide Varianten funktionieren in Browsern, aber die HTML5-Reihenfolge ist die empfohlene.

Browser-Kompatibilität

Das tfoot-Element wird von allen modernen und älteren Browsern vollständig unterstützt. Auch die Druckwiederholung des Fußbereichs funktioniert in den meisten Browsern.

Email-Kompatibilität

Tabellen sind das Rückgrat von HTML-E-Mails, und tfoot wird von allen großen Email-Clients unterstützt. Es eignet sich gut für Summenzeilen in Bestellbestätigungen oder Rechnungen.

Verwandte Elemente