tabele html: thead vs th

155

Wygląda na to (zgodnie z przykładami na tej stronie ), że jeśli używasz THEAD, nie musisz używać TH.

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

chris
źródło

Odpowiedzi:

124

<thead>Tag służy do grupy treść nagłówka w tabeli HTML. theadElement powinien być stosowany w połączeniu z tbody, a tfootelementami.

Więcej: thead

Użyć <thead>do enkapsulacji cały wiersz (wiersze) lub do wyznaczenia ich jako nagłówku tabeli. Zgodnie ze specyfikacją,

„Podział ten umożliwia programom użytkownika obsługę przewijania treści tabeli niezależnie od nagłówka i stopy tabeli. Podczas drukowania długich tabel informacje nagłówka i stopy tabeli mogą być powtarzane na każdej stronie zawierającej dane tabeli”.

<th>z drugiej strony służy do nadawania stylu konkretnej komórce jako komórce nagłówka, a nie zwykłej komórki danych.

sgokhales
źródło
22
Zawsze używam ich obu.
11
To jedna ze starożytnych witryn internetowych, do których utworzyłeś link w „More: thead”.
masterxilo
zobacz także: dokumentacja Mozilli developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
Adrien Be
3
@masterxilo Czego się spodziewałeś? Sam HTML jest cholernie stary.
Dan Bechard
1
@Kano Czy sprzeciwiłbyś się komuś odsyłającemu do 30-letniego RFC, które jest nadal w użyciu? Jakie ma znaczenie, ile lat ma strona, o ile informacje są nadal aktualne?
jmbpiano
65

<th>w rzeczywistości jest zamiennikiem, <td>gdy chcesz oznaczyć komórkę jako komórkę nagłówka.

Jeśli chcesz użyć <thead>i <th>nie zapomnij zagnieździć się w <th>środku <tr>. W przeciwnym razie kod może być nieprawidłowy.
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>

rflw
źródło
2
To nie odpowiada na pierwotne pytanie, jest raczej dodatkiem i powinno być komentarzem zamiast odpowiedzi.
Gerald Schneider
7
Wiem, ale mam zbyt niskie punkty reputacji, aby opublikować komentarz, więc spróbowałem opublikować odpowiedź. Przepraszam, moja wina, ale zasady obsługi całego stosu są czasem dla mnie dziwne.
rflw
28
W rzeczywistości ta odpowiedź jest jedyną, która pokazuje użycie TH i THEAD. +1 za to!
barrypicker
4
Jeśli napiszesz „Zaletą jest thmożliwość użycia wewnątrz a, theada także wewnątrz a tbody, oba elementy są przydatne w swoim własnym kontekście”. to odpowiada na pytanie ... Gerald jest po prostu wybredny, jeśli chodzi o sposób, w jaki napisałeś odpowiedź, ale w rzeczywistości jest to jedyna odpowiedź, która dostarczyła znaczącego przykładu.
CPHPython
1
Nawet nie wiedziałem, że thjest domyślnie pogrubiony , bez dodatkowego CSS, dzięki za to!
CPHPython
11

thjest bardziej szczegółowe niż to, co może znajdować się wewnątrz thead. thKomórka jest określenie nagłówek odpowiednich tdkomórek. W rzeczywistości możesz dodać headersatrybut do tdkomórki, który wskazuje na identyfikator thkomórki (dla czytników ekranu). Więc thjest bezpośrednio powiązany z tds w tej kolumnie.

Jednak theadmoże zawierać żadnej informacji ... zwykle tak robi obejmują thkomórki, ale może także obejmować niczego, co może uznają za właściwe, ponieważ informacje w górnej części tabeli (innych niż podpis, bo ma swój własny tag jako dobrze).

Nick Manning
źródło
6

<thead> jest wyjątkowy, ponieważ można go użyć do powtórzenia wiersza nagłówka u góry strony w wersjach drukowanych.

Diodeus - James MacFarlane
źródło
6

<thead>

Wiersze tabeli można pogrupować w głowicy stołowego, stopy i jeden lub więcej sekcji korpusu tabeli, przy użyciu THEAD, TFOOToraz TBODYelementy, odpowiednio. Ten podział umożliwia programom użytkownika obsługę przewijania treści tabeli niezależnie od nagłówka i stopy tabeli. W przypadku drukowania długich tabel informacje nagłówka i stopy tabeli mogą być powtarzane na każdej stronie zawierającej dane tabeli.

Nagłówek tabeli i stopka tabeli powinny zawierać informacje o kolumnach tabeli. Treść tabeli powinna zawierać wiersze danych tabeli.

Jeśli jest obecny, 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 rodzaje informacji: informacje nagłówka i dane. To rozróżnienie umożliwia agentom użytkownika wyraźne renderowanie nagłówków i komórek danych, nawet przy braku arkuszy stylów. Na przykład wizualne programy użytkownika mogą przedstawiać tekst komórki nagłówka pogrubioną czcionką. Syntezatory mowy mogą wyświetlać informacje nagłówkowe z wyraźną odmianą głosu.

Element TH definiuje komórkę, która zawiera informacje nagłówka. Programy użytkownika mają dostępne dwie informacje w nagłówku: zawartość elementu TH i wartość atrybutu abbr. Programy 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 do renderowania pełnej zawartości komórki. W przypadku mediów niewizualnych skrót może być używany jako skrót dla nagłówków tabeli, gdy są one renderowane wraz z zawartością komórek, do których się odnoszą.

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

smartrahat
źródło
3

O ile wiem z doświadczenia, nie ma różnicy w renderowaniu, chyba że używasz CSS do określenia różnicy w renderowaniu. <td>Wewnątrz terenu <thead>uczyni taka sama jak <th>wewnątrz z <table>lub <tbody>.

amfetamachina
źródło
Element thead także zawiera wiersze.
DanMan,
1
Myślę, że masz na myśli, że <td>wnętrze a <thead>renderuje to samo co a <th>, a nie to , że <tr>robi.
frabjous
0

Nie ma tutaj sztywnych zasad. <thead>Elementem jest po prostu inny sposób grupować kolumn i wierszy, podobnie jak <tbody>i <tfoot>to. Masz więc więcej możliwości tworzenia skryptów i formatowania.

DanMan
źródło