HTML thead: Kopfteil der Tabelle

Zusätzliche Formatierungsmöglichkeiten

Im Prinzip kann man diverse Überschriften in Tabellen mit normalen Tabellenzellen, also mit dem td-Tag erledigen. Das Problem dabei ist aber, dass unterschiedlich gewünschte Formatierungen, beispielsweise über CSS, nur möglich sind, wenn man diverse verschiedene Klassen anlegt.

Es gibt aber eine elegantere Lösung, indem man eine Tabelle mit einem Kopfteil ausstattet. Dies erledigt der thead-Tag, der mit th-Einträgen gefüllt wird. Das Prinzip ist vergleichbar mit den normalen td-Zellen, aber durch das h wird bekundet, dass die Zellen im Kopfteil angesprochen werden sollen.

thead-Tag für den Kopf der Tabelle

<table> <thead> <tr> <th>Stadt Nummer 1</th> <th>Stadt Nummer 2</th> <th>Stadt Nummer 3</th> </tr> </thead> <tbody> <tr> <td>Wien</td> <td>Linz</td> <td>Graz</td> </tr> </tbody> </table>

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

Ergibt:

Stadt Nummer 1	Stadt Nummer 2	Stadt Nummer 3
Wien	Linz	Graz

Das Beispiel zeigt wieder die Tabelle mit einer Zeile und drei Spalten, aber diese Tabelle erhält zu Beginn einen Kopfteil, englisch Header. Da wir uns in einer Tabelle bewegen, ist der Tag als thead festgelegt worden. Dieser Kopfteil darf nur einmal pro Tabelle verwendet werden und er muss vor einem möglichen Fußteil und vor der eigentlichen Tabelle zu finden sein.

Im aktuellen Beispiel gibt es keinen Fußteil und mit den drei th-Definitionen wird die Überschrift festgelegt. Ein Blick auf das Ergebnis zeigt, dass die Überschrift als solches durch fette Schrift erkennbar ist. Man hat durch die Tags thead und th nun die Möglichkeit, per CSS diesen Bereich anders zu formatieren, ohne extra Klassen anlegen zu müssen. Eine Unterscheidung zu den normalen Zellen der Tabelle ist hergestellt.

Das Ziel ist das sofortige Erkennen des Sinns jeder Spalte und so weiß man sofort, worum es geht und welche Spalten oder genauer welche Informationen angeboten werden. Man muss sich also nicht erst überlegen, welche Information geboten werden soll, sondern erhält die Auskunft durch die vorgegebene Struktur.

Lesen Sie auch

---

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

---

So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

• Tabelle (table)
• Zeile (TR)
• Table Data (TD)

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

• Thead
• Tfoot
• Colgroup

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

• Zeilen verbinden
• Zellen verbinden

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: HTML thead: Kopfteil der Tabelle
Beschreibung: Mit dem 🌍 thead-Tag kann man in einer Datentabelle der Webseite einen ✅ Kopfteil mit entsprechender Formatierung einbauen.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel