HTML
टेबल्स

परिचय

वाक्य - विन्यास

• <table></table>
• <thead></thead>
• <tbody></tbody>
• <tfoot></tfoot>
• <tr></tr>
• <th></th>
• <td></td>

टिप्पणियों

सिंपल टेबल

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

यह एक <table> तीन कुल पंक्तियों ( <tr> ) से युक्त होगा: शीर्ष लेख कोशिकाओं की एक पंक्ति ( <th> ) और सामग्री कोशिकाओं की दो पंक्तियाँ ( <td> )। <th> तत्व सारणीबद्ध शीर्षलेख हैं और <td> तत्व सारणीबद्ध डेटा हैं । आप एक <td> या <th> अंदर जो चाहें डाल सकते हैं।

स्पैनिंग कॉलम या रो

तालिका कोशिकाएं कई स्तंभों या पंक्तियों का उपयोग कर सकती हैं जो कि colspan और rowspan विशेषताओं का उपयोग करती हैं। इन विशेषताओं को <th> और <td> तत्वों पर लागू किया जा सकता है।

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

में परिणाम होगा

ध्यान दें कि आपको एक तालिका डिज़ाइन नहीं करनी चाहिए जहां पंक्तियाँ और स्तंभ दोनों ओवरलैप हों क्योंकि यह अमान्य HTML है और परिणाम अलग-अलग वेब ब्राउज़र द्वारा अलग-अलग संभाला जाता है।

rowspan = एक गैर-नकारात्मक पूर्णांक जो एक सेल द्वारा छपी पंक्तियों की संख्या को निर्दिष्ट करता है। इस विशेषता का डिफ़ॉल्ट मान एक ( 1 ) है। शून्य ( 0 ) के मान का मतलब है कि सेल मौजूदा पंक्ति से तालिका की अंतिम पंक्ति ( <thead> , <tbody> , या <tfoot> ) तक <tfoot> ।

colspan = एक गैर-नकारात्मक पूर्णांक जो वर्तमान सेल द्वारा छपे स्तंभों की संख्या को निर्दिष्ट करता है। इस विशेषता का डिफ़ॉल्ट मान एक ( 1 ) है। शून्य ( 0 ) के मान का अर्थ है कि सेल स्तंभ समूह के अंतिम स्तंभ <colgroup> जिसमें सेल परिभाषित है, वर्तमान से विस्तारित होगा।

थ्रेड, tbody, tfoot, और कैप्शन के साथ तालिका

HTML <thead> , <tbody> , <tfoot> , और <caption> तत्वों के साथ तालिकाओं को भी प्रदान करता है। ये अतिरिक्त तत्व आपकी तालिकाओं में अर्थ मूल्य जोड़ने और अलग सीएसएस स्टाइल के लिए एक जगह प्रदान करने के लिए उपयोगी हैं।

जब एक तालिका जो एक (पेपर) पेज पर फिट नहीं होती है, उसे प्रिंट करते हुए, अधिकांश ब्राउज़र हर पृष्ठ पर <thead> की सामग्री को दोहराते हैं।

एक विशिष्ट आदेश है जिसका पालन किया जाना चाहिए, और हमें पता होना चाहिए कि हर तत्व उस स्थान पर नहीं गिरता जितना कि कोई उम्मीद करता है। निम्नलिखित उदाहरण दर्शाता है कि हमारे 4 तत्वों को कैसे रखा जाना चाहिए।

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

निम्न उदाहरण के परिणामों को दो बार प्रदर्शित किया जाता है - पहली तालिका में किसी भी शैली का अभाव है, दूसरी तालिका में कुछ सीएसएस गुण लागू हैं: background-color , color और border *। शैलियों को एक दृश्य मार्गदर्शिका के रूप में प्रदान किया जाता है और यह विषय का अनिवार्य पहलू नहीं है।

स्तंभ समूह

कभी-कभी आप स्तंभ या स्तंभों के समूह पर स्टाइल लागू करना चाह सकते हैं। या शब्दार्थ प्रयोजनों के लिए, आप कॉलम को एक साथ समूहित करना चाह सकते हैं। ऐसा करने के लिए, <colgroup> और <col> तत्वों का उपयोग करें।

वैकल्पिक <colgroup> टैग आपको कॉलम को एक साथ समूहित करने की अनुमति देता है। <colgroup> तत्व <table> बाल तत्व होने चाहिए और किसी भी <caption> तत्वों के बाद और किसी भी तालिका सामग्री (जैसे, <tr> , <thead> , <tbody> , आदि) से पहले आने चाहिए।

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

वैकल्पिक <col> टैग आपको तार्किक समूहन लागू किए बिना व्यक्तिगत कॉलम या स्तंभों की एक श्रृंखला को संदर्भित करने की अनुमति देता है। <col> तत्व वैकल्पिक हैं, लेकिन यदि मौजूद हैं, तो उन्हें <colgroup> तत्व के अंदर होना चाहिए।

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

निम्नलिखित सीएसएस शैलियों को <colgroup> और <col> तत्वों पर लागू किया जा सकता है:

• border

• background

• width

• visibility

• display ( display: none )

  • display: none; वास्तव में प्रदर्शन से स्तंभों को हटा देगा, जिससे तालिका को प्रस्तुत करना होगा जैसे कि उन कोशिकाओं का अस्तित्व नहीं है

अधिक जानकारी के लिए, HTML5 टैब्यूलर डेटा देखें।

शीर्षक की गुंजाइश

th तत्वों का उपयोग आमतौर पर तालिका पंक्तियों और स्तंभों के लिए शीर्षकों को इंगित करने के लिए किया जाता है, जैसे:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope विशेषता के उपयोग से इसे एक्सेसिबिलिटी के लिए बेहतर बनाया जा सकता है। उपरोक्त उदाहरण में निम्नानुसार संशोधन किया जाएगा:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

scope को एक प्रगणित विशेषता के रूप में जाना जाता है, जिसका अर्थ है कि इसमें विशिष्ट मानों के एक सेट से मान हो सकता है। इस सेट में शामिल हैं:

• col
• row
• colgroup
• rowgroup

संदर्भ:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
• https://www.w3.org/TR/WCAG20-TECHS/H63.html