tabele html: thead vs th (Programare, Html, Tabel Html)

chris a intrebat.

Se pare că (conform exemplelor de pe această pagină), oricum) că, dacă folosiți THEAD, nu este nevoie să folosiți TH.

Este adevărat acest lucru? Dacă da, care sunt avantajele/dezavantajele THEAD față de TH?

7 răspunsuri
sgokhales

The <thead> este utilizat pentru a grupa conținutul antetului într-un tabel HTML.Eticheta thead ar trebui să fie utilizat împreună cu elementul tbody și tfoot elemente.

Mai multe : thead

Folosiți <thead> pentru a încapsula un întreg rând (sau rânduri) pentru a le desemna ca antet de tabel.Conform specificațiilor,

„Această divizare permite agenților de utilizator să susțină derularea corpurilor de tabel independent de capul și piciorul tabelului. Atunci când sunt tipărite tabele lungi, informațiile privind capul și piciorul tabelului pot fi repetate pe fiecare pagină care conține date de tabel.”

<th>, pe de altă parte, este utilizată pentru a stiliza o anumită celulă ca fiind o celulă de antet mai degrabă decât o celulă de date obișnuită.

Comentarii

  • Acesta este un site vechi la care ați făcut legătura în „More : thead”. –  > Por masterxilo.
  • a se vedea, de asemenea, și: „A se vedea și Documentul Mozilla developer.mozilla.org/en-US/docs/Web/HTML/Element/thead –  > Por Adrien Be.
  • @masterxilo La ce vă așteptați? HTML în sine este destul de vechi. –  > Por Dan Bechard.
  • @Kano Te-ai opune ca cineva să facă un link către un RFC vechi de 30 de ani care este încă în uz? Ce contează cât de veche este pagina, atâta timp cât informația este încă relevantă? –  > Por jmbpiano.
  • @jmbpiano De unde știi că informația este încă relevantă doar pe baza acelei pagini? Pagina de documentație a MDN privind thead a fost actualizată ultima dată cu o lună în urmă, ceea ce o face (cel puțin) o resursă mai demnă de încredere. –  > Por kano.
rflw

<th> este de fapt un înlocuitor pentru <td> atunci când doriți să marcați o celulă ca fiind o celulă de antet.

Dacă doriți să utilizați <thead> și <th> nu uitați să aninați <th> în interiorul <tr>. În caz contrar, codul ar putea să nu fie valid.
Exemplu:

Comentarii

  • Acest lucru nu răspunde la întrebarea inițială, este mai degrabă un addendum și ar trebui să fie un comentariu în loc de un răspuns. –  > Por Gerald Schneider.
  • Știu, dar am prea puține puncte de reputație pentru a posta un comentariu, așa că am încercat să postez un răspuns. Îmi pare rău, e vina mea dar regulile serviciului whole stack sunt uneori ciudate pentru mine. –  > Por rflw.
  • 29

  • De fapt, acest răspuns este singurul care arată o utilizare a TH și THEAD. +1 pentru asta! –  > Por barrypicker.
  • Dacă scrieți „Avantajul este th poate fi folosit în interiorul unui thead și, de asemenea, în interiorul unui tbody, ambele elemente sunt utile în propriul context.”, asta răspunde la întrebare… Gerald este doar pretențios cu privire la modul în care ai scris răspunsul, dar este de fapt singurul răspuns de aici care a oferit un exemplu semnificativ. –  > Por CPHPython.
  • Nici măcar nu știam că th devine bolded în mod implicit, fără CSS suplimentar, mulțumesc pentru asta! –  > Por CPHPython.
Nick Manning

th este mai specific decât ceea ce poate fi în interiorul lui thead. A th este de a specifica antetul celulei corespunzătoare td celule. De fapt, se poate adăuga un headers la un atribut td care să indice id-ul unei celule th celulă (pentru cititorii de ecran). Astfel, th este direct legat de tds al coloanei respective.

Cu toate acestea, thead poate include orice informație… în mod obișnuit, da, include și th celule, dar poate include, de asemenea, orice lucru pe care l-ați putea considera adecvat ca informație în partea de sus a tabelului (în afară de o legendă, deoarece și aceasta are propria etichetă).

Diodeus – James MacFarlane

<thead> este specială prin faptul că poate fi utilizată pentru a repeta rândul de antet din partea de sus a paginii în versiunile tipărite.

smartrahat

<thead>

Rândurile de tabel pot fi grupate într-un cap de tabel, un picior de tabel și una sau mai multe secțiuni din corpul tabelului, utilizând tag-ul THEAD, TFOOT și TBODY Această divizare permite agenților de utilizator să suporte derularea corpurilor de tabel independent de capul și piciorul tabelului. În cazul în care se tipăresc tabele lungi, informațiile privind capul și piciorul tabelului pot fi repetate pe fiecare pagină care conține date de tabel.

Capul și piciorul tabelului trebuie să conțină informații despre coloanele tabelului. Corpul tabelului trebuie să conțină rândurile de date ale tabelului.

Atunci când este prezent, fiecare THEAD, TFOOT și TBODY conține un grup de rânduri. Fiecare grup de rânduri trebuie să conțină cel puțin un rând, definit de elementul TR.

<th>

Celulele unui tabel pot conține două tipuri de informații: informații de antet și date. Această distincție permite agenților de utilizator să redea în mod distinct celulele de antet și cele de date, chiar și în absența foilor de stil. De exemplu, agenții utilizator vizuali pot prezenta textul celulei de antet cu un font bold. Sintetizatoarele vocale pot reda informațiile din antet cu o inflexiune distinctă a vocii.

Elementul TH definește o celulă care conține informații de antet. Agenții de utilizator au la dispoziție două tipuri de informații de antet: conținutul elementului TH și valoarea atributului abbr. Agenții de utilizator trebuie să redea fie conținutul celulei, fie valoarea atributului abbr. În cazul mediilor vizuale, aceasta din urmă poate fi adecvată atunci când nu există spațiu suficient pentru a reda întregul conținut al celulei. În cazul mediilor nevizuale, abbr poate fi utilizat ca o abreviere pentru titlurile de tabel atunci când acestea sunt redate împreună cu conținutul celulelor la care se aplică.

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

amfetamină

Din câte știu din experiență, nu există nicio diferență de redare, cu excepția cazului în care folosiți CSS pentru a specifica o diferență de redare. A <td> în interiorul unui <thead> va fi redat la fel ca un <th> în interiorul lui a <table> sau a <tbody>.

Comentarii

  • Un element thead conține, de asemenea, rânduri. –  > Por DanMan.
  • Cred că vă referiți la un element <td> în interiorul unui <thead> se redă la fel ca un <th>și nu că a <tr> o face. –  > Por frabjous.
  • React spune că „<td> nu poate apărea ca un copil al <thead>” – –  > Por AlxVallejo.
DanMan

Nu există reguli stricte aici. Site-ul <thead> element este doar o altă modalitate de a grupa coloanele și rândurile, la fel ca și <tbody> și <tfoot> este. Astfel, aveți mai multe posibilități de scripting și formatare.