<tfoot>: Das Tabellenfuß-Element

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um bei der Aktualisierung vorhandenen Codes als Referenz zu dienen und aus historischem Interesse.

align Veraltet

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

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Fußzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliges hexadezimales RGB-Code, mit einem #-Präfix, oder ein Farbbegriff. 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 an einem Zeichen jeder Fußzelle festzulegen. Typische Werte dafür sind ein 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 den Inhalts der Fußzelle von dem durch das char-Attribut spezifizierten Ausrichtungszeichen zu versetzen.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Fußzelle an. Die möglichen aufgelisteten 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 den verwandten <thead> und <tbody>-Elementen bietet das <tfoot>-Element nützliche semantische Informationen und kann beim Rendern für sowohl Bildschirm als auch Druck verwendet werden. Das Angeben solcher Tabelleninhaltgruppen liefert auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments in einem mehrseitigen Tabellenfall spezifiziert der Tabellenfuß normalerweise Informationen, die als Zwischensumme auf jeder Seite ausgegeben werden.

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

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

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 auf dem <th>-Element verwendet, um die Zeilen-Header-Zelle über die ersten drei Tabellenspalten zu spannen. Die einzelne Datenzelle (<td>) im Fuß wird automatisch an der richtigen Stelle, d.h. in der vierten Spalte, platziert, wobei der weggelassene colspan-Attributwert standardmäßig auf 1 steht. Zusätzlich wird das scope-Attribut auf row an der Header-Zelle (<th>) im Fuß gesetzt, um explizit zu definieren, dass diese Fuß-Header-Zelle mit den Tabellenzellen in derselben Zeile zusammenhängt, was 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 wird verwendet, um den Tabellenfuß zu stylen und hervorzuheben, damit die Fußzellen sich von den Daten im Tabellenkörper abheben.

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

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

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

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-Tabelle Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Fußzelle festzulegen
• border: CSS-Eigenschaft, um 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