html तालिकाओं: thead बनाम वें


155

ऐसा लगता है कि ( इस पृष्ठ पर दिए गए उदाहरणों के अनुसार , वैसे भी) यदि आप THEAD का उपयोग कर रहे हैं, तो आपको TH का उपयोग करने की आवश्यकता नहीं है।

क्या यह सच है? यदि हां, तो THEAD बनाम TH के क्या फायदे / नुकसान हैं?

जवाबों:


124

<thead>टैग समूह के लिए एक HTML तालिका में हेडर सामग्री प्रयोग किया जाता है। theadतत्व के साथ संयोजन के रूप में इस्तेमाल किया जाना चाहिए tbodyऔर tfootतत्वों।

अधिक: मनका

आप <thead>उन्हें टेबल हैडर के रूप में नामित करने के लिए एक पूरी पंक्ति (या पंक्तियों) को एनकैप्सुलेट करने के लिए उपयोग करते हैं। युक्ति के अनुसार,

"यह विभाजन उपयोगकर्ता एजेंटों को टेबल हेड और फ़ुट के स्वतंत्र रूप से टेबल बॉडीज़ की स्क्रॉलिंग का समर्थन करने में सक्षम बनाता है। जब लंबी टेबल प्रिंट की जाती है, तो टेबल डेटा वाले प्रत्येक पेज पर टेबल हेड और फ़ुट जानकारी दोहराई जा सकती है।"

<th>दूसरी ओर, साधारण डेटा सेल के बजाय हेडर सेल के रूप में एक विशिष्ट सेल को स्टाइल करने के लिए उपयोग किया जाता है।


22
मैं हमेशा उन दोनों का उपयोग करता हूं।

11
यह एक प्राचीन वेबसाइट है जिसे आपने "मोर: थीड" से जोड़ा है।
मास्टरएक्सिलो

यह भी देखें: मोज़िला डॉक developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
एड्रियन बनें

3
@ मास्टरएक्सिलो आपको क्या उम्मीद थी? HTML अपने आप में बहुत प्राचीन है।
डैन बेहार्ड

1
@ क्या आप किसी ऐसे 30 वर्षीय RFC से जुड़ने पर आपत्ति करेंगे जो अभी भी उपयोग में है? इससे क्या फर्क पड़ता है कि पेज कितना पुराना है जब तक जानकारी अभी भी प्रासंगिक है?
15

65

<th><td>जब आप किसी सेल को हेडर सेल के रूप में चिह्नित करना चाहते हैं तो वास्तव में यह एक प्रतिस्थापन है ।

यदि आप उपयोग करना चाहते हैं <thead>और अंदर <th>घोंसला बनाना न भूलें । अन्यथा कोड मान्य नहीं हो सकता है। उदाहरण:<th><tr>

<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>


2
यह मूल प्रश्न का उत्तर नहीं देता है, यह अधिक परिशिष्ट है और उत्तर के बजाय एक टिप्पणी होनी चाहिए।
गेराल्ड श्नाइडर

7
मुझे पता है लेकिन मेरे पास टिप्पणी पोस्ट करने के लिए बहुत कम प्रतिष्ठा अंक हैं इसलिए मैंने एक उत्तर पोस्ट करने की कोशिश की। मुझे क्षमा करें, मेरी गलती है लेकिन पूरे स्टैक सेवा के नियम कभी-कभी मेरे लिए अजीब होते हैं।
rflw

28
दरअसल, यह जवाब केवल TH और THEAD का उपयोग दिखाने वाला है। उस के लिए +1!
बैरीपिकर

4
यदि आप लिखते हैं "लाभ का thउपयोग अंदर theadऔर अंदर भी किया जा सकता है tbody, दोनों तत्व अपने संदर्भ में उपयोगी होते हैं।" यह सवाल का जवाब देता है ... जेराल्ड बस जिस तरह से आपने उत्तर लिखा है, उसके बारे में चुटकी ले रहा है, लेकिन यह वास्तव में यहां एकमात्र जवाब है जिसने एक सार्थक उदाहरण प्रदान किया है।
CPHPython

1
मुझे यह भी नहीं पता था कि डिफ़ॉल्ट रूप से बोल्ड एड thमिलता है , अतिरिक्त सीएसएस के बिना, इसके लिए धन्यवाद!
CPHPython

11

thसे अधिक विशिष्ट है जो अंदर रह सकता है thead। एक thसेल संबंधित tdकोशिकाओं के हेडर को निर्दिष्ट करने के लिए है। वास्तव में आप एक headersविशेषता को एक tdसेल में जोड़ सकते हैं जो एक सेल की आईडी th(स्क्रीन पाठकों के लिए) को इंगित करता है । तो thसीधे tdउस कॉलम के एस से संबंधित है ।

