<tfoot>: Das Tabellenfuß-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier aus Gründen der Referenzierung beim Aktualisieren vorhandenen Codes und des historischen Interesses 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 char-Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und am Offset, das durch das charoff-Attribut festgelegt ist. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, 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, der mit einem # beginnt, 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 Veraltet

Tut nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Fußzelle anzugeben. 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 Veraltet

Tut nichts. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Fußzelle vom Ausrichtungszeichen versetzt werden sollte, das durch das char-Attribut festgelegt ist.

valign Veraltet

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

• Das <tfoot> steht nach allen <caption>, <colgroup>, <thead>, <tbody> und <tr> Elementen.
• Zusammen mit den verwandten <thead> und <tbody> Elementen liefert das <tfoot>-Element nützliche semantische Informationen und kann beim Rendern für Bildschirm oder Druck verwendet werden. Die Spezifizierung solcher Tabelleninhaltsgruppen liefert auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesegeräten und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenfuß im Falle einer mehrseitigen Tabelle normalerweise Informationen aus, die auf jeder Seite als Zwischensumme dargestellt werden.

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

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfteil mit Spaltenüberschriften, einen Hauptteil mit den Hauptdaten der Tabelle und einen Fußteil 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ß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 Kopfzeilenzelle über die ersten drei Tabellenspalten zu spannen. Die einzige Datenzelle (<td>) im Fuß wird automatisch in die richtige Position gesetzt, d.h. in die vierte Spalte, wobei der ausgelassene colspan-Attributwert standardmäßig auf 1 gesetzt ist. Zusätzlich wird das scope-Attribut in der Fußkopfzelle (<th>) auf row gesetzt, um explizit zu definieren, dass diese Fußkopfzelle in unserer Beispielzeile in Beziehung steht zu den Tabellendatenzellen in derselben Zeile, die die berechnete Durchschnittswerte enthalten.

<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-Anweisungen werden verwendet, um das Tabellenfußelement zu formatieren und hervorzuheben, sodass sich die Fußzellen 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: 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 Steuerung der Ränder von Fußzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung jedes Fußzelleninhalts
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung jedes Fußzelleninhalts