Effektive Tabellenfußzeilen in HTML erstellen

Einführung

In HTML können Sie den Fußzeileninhalt einer Tabelle mithilfe des <tfoot>-Tags gruppieren. Die Tabellenfußzeile kann Zusammenfassungsinformationen, Erläuterungen oder Kommentare enthalten. Das <tfoot>-Tag ist eines der Kinder des <table>-Tags und wird in Verbindung mit den <thead>- und <tbody>-Tags verwendet. In diesem Lab werden Sie lernen, wie Sie in HTML Tabellenfußzeilen mit dem <tfoot>-Tag erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Erstellen einer grundlegenden Tabellenstruktur

Beginnen Sie mit der Erstellung einer grundlegenden Tabellenstruktur, die Tabellenkopf-, Tabellenkörper- und Tabellenfußzeilenabschnitte enthält.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Alter</th>
          <th>Geschlecht</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Männlich</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Weiblich</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Männlich</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Tabellenfußzeile</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Im obigen Code haben wir eine grundlegende Tabellenstruktur mit drei Spalten erstellt: Name, Alter und Geschlecht. Wir haben auch drei Zeilen mit Daten zur Tabelle hinzugefügt. Das <tfoot>-Tag enthält nur eine Zeile mit einer Zelle (<td>), die über drei Spalten geht (colspan="3").

Fügen Sie Inhalte zur Tabellenfußzeile hinzu

Sobald Sie die grundlegende Tabellenstruktur erstellt haben, können Sie Inhalte zum <tfoot>-Tag hinzufügen.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Alter</th>
          <th>Geschlecht</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Männlich</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Weiblich</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Männlich</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Durchschnittliches Alter:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

In diesem Beispiel haben wir einer Zeile zum <tfoot>-Tag hinzugefügt, die das durchschnittliche Alter der Personen in der Tabelle enthält. Die erste Zelle in der Zeile geht über zwei Spalten (colspan="2") und zeigt den Text "Durchschnittliches Alter:" an. Die zweite Zelle zeigt den tatsächlichen Durchschnittswert des Alters an.

Anwenden von CSS auf die Tabellenfußzeile

Sie können CSS-Stile auf das <tfoot>-Tag und seine Kind-Elemente anwenden, um das Aussehen der Tabellenfußzeile anzupassen.

<!doctype html>
<html>
  <head>
    <title>Table Footer using tfoot Tag</title>
    <style>
      tfoot {
        hintergrundfarbe: #ccc;
        schriftgewicht: fett;
        textausrichtung: zentriert;
      }
      tfoot td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Alter</th>
          <th>Geschlecht</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>35</td>
          <td>Männlich</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>28</td>
          <td>Weiblich</td>
        </tr>
        <tr>
          <td>David</td>
          <td>42</td>
          <td>Männlich</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Durchschnittliches Alter:</td>
          <td>35</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

In diesem Beispiel haben wir mithilfe des CSS-Selectors tfoot Hintergrundfarbe, Schriftgewicht und Textausrichtungsstile auf das <tfoot>-Tag angewendet. Wir haben auch mithilfe des Selectors tfoot td Padding auf die Zellen innerhalb des Tabellenfußzeilenabschnitts angewendet.

Zusammenfassung

Das <tfoot>-Tag wird verwendet, um den Fußzeileninhalt einer Tabelle zu gruppieren. Es wird zusammen mit den <thead>- und <tbody>-Tags verwendet, um eine vollständige Tabellenstruktur zu erstellen. Sie können Inhalte und Stile zum <tfoot>-Tag und seinen Kind-Elementen mithilfe von HTML und CSS hinzufügen.

HTML Tabellenfußzeile

Einführung

Echte Programmierer lernen durch Tun.

Erstellen einer grundlegenden Tabellenstruktur

Fügen Sie Inhalte zur Tabellenfußzeile hinzu

Lerne durch echte Programmierung.

Anwenden von CSS auf die Tabellenfußzeile

Zusammenfassung