HTML `<thead>`-Tag

Das <thead>-Tag definiert den Kopf einer HTML-Tabelle. Das Tag wird zusammen mit den Tags <tbody> und <tfoot> verwendet, die den Körper bzw. die Fußzeile der Tabelle angeben.

Das <thead>-Tag muss als untergeordnetes Element des <table>-Elements verwendet werden, nach den Elementen <caption> und <colgroup> sowie vor den Elementen <tfoot>, <tbody> und <tr>. (Innerhalb von <table> kann nur ein <thead>-Tag verwendet werden.)

Beachten Sie, dass das <tfoot>-Tag vor <tbody> platziert werden muss, damit der Browser die Tabellenfußzeile korrekt rendern kann.

DANGER

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

TIP

Die Elemente <thead>, <tbody> und <tfoot> haben standardmäßig keinen Einfluss auf das Tabellenlayout. Verwenden Sie CSS-Eigenschaften, um das Aussehen der Tabelle anzupassen.

Syntax

Das <thead>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<thead>) und dem schließenden (</thead>) Tag geschrieben.

HTML <thead>-Tag

html

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

Beispiel für das HTML `<thead>`-Tag:

HTML <thead>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Ergebnis

thead-Beispiel

Attribute

Attribut	Werte	Beschreibung
align	right left center justify char	Legt die Ausrichtung des Inhalts innerhalb eines `<thead>`-Elements fest. Wird in HTML5 nicht unterstützt
bgcolor	bgcolor	Legt die Hintergrundfarbe der Zeilen innerhalb eines `<thead>`-Elements fest. Wird in HTML5 nicht unterstützt
char	character	Legt die Ausrichtung des Inhalts innerhalb eines `<thead>`-Elements an einem bestimmten Zeichen fest. Wird nur verwendet, wenn das Attribut align="char" ist. Wird in HTML5 nicht unterstützt.
charoff	number	Legt die Anzahl der Zeichen fest, um die der Inhalt innerhalb des `<thead>`-Elements vom durch das char-Attribut angegebenen Zeichen ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. Wird in HTML5 nicht unterstützt.
valign	top bottom middle baseline	Legt eine vertikale Ausrichtung des Inhalts innerhalb eines `<thead>`-Elements fest. Wird in HTML5 nicht unterstützt.

Das <thead>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <thead>-Tag

css

thead {
  background-color: #f2f2f2;
  font-weight: bold;
}

Praxis

Welche Funktion hat das HTML `<thead>`-Tag?

Es wird verwendet, um die Fußzeileninhalte in einer HTML-Tabelle zu gruppieren.Es wird verwendet, um die Kopfzeileninhalte in einer HTML-Tabelle zu gruppieren.Es wird verwendet, um eine Zeile in einer HTML-Tabelle zu definieren.Es wird verwendet, um die Körperinhalte in einer HTML-Tabelle zu gruppieren.Es trägt zur Verbesserung der Barrierefreiheit bei, indem es Informationen über die Struktur der Tabellendaten bereitstellt.

HTML <thead>-Tag ​

Syntax ​

Beispiel für das HTML <thead>-Tag: ​

Ergebnis ​