Pytanie tabele html: thead vs th


Wygląda (zgodnie z przykładami na ta strona, w każdym razie), że jeśli używasz THEAD, nie musisz używać TH.

Czy to prawda? Jeśli tak, jakie są zalety / wady THEAD vs TH?


132
2018-03-22 17:17


pochodzenie




Odpowiedzi:


The <thead> Tag służy do grupowania zawartości nagłówka w tabeli HTML. The thead element powinien być używany w połączeniu z tbody i tfoot elementy.

Jeszcze : thead 

Używasz <thead> enkapsulacji całego wiersza (lub wierszy) w celu oznaczenia ich jako nagłówka tabeli. Według specyfikacji,

"Ten podział umożliwia agentom użytkownika   wsparcie przewijania ciał stołowych   niezależnie od stołu i   stopa. Kiedy drukowane są długie tabele,   informacje o głowicy i stopie   można powtórzyć na każdej stronie, która   zawiera dane tabeli. "

<th>, z drugiej strony, służy do stylu określonej komórki jako komórki nagłówkowej zamiast zwykłej komórki danych.


106
2018-03-22 17:22



Zawsze używam ich obu.
To jedna starożytna strona internetowa, z którą łączyłeś się w "Więcej: thead". - masterxilo
zobacz także: dokument Mozilli developer.mozilla.org/en-US/docs/Web/HTML/Element/thead - Adrien Be
@masterxilo Czego się spodziewałeś? Sam HTML jest bardzo starożytny. - Dan Bechard
@Kano Czy sprzeciwiłbyś się komuś, kto łączy się z 30-letnim RFC, który wciąż jest w użyciu? Jakie znaczenie ma długość strony, o ile informacje są nadal aktualne? - jmbpiano


Jeśli chcesz użyć <thead> i <th> nie zapomnij zagnieździć się <th> wewnątrz <tr>. W przeciwnym razie kod może być nieważny.
Przykład:

<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



To nie odpowiada na pierwotne pytanie, jest raczej dodatkiem i powinno być komentarzem zamiast odpowiedzi. - Gerald Schneider
Wiem, ale mam zbyt niskie punkty reputacji, aby publikować komentarze, więc próbowałem wysłać odpowiedź. Przykro mi, moja wina, ale zasady obsługi całego stosu są czasami dla mnie dziwne. - rafr3
W rzeczywistości ta odpowiedź jest jedyną, która pokazuje użycie TH i THEAD. +1 za to! - barrypicker
Jeśli napiszesz "Zaletą jest th może być używany wewnątrz thead a także wewnątrz tbodyoba elementy są przydatne w ich własnym kontekście. ", który odpowiada na pytanie ... Gerald jest po prostu wybredny w stosunku do sposobu, w jaki napisałeś odpowiedź, ale jest to w rzeczywistości jedyna odpowiedź, która stanowi znaczący przykład. - CPHPython
Nawet o tym nie wiedziałem th dostaje pogrubienieed domyślnie, bez dodatkowego CSS, dzięki za to! - CPHPython


th jest bardziej szczegółowy niż to, co może znajdować się wewnątrz thead. ZA th komórka to określenie nagłówka odpowiedniego td komórki. W rzeczywistości możesz dodać headers atrybut do td komórka wskazująca na identyfikator a th komórka (dla czytników ekranu). Więc th jest bezpośrednio związany z tds tej kolumny.

Jednak, thead może zawierać dowolne informacje ... powszechnie tak, obejmuje to th komórki, ale może również zawierać wszystko, co możesz uznać za odpowiednie jako informacje na górze tabeli (inne niż podpis, ponieważ ma to również swój własny znacznik).


11
2017-09-08 13:07





<thead>

Wiersze tabeli można pogrupować w nagłówek tabeli, stopę tabeli i jedną lub więcej sekcji korpusów tabeli, używając znaku THEAD, TFOOT i TBODY elementy, odpowiednio. Ten podział umożliwia agentom użytkownika obsługiwanie przewijania brył stołu niezależnie od stołu i stopy stołu. Podczas drukowania długich tabel informacje o głowicy i stopce mogą być powtarzane na każdej stronie zawierającej dane tabeli.

Głowa stołu i stopa stołu powinny zawierać informacje o kolumnach tabeli. Treść tabeli powinna zawierać wiersze danych tabeli.

Gdy są obecne, każdy THEAD, TFOOT i TBODY zawiera grupę wierszy. Każda grupa wierszy musi zawierać co najmniej jeden wiersz zdefiniowany przez element TR.

<th>

Komórki tabeli mogą zawierać dwa typy informacji: informacje o nagłówku i dane. To rozróżnienie umożliwia agentom użytkownika renderowanie nagłówków i komórek danych, nawet w przypadku braku arkuszy stylów. Na przykład wizualne programy użytkownika mogą wyświetlać tekst komórki nagłówka pogrubioną czcionką. Syntezatory mowy mogą renderować informacje w nagłówku z wyraźnym odbiorem głosu.

Element TH definiuje komórkę, która zawiera informacje nagłówka. Agenty użytkownika mają dostęp do dwóch informacji nagłówkowych: zawartość elementu TH i wartość atrybutu abbr. Agenty użytkownika muszą renderować zawartość komórki lub wartość atrybutu abbr. W przypadku mediów wizualnych ta ostatnia może być odpowiednia, gdy nie ma wystarczającej ilości miejsca na wyświetlenie pełnej zawartości komórki. W przypadku nośników niewizualnych abbr może być używany jako skrót nagłówków tabeli, gdy są one renderowane wraz z zawartością komórek, do których mają zastosowanie.

Źródło: http://www.w3.org/TR/html4/struct/tables.html


6
2018-01-04 12:42





<thead> jest wyjątkowy, ponieważ może służyć do powtarzania wiersza nagłówka u góry strony w wersjach drukowanych.


5
2018-03-22 17:25





O ile mogę powiedzieć z doświadczenia, nie ma różnicy w renderowaniu, chyba że używasz CSS do określenia różnicy renderowania. ZA <tr> wewnątrz a <thead> będzie renderować to samo co <th> wewnątrz a <table> lub <tbody>.


2
2018-03-22 17:23



Element thead zawiera również wiersze. - DanMan


Nie ma tu twardych reguł. The <thead> element to kolejny sposób grupowania kolumn i wierszy, tak jak <tbody> i <tfoot> jest. Masz więcej możliwości skryptowania i formatowania.


-1
2018-03-22 17:27