Das tfoot-Tag

Das Tag tfoot definiert den Fußbereich einer Tabelle. Es wird verwendet, um Zeilen so zu gruppieren, dass CSS-Stile sofort auf eine bestimmte Gruppe angewendet werden können. Eine Tabelle kann nur ein einziges tfoot-Tag enthalten.

Das Tag tfoot wird oft zusammen mit thead und tbody verwendet, um den Kopfbereich, den Hauptbereich und den Fußbereich einer HTML-Tabelle zu definieren. Standardmäßig platziert der Browser den Inhalt von tfoot am unteren Ende der Tabelle und thead - am oberen Ende.

Beispiel

Lassen Sie uns für die Gruppe von Zeilen, die durch das Tag tfoot gruppiert sind, die Textfarbe Rot mit der Eigenschaft color festlegen:

html<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Nachname</th>
      <th>Gehalt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name1</td>
      <td>Nachname1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>Name2</td>
      <td>Nachname2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Anzahl: 2</td>
      <td>-</td>
      <td>Gesamt: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Beispiel

Und hier lassen Sie uns betrachten, thead befindet sich nicht oben und tfoot nicht unten, dennoch platziert der Browser sie an ihren richtigen Stellen:

html<table>
  <tfoot>
    <tr>
      <td>Anzahl: 2</td>
      <td>-</td>
      <td>Gesamt: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Name1</td>
      <td>Nachname1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>Name2</td>
      <td>Nachname2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Name</th>
      <th>Nachname</th>
      <th>Gehalt</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Siehe auch