Frage HTML-Tabellen: thead vs th


Es sieht so aus (nach den Beispielen auf diese Seite, wenn Sie THEAD verwenden, müssen Sie TH nicht verwenden.

Ist das wahr? Wenn ja, was sind die Vor- und Nachteile von THEAD vs TH?


132
2018-03-22 17:17


Ursprung


Antworten:


Das <thead> Mit dem Tag wird der Header-Inhalt in einer HTML-Tabelle gruppiert. Das thead Element sollte in Verbindung mit dem verwendet werden tbody und tfoot Elemente.

Mehr : Thead 

Sie nutzen <thead> um eine ganze Zeile (oder Zeilen) zu kapseln, um sie als Tabellenkopf zu bezeichnen. Gemäß der Spezifikation,

"Diese Abteilung ermöglicht es User Agents   Unterstützung Scrollen von Tischkörpern   unabhängig vom Tischkopf und   Fuß. Wenn lange Tabellen gedruckt werden,   die Tabelle Kopf- und Fußinformationen   kann auf jeder Seite wiederholt werden   enthält Tabellendaten. "

<th>Auf der anderen Seite wird verwendet, um eine bestimmte Zelle als Header-Zelle zu stylen eher als eine gewöhnliche Datenzelle.


106
2018-03-22 17:22



Wenn Sie verwenden möchten <thead> und <th> Vergiss nicht zu nisten <th> Innerhalb <tr>. Andernfalls ist der Code möglicherweise nicht gültig.
Beispiel:

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>


32
2018-01-04 11:03



th ist spezifischer als das, was innerhalb von thead. EIN th Zelle soll den Header des entsprechenden angeben td Zellen. In der Tat können Sie ein hinzufügen headers Attribut zu a td Zelle, die auf die ID von a zeigt th Zelle (für Bildschirmleser). Damit th steht in direktem Zusammenhang mit der tds dieser Spalte.

Jedoch, thead kann jede Information enthalten ... allgemein schließt es ja die th Zellen, aber es kann auch alles enthalten, was Sie als Information am oberen Ende der Tabelle für angemessen halten könnten (außer einer Beschriftung, da diese auch ein eigenes Tag hat).


11
2017-09-08 13:07



<thead>

Tabellenzeilen können mithilfe von. In einen Tabellenkopf, einen Tabellenfuß und einen oder mehrere Tabellenkörperabschnitte gruppiert werden THEAD, TFOOT und TBODY Elemente jeweils. Mit dieser Unterteilung können Benutzerprogramme das Scrollen von Tischkörpern unabhängig vom Kopf und Fuß des Tisches unterstützen. Wenn lange Tabellen gedruckt werden, können die Tabellenkopf- und Fußinformationen auf jeder Seite wiederholt werden, die Tabellendaten enthält.

Der Tabellenkopf und Tabellenfuß sollten Informationen zu den Spalten der Tabelle enthalten. Der Tabellenkörper sollte Zeilen mit Tabellendaten enthalten.

Wenn vorhanden, enthält jedes THEAD, TFOOT und TBODY eine Zeilengruppe. Jede Zeilengruppe muss mindestens eine Zeile enthalten, die vom TR-Element definiert wird.

<th>

Tabellenzellen können zwei Arten von Informationen enthalten: Kopfinformationen und Daten. Diese Unterscheidung ermöglicht es Benutzeragenten, Header- und Datenzellen auch ohne Stylesheets klar darzustellen. Zum Beispiel können visuelle Benutzeragenten Header-Zellentext mit einer fetten Schrift darstellen. Sprachsynthesizer können Header-Informationen mit einer deutlichen Sprachflexion wiedergeben.

Das TH-Element definiert eine Zelle, die Kopfzeileninformationen enthält. Benutzeragenten verfügen über zwei Headerinformationen: den Inhalt des TH-Elements und den Wert des Attributs abbr. Benutzeragenten müssen entweder den Inhalt der Zelle oder den Wert des Attributs abbr darstellen. Bei visuellen Medien kann Letzteres angebracht sein, wenn nicht genügend Speicherplatz vorhanden ist, um den gesamten Inhalt der Zelle zu rendern. Bei nicht-visuellen Medien kann abbr als Abkürzung für Tabellenüberschriften verwendet werden, wenn diese zusammen mit den Inhalten der Zellen, für die sie gelten, wiedergegeben werden.

Quelle: http://www.w3.org/TR/html4/struct/tables.html


6
2018-01-04 12:42



<thead> ist insofern besonders, als damit die Kopfzeile in gedruckten Versionen oben auf der Seite wiederholt werden kann.


5
2018-03-22 17:25



Soweit ich aus Erfahrung sagen kann, gibt es keinen Unterschied im Rendering, es sei denn, Sie verwenden CSS, um einen Unterschied im Rendering anzugeben. EIN <tr> innerhalb von a <thead> macht dasselbe wie a <th> innerhalb von a <table> oder ein <tbody>.


2
2018-03-22 17:23



Hier gibt es keine harten Regeln. Das <thead> Element ist nur eine weitere Möglichkeit, Ihre Spalten und Zeilen zu gruppieren, genau wie <tbody> und <tfoot> ist. So haben Sie mehr Möglichkeiten für Skripting und Formatierung.


-1
2018-03-22 17:27