HTML <th> Tag

Definition und Verwendung

<th> Tag definiert die Überschriftenzellen in der HTML-Tabelle.

HTML-Tabelle hat zwei Zellenarten:

  • Überschriftenzellen - Enthält Überschriftsinformationen (verwendet <th> Element erstellt)
  • Datenzellen - Enthält Daten (verwendet <td> Element erstellt)

Standardmäßig:<th> Der Text in den Elementen ist fett und zentriert.

Standardmäßig ist der Text in den <td>-Elementen normal und links ausgerichtet.

Weitere Informationen:

HTML-Tutorial:HTML Tabelle

HTML DOM Referenzhandbuch:TableHeader-Objekt

CSS-Tutorial:Stellen Sie das Stil des Formulars ein

Beispiel

Beispiel 1

Eine einfache HTML-Tabelle mit drei Zeilen, zwei Überschriftenzellen und vier Datenzellen:

<table>
  <tr>
    <th>Monat</th>
    <th>Spaarbetrag</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 2

Wie kann ausgerichtet werden? <th> Inhalt (verwenden Sie CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Monat</th>
    <th style="text-align:left">Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 3

Wie kann die Hintergrundfarbe zu den Zellen des Tabellenkopfs hinzugefügt werden (CSS verwenden)?

<table>
  <tr>
    <th style="background-color:#FF0000">Monat</th>
    <th style="background-color:#00FF00">Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
 </table>

Versuchen Sie es selbst

Beispiel 4

Wie kann die Höhe der Zellen des Tabellenkopfs festgelegt werden (CSS verwenden)?

<table>
  <tr>
    <th style="height:100px">Monat</th>
    <th style="height:100px">Sparbetrag</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 5

Wie man in den Überschriftzellen der Tabelle festlegt, dass Zeilen nicht umgebrochen werden (verwenden Sie CSS):

<table>
  <tr>
    <th>Monat</th>
    <th style="white-space:nowrap">Geld für das neue Auto</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 6

Wie man vertikal ausrichtet <th> Inhalt (verwenden Sie CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Monat</th>
    <th style="vertical-align:bottom">Sparbetrag</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 7

Wie man die Breite der Überschriftzellen der Tabelle einstellt (verwenden Sie CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Monat</th>
    <th style="width:30%">Sparbetrag</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 8

Wie man eine Tabellenüberschrift erstellt:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 9

Wie man eine Tabelle mit Überschriften erstellt:

<table>
  <caption>Monatliche Sparbeträge</caption>
  <tr>
    <th>Monat</th>
    <th>Spaarbetrag</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Versuchen Sie es selbst

Beispiel 10

Wie man Zellen in einer Tabelle über mehrere Zeilen oder Spalten legt:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Versuchen Sie es selbst

Eigenschaft

Eigenschaft Wert Beschreibung
abbr Text Eine abgekürzte Version des Inhalts der Überschriftszelle angeben.
colspan Zahl Die Zellen der Überschrift sollten die angegebene Anzahl von Spalten überschreiten.
headers header_id Eine oder mehrere mit der Zelle verbundenen Überschriftszellen angeben.
rowspan Zahl Die Zellen der Überschrift sollten die angegebene Anzahl von Zeilen überschreiten.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Die Kopfzelle ist eine Spaltenüberschrift, eine Zeilenüberschrift oder die Kopfzeile einer Gruppe von Spalten oder Zeilen.

Globale Attribute

<th> Der Tag unterstützt ebenfalls Globale Attribute im HTML.

Ereignisattribute

<th> Der Tag unterstützt ebenfalls Ereignisattribute im HTML.

Standardige CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <th> Element:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
{}

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung