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
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
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
