<tfoot> HTML-Tabellenfußelement

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 unten zur Referenz beim Aktualisieren vorhandenen Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Fußzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am in dem char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Offset aus. Verwenden Sie stattdessen die text-align-CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor

Definiert die Hintergrundfarbe jeder Fußzelle. Der Wert ist eine HTML-Farbe, entweder ein sechsstelliger hexadezimaler RGB-Code, prefixiert mit einem #, oder ein Farb-Schlüsselwort. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

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

charoff

Macht nichts. Es war ursprünglich vorgesehen, die Anzahl der Zeichen zu spezifizieren, um den Fußzelleninhalt vom im char-Attribut angegebenen Ausrichtungszeichen zu verschieben.

valign

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

Nutzungshinweise

• Das <tfoot> wird nach allen <caption>, <colgroup>, <thead>, <tbody> und <tr> Elementen platziert.
• Zusammen mit den zugehörigen <thead> und <tbody>-Elementen bietet das <tfoot>-Element nützliche semantische Informationen und kann beim Rendern für Bildschirm oder Druck verwendet werden. Das Spezifizieren solcher Tabelleninhaltgruppen bietet auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Screenreadern und Suchmaschinen.
• Beim Ausdrucken eines Dokuments spezifiziert der Tabellenfuß typischerweise Informationen, die bei einer mehrseitigen Tabelle als Zwischensumme auf jeder Seite ausgegeben werden.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Methoden vorstellt.

Tabelle mit Fußzeile

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

HTML

Die <thead>, <tbody> und <tfoot> Elemente werden verwendet, um eine grundlegende Tabelle in semantische Abschnitte zu strukturieren. Das <tfoot>-Element repräsentiert den Fußbereich 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 im <th>-Element verwendet, um die Kopfzeile über die ersten drei Tabellenspalten zu spannen. Die einzelne Datenzelle (<td>) im Fuß wird automatisch an der richtigen Stelle, d.h. der vierten Spalte, platziert, wobei der weggelassene colspan-Attributwert standardmäßig 1 ist. Zusätzlich wird das scope-Attribut auf row in der Kopfzeile (<th>) im Fuß gesetzt, um explizit zu definieren, dass diese Fußkopfzeile sich auf die Tabellenzellen innerhalb derselben Zeile bezieht, die in unserem Beispiel die einzige Datenzelle in der Fußzeile mit dem berechneten Durchschnitt ist.

<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 werden verwendet, um den Tabellenfuß zu stylen und hervorzuheben, sodass 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: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Fußzelle festzulegen
• border: CSS-Eigenschaft, um die Ränder der Fußzellen zu steuern
• text-align: CSS-Eigenschaft, um jeden Fußzelleninhalt horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um jeden Fußzelleninhalt vertikal auszurichten