<tfoot>

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.

Steckbrief <tfoot>

Kategorie: Tabellen
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

<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

3 Beispiele

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

index.html

Einkaufsliste mit Summe

<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>

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

index.html

Mehrzeiliger Fußbereich

<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>

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

index.html

Statistik mit Durchschnitt

<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

4 Fehler

01 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>.

02 <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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

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.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett

Tabellen sind die bevorzugte Layout-Methode in Outlook. tfoot wird korrekt gerendert.
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<tfoot>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter