suchen

Heim >Web-Frontend >HTML-Tutorial >THead-Tag in HTML

THead-Tag in HTML

WBOY
WBOYOriginal
2024-09-04 16:30:211232Durchsuche

Der Element oder Tag wird zusammen mit verwendet. Tag und -Tag, das jeweils den Tabellenkopf, den Tabellenfuß und den Tabellenkörper definiert. Der Elemente definieren den Header einer HTML-Tabelle. Um eine Zeile oder einen Satz von Zeilen zu definieren, die die Spaltenköpfe einer Tabelle erstellen, verwenden wir den Befehl Element. Mit anderen Worten: Dieses Element gruppiert den Header-Inhalt in einer HTML-Tabelle. Es umschließt eine oder mehrere ganze Zeilen und klassifiziert sie als Tabellenkopf. In diesem Thema lernen wir das THead-Tag in HTML kennen.

Ein Tabellenkopf besteht aus einer oder mehreren Zeilen, die Informationen zu den Spalten oder Tabellenkörperdaten enthalten.

So verwenden Sie Element in HTML?

Der Das Element gibt den Header-Teil der HTML-Tabelle an. Dieses sichert somit eine Position als unmittelbares untergeordnetes Element eines Tabellenelements

. Vor der Verwendung von , oder Element. Der Das Element kann nach jedem -Element stehen. Element, falls vorhanden, und Das Element enthält mindestens eine Datenzeile, die in eingeschlossen ist. Element.

Syntax

<thead>
<tr>
</tr>
</thead>

Natürlich, wie oben gezeigt, ist

genau wie jedes andere HTML-Element; Element funktioniert auch paarweise, öffnendes Tag, hat einen Partner, ein schließendes Tag, .

Beispiele für THead-Tags in HTML

Betrachten Sie das folgende Beispiel:

Beispiel #1

Code:

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

Ausgabe:

THead-Tag in HTML

Beachten Sie, dass, wenn zwei Zeilen für die Kopfzeile Ihrer Tabelle benötigt werden, beide

Elementdaten können zu einem einzelnen hinzugefügt werden. Element. Versuchen Sie, nicht zwei Elementabschnitte für eine Tabelle. Sehen Sie sich unten ein solches Beispiel an, mit zwei Zeilen unter dem Kopfabschnitt:

Beispiel #2

Code:

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Ausgabe:

THead-Tag in HTML

Beispiel #3

Code:

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Ausgabe:

THead-Tag in HTML

Beachten Sie, dass beide oben genannten Codes zwar dieselbe Ausgabe erzeugen und separate

Elemente für zwei Header werden von einigen Browsern verarbeitet. Es handelt sich jedoch immer noch um einen semantischen Fehler, der bei der ordnungsgemäßen Programmierung nicht verwendet werden sollte und außerdem von HTML-Validierungsdiensten als Warnsignal angezeigt wird.

Beispiel #4

Sehen wir uns unten ein weiteres Beispiel an. Im folgenden Beispiel haben wir eine Tabelle mit einem Tabellenkörper erstellt, der aus vier Datenzeilen besteht. Ein Header besteht aus einer Zeile mit Datensätzen, die mithilfe von CSS auf eine Hintergrundfarbe festgelegt werden. Der

, oder haben keinen Einfluss auf das Standard-Erscheinungsbild einer HTML-Tabelle; daher würde ein wenig Hilfe mit CSS ausreichen.

Code:

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

Ausgabe: 

THead-Tag in HTML

Attribute des THead-Tags in HTML

Der

Das HTML-Element unterstützt einige der folgenden zusätzlichen Attribute.

  • align: Dieses Attribut richtet den Inhalt eines
Element und alles darin. Als Wert werden „Left“, „Right“, „Center“, „Justify“ und „Char“ verwendet.
  • char: Dieses Attribut gibt die Ausrichtung an
    • an. Elementinhalt, wenn das align-Attribut auf char. gesetzt ist
  • valign: Gibt die vertikale Ausrichtung des Inhalts innerhalb des
    • an. Element. Als Werte werden „oben“, „mitte“, „unten“ oder „Grundlinie“ verwendet.
  • charoff: Dieses Attribut gibt einen Offset gegenüber dem erstensten Zeichen an, wie mit einem char-Attribut angegeben; das heißt, when to align ist auf char.
    • eingestellt
  • bgcolor:Es hilft dabei, die Hintergrundfarbe jeder Zelle innerhalb von
    • festzulegen. Element.

    Fazit

    Wir haben gesehen, wie ein

    Das Element identifiziert Spaltenbeschriftungen und keine Tabellendaten, speichert die Informationen über die Kopfzeilen und leitet sie an die Browser weiter, um die Technologie beim Inhalt und seiner Bedeutung zu unterstützen.

    Das obige ist der detaillierte Inhalt vonTHead-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    css html define if for try Error char using Attribute default this position background column table tbody td tr everything
    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：HTML-Zeit-TagNächster Artikel：HTML-Zeit-Tag

    In Verbindung stehende Artikel

    Mehr sehen
    Elemente verwenden Sie die Funktion
    Element. Der