HTML-Tag <thead>

❮ Vorige Nächste ❯

Das Tag <thead> Tag definiert den Header einer HTML-Tabelle. Das Tag <thead> wird mit den Elementen <tbody> und <tfoot> für die Unterteilung des Inhalts der Tabelle unter logische Blöcke - entsprechend Kopfzeile, Körper, Fußzeile verwendet.

In einer Tabelle kann nur ein Tag <thead> verwendet werden. Im Code wird es gleich nach dem Tag <table> beim vorhandensein von Elementen <caption> und <colgroup> nach ihnen, aber vor den Elementen <tbody>, <tfoot> und <tr> platziert.

Bemerken Sie bitte, dass das Tag <tfoot> vor dem Tag <tbody> platziert werden muss, damit der Browser die Tabellenfußzeile korrekt darstellen kann.

Das Element <thead> muss mindestens ein Element <tr> enthalten.

Voreingestellt haben die Elemente <thead>, <tbody> und <tfoot> keinen Einfluss auf die Darstellung der Tabelle, aber die Darstellung der Tabelle kann mithilfe von CSS-Stilen verändert werden.

Syntax

<table>
 <thead>
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
   <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <thead style="background-color:#1c87c9; color:#fff;">
        <tr>
          <th>Monat</th>
          <th>Ersparnisse</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Insgesamt</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Januar</td>
          <td>500</td>
        </tr>
        <tr>
          <td>Februar</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Attribut	Wert	Beschreibung
align	right left center justify char	Es richtet den Inhalt des Elements <thead> aus. Es wird in HTML5 nicht unterstützt.
bgcolor	bgcolor	Es bestimmt die Farbe von Zellen, die im Tag <thead> platziert werden. Es wird in HTML5 nicht unterstützt.
char	character	Es richtet den Inhalt der Zelle nach dem angegebenen Symbol aus. Es wird nur dann verwendet, wenn das Attribut align = "char". Es wird in HTML5 nicht unterstützt.
charoff	number	Es richtet den Inhalt der Zelle nach dem angegebenen Symbol nach links oder nach rechts aus. Es wird nur dann verwendet, wenn das Attribut align = "char". Es wird in HTML5 nicht unterstützt.
valign	top bottom middle baseline	Es richtet den Inhalt des Elements vertikal aus. Es wird in HTML5 nicht unterstützt.