HTML Tag <th> wird für die Erstellung der Kopfzeilenzelle der HTML-Tabelle verwendet. Es wird innerhalb des Tages <tr>, der sich seinerseits im Tag <table> befindet, platziert. Um eine Standarddatenzelle zu definieren, wird das Tag <td> verwendet.

Das Tag <th> kann Bilder, Texte, Formen, Links und andere HTML-Elemente, die im Body des Dokuments platziert werden können, enthalten. Die Größe der Tabelle wird aufgrund ihres Inhalts automatisch korrigiert.

Der Inhalt des Tages <th> wird voreingestellt durch fettige Schriftart angezeigt und zentriert. Für die Veränderung des Aussehens können die CSS-Stile verwendet werden.

Beachten Sie bitte, dass alle Zeilen der Tabelle dieselbe Anzahl von Zellen enthalten, die der Anzahl der Zellen der längsten Zeile entspricht. Wenn eine Zeile weniger Zellen enthält als andere Zeilen, wird der Browser die Zeile automatisch ausfüllen, und leere Zellen am Ende dieser Zeile platzieren.

Falls Sie betonen möchten, dass die Daten in anderen Zellen fehlen, erstellen Sie leere Zelle, wo es notwendig ist.

Die vom Browser hinzugefügten Zellen haben keine Rahmen, und wenn sie sich nacheinander befinden, werden sie in Form einer ganzen Zelle dargestellt.

Syntax

<table> 
<tr> 
<th>...</th> </tr> 
</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;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Monat</th>
        <th>Datum</th>
      </tr>
      <tr>
        <td>Juni</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Ergebnis

th beispiel

In diesem Beispiel sind unsere Kopfzeilen "Monat" und "Datum". Für jede Kopfzeile haben wir einzelnes Tag <th> verwendet. Die beiden Tags haben wir im Element <tr> platziert.

Das Attribut colspan wird im Allgemeinen mit dem Tag <th> verwendet, um den Inhalt über mehrere Spalten erstrecken zu lassen.

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;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th colspan="2">Monat und Datum</th>
      </tr>
      <tr>
        <td>Juni</td>
        <td>18.07.2014</td>
      </tr>
    </table>
  </body>
</html>

Ergebnis

th beispiel

In diesem Beispiel beträgt der Wert des Attributs colspan “2”. Das bedeutet, dass eine Kopfzelle zwei Spalten umfassen soll.

Attribute

Attribut Wert Beschreibung
abbr text Es bestimmt die abgekürzte Variante des Zelleninhalts oder dient zum alternativen Text. Im Browser wird das Attribut nicht angezeigt, aber kann es zum Beispiel fürs Lesen vom Bildschirm oder für die Arbeit mit den Skripten verwendet werden.
Es wird in HTML5 nicht unterstützt.
align left
right
center
Es bestimmt die Ausrichtung des Zelleninhalts aus.
Es wird in HTML5 nicht unterstützt.
axis category_name Es gruppiert die Zellen, die aneinander ähnliche Information enthalten.
Es wird in HTML5 nicht unterstützt.
background background Es bestimmt die Hintergrundfarbe der Zelle.
Es wird in HTML5 nicht unterstützt.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Es bestimmt dies Hintergrundfarbe der Tabellenzelle.
Es wird in HTML5 nicht unterstützt.
bordercolor bordercolor Es bestimmt die Rahmenfarbe.
Es wird in HTML5 nicht unterstützt.
char character Es richtet den Inhalt der Zelle nach dem angegebenen Symbol aus. Das Attribut char 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 im Attribut angegebenen Symbol nach rechts oder links aus. Das Attribut charoff wird nur dann verwendet, wenn das Attribut align = "char"
Es wird in HTML 5 nicht unterstützt.
colspan number Es bezeichnet die positive ganze Zahl, welches bestimmt, wie viele Kolumnen einer Zelle horizontal enthalten kann. Voreingestellt beträgt der Wert 1.
headers header_id Es bezeichnet die ID einer oder einigen Kopfzellen, die durch das HTML-Tag <th> bestimmt werden. Das Attribut wird im Browser nicht angezeigt, aber es kann fürs Lesen vom Bildschirm oder für die Arbeit mit den Skripten verwendet werden.
height %
pixels
Es bestimmt die Höhe der Zelle.
Es wird in HTML 5 nicht unterstützt.
nowrap nowrap Es verbietet den Zeilenumbruch.
Es wird in HTML 5 nicht unterstützt.
rowspan number Das Attribut bestimmt die Anzahl der Zeilen, die die Zelle erfassen soll. Der Wert des Attributes soll eine positive ganze Zahl sein. Es ist nicht empfehlenswert, der Wert größer als 65534 zu verwenden, da er bis zu dieser Zahl abgekürzt werden kann. Voreingestellt beträgt der Wert 1.
scope col
colgroup
row
rowgroup
auto
Es bestimmt die Verbindung der einfachen Tabellenzelle mit den Kopfzeilen in den Browsern. Das Attribut wird im Browser nicht angezeigt, aber es kann fürs Lesen vom Bildschirm oder für die Arbeit mit den Skripten verwendet werden.
sorted reversed
number
reversed number
number reversed
Es bestimmt die Richtung der Sortierung der Kolumne.
Es wird in HTML 5 nicht unterstützt.
valign top
middle
bottom
baseline
Es richtet den Inhalt der Zellen nach vertikal aus.
Es wird in HTML 5 nicht unterstützt.
width %
pixels
Es bestimmt die Zellenbreite.
Es wird in HTML 5 nicht unterstützt.

Das Tag <th> unterschtützt Globale Attribute und Globale Eventhandler.

Übe dein Wissen

Was bedeutet das <th> Tag in HTML?
Finden Sie das nützlich?