<tfoot>: Das Tabellenelement für den Fuß

Probieren Sie es aus

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert für Referenzen beim Aktualisieren bestehenden Codes und aus historischem Interesse.

align Veraltet

Spezifiziert die horizontale Ausrichtung jeder Fußzelle. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den textuellen Inhalt an dem Zeichen aus, das im char-Attribut definiert ist, und an dem Offset, das durch das charoff-Attribut definiert ist. Verwenden Sie stattdessen die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Fußzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, dem ein # vorangestellt ist, oder ein Farbschlüsselwort. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Fußzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um den Inhalt der Fußzelle von dem Ausrichtungszeichen zu versetzen, das durch das char-Attribut spezifiziert ist.

valign Veraltet

Spezifiziert die vertikale Ausrichtung jeder Fußzelle. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen die CSS-Eigenschaft vertical-align, da dieses Attribut veraltet ist.

Verwendungshinweise

• Das <tfoot> wird nach allen <caption>, <colgroup>, <thead>, <tbody> und <tr>-Elementen platziert.
• Zusammen mit den verwandten <thead>- und <tbody>-Elementen bietet das <tfoot>-Element nützliche semantische Informationen und kann sowohl beim Rendern für den Bildschirm als auch für den Druck verwendet werden. Die Spezifikation solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments gibt die Tabellenfuß in einer mehrseitigen Tabelle üblicherweise Informationen an, die als Zwischenzusammenfassung auf jeder Seite ausgegeben werden.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und Best Practices einführt.

Tabelle mit Fußzeile

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften, einen Hauptdatenbereich und einen Fußbereich unterteilt ist, der die Daten einer Spalte zusammenfasst.

HTML

Die <thead>, <tbody> und <tfoot>-Elemente werden verwendet, um eine Basistabelle in semantische Abschnitte zu strukturieren. Das <tfoot>-Element repräsentiert den Fußabschnitt der Tabelle, der eine Zeile (<tr>) enthält, die den berechneten Durchschnitt der Werte in der "Credits"-Spalte darstellt.

Um die Zellen im Fuß den richtigen Spalten zuzuordnen, wird das colspan-Attribut auf dem <th>-Element verwendet, um die Zeilenüberschriftenzelle über die ersten drei Tabellenspalten zu spannen. Die einzelne Datenzelle (<td>) im Fuß wird automatisch an der richtigen Stelle platziert, d.h. in der vierten Spalte, wobei der weggelassene colspan-Attributwert standardmäßig auf 1 gesetzt wird. Zusätzlich wird das scope-Attribut auf row auf der Kopfzelle (<th>) im Fuß gesetzt, um explizit zu definieren, dass diese Fußkopfzelle sich auf die Tabellenzellen innerhalb derselben Zeile bezieht, die in unserem Beispiel die eine Datenzelle im Fuß ist, die den berechneten Durchschnitt enthält.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

Einige grundlegende CSS-Regeln werden verwendet, um den Tabellenfuß zu gestalten und hervorzuheben, so dass die Fußzellen sich von den Daten im Tabellenkörper abheben.

tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr > td:last-of-type {
  text-align: center;
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Fußzelle
• border: CSS-Eigenschaft zur Kontrolle der Ränder von Fußzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Fußzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Fußzelle