<tfoot>: Das Tabellenfuß-Element

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zu Referenzzwecken beim Aktualisieren von bestehendem Code und aus historischem Interesse dokumentiert.

align Veraltet

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

bgcolor Veraltet

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

char Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts auf ein Zeichen jeder Fußzelle anzugeben. Typische Werte hierfür enthalten einen Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Fußzelle vom im char-Attribut angegebenen Ausrichtungszeichen versetzt sein soll.

valign Veraltet

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

• Das <tfoot> wird nach allen <caption>, <colgroup>, <thead>, <tbody> und <tr>-Elementen platziert.
• Zusammen mit seinen verwandten <thead> und <tbody>-Elementen liefert das <tfoot>-Element nützliche semantische Informationen und kann sowohl bei der Anzeige am Bildschirm als auch beim Druck verwendet werden. Die Angabe solcher Tabellen-Content-Gruppen bietet auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenfuß in der Regel Informationen an, die als Zwischenzusammenfassung auf jeder Seite ausgegeben werden, im Falle einer mehrseitigen Tabelle.

Sehen Sie sich <table> für ein vollständiges Tabellenbeispiel an, das gängige Standards und Best Practices einführt.

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 grundlegende Tabelle in semantische Abschnitte zu gliedern. Das <tfoot>-Element stellt den Fußbereich der Tabelle dar, 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 erstrecken. Die einzelne Datenzelle (<td>) im Fuß wird automatisch an der richtigen Stelle, d.h. in der vierten Spalte, platziert, wobei der ausgelassene colspan-Attributwert standardmäßig auf 1 gesetzt ist. Zusätzlich wird das scope-Attribut auf row auf der Kopfzelle (<th>) im Fuß gesetzt, um explizit zu definieren, dass sich diese Fußkopfzelle auf die Tabellenzellen innerhalb derselben Zeile bezieht, die in unserem Beispiel die eine Datenzelle in der Fußzeile 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-Eigenschaften werden verwendet, um den Tabellenfuß zu stylen und hervorzuheben, so dass sich die Fußzellen 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

• Lernen: HTML-Tabellengrundlagen
• <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 den Inhalt jeder Fußzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Fußzelle vertikal auszurichten