हालाँकि, theadकिसी भी जानकारी को शामिल कर सकते हैं ... आमतौर पर हाँ इसमें thसेल शामिल हैं लेकिन इसमें कुछ भी शामिल हो सकता है जिसे आप तालिका के शीर्ष पर जानकारी के रूप में उपयुक्त समझ सकते हैं (कैप्शन के अलावा, क्योंकि इसके अपने टैग हैं कुंआ)।



6

<thead>

टेबल पंक्तियों को क्रमशः टेबल हेड, टेबल फुट और एक या एक से अधिक टेबल बॉडी सेक्शन में THEAD, TFOOTऔर TBODYतत्वों का उपयोग करके वर्गीकृत किया जा सकता है । यह विभाजन उपयोगकर्ता एजेंटों को टेबल सिर और पैर के स्वतंत्र रूप से टेबल बॉडीज़ की स्क्रॉलिंग का समर्थन करने में सक्षम बनाता है। जब लंबी तालिकाएँ मुद्रित की जाती हैं, तो तालिका डेटा वाले प्रत्येक पृष्ठ पर तालिका सिर और पैर की जानकारी दोहराई जा सकती है।

टेबल हेड और टेबल पैर में टेबल के कॉलम के बारे में जानकारी होनी चाहिए। टेबल बॉडी में टेबल डेटा की पंक्तियाँ होनी चाहिए।

वर्तमान में, प्रत्येक THEAD, TFOOT, और TBODY में एक पंक्ति समूह होता है। प्रत्येक पंक्ति समूह में TR तत्व द्वारा परिभाषित कम से कम एक पंक्ति होनी चाहिए।

<th>

तालिका कोशिकाओं में दो प्रकार की जानकारी हो सकती है: हेडर सूचना और डेटा। यह अंतर उपयोगकर्ता एजेंटों को हेडर और डेटा कोशिकाओं को अलग ढंग से प्रस्तुत करने में सक्षम बनाता है, यहां तक ​​कि स्टाइल शीट की अनुपस्थिति में भी। उदाहरण के लिए, दृश्य उपयोगकर्ता एजेंट बोल्ड फ़ॉन्ट के साथ हेडर सेल टेक्स्ट प्रस्तुत कर सकते हैं। स्पीच सिंथेसाइज़र हेडर की जानकारी को एक अलग वॉयस इनफ्लेक्शन के साथ प्रस्तुत कर सकते हैं।

TH तत्व एक सेल को परिभाषित करता है जिसमें हेडर की जानकारी होती है। उपयोगकर्ता एजेंटों के पास हेडर सूचना के दो टुकड़े उपलब्ध हैं: TH तत्व की सामग्री और एब्रेट विशेषता का मूल्य। उपयोगकर्ता एजेंटों को सेल की सामग्री या abbr विशेषता के मूल्य को प्रस्तुत करना होगा। दृश्य मीडिया के लिए, बाद उपयुक्त हो सकता है जब सेल की पूरी सामग्री को प्रस्तुत करने के लिए अपर्याप्त स्थान हो। नॉन-विजुअल मीडिया एबरे का उपयोग टेबल हेडर के लिए एक संक्षिप्त नाम के रूप में किया जा सकता है, जब इन्हें उन कोशिकाओं की सामग्री के साथ प्रदान किया जाता है, जिन पर वे लागू होते हैं।

स्रोत: http://www.w3.org/TR/html4/struct/tables.html


3

जहां तक ​​मैं अनुभव से कह सकता हूं, तब तक रेंडरिंग में कोई अंतर नहीं है जब तक कि आप CSS का उपयोग रेंडरिंग में अंतर निर्दिष्ट करने के लिए नहीं कर रहे हैं। एक के <td>अंदर एक या एक के अंदर के <thead>रूप में ही प्रस्तुत करना होगा ।<th><table><tbody>


एक थ्रेड तत्व में पंक्तियाँ भी होती हैं।
डेनमैन

1
मुझे लगता है कि आप एक <td>के रूप में एक <thead>renders के अंदर मतलब है <th>, नहीं है कि एक <tr>
frabjous

0

यहां कोई कठिन नियम नहीं हैं। <thead>तत्व अपने स्तंभों और पंक्तियों के समूह के लिए सिर्फ एक और तरीका है, बस की तरह है <tbody>और <tfoot>है। इसलिए आपके पास पटकथा और प्रारूपण के लिए अधिक संभावनाएं हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.