HTML में तालिकाएँ: HTML में तालिकाएँ बनाने और फ़ॉर्मेट करने के लिए एक मार्गदर्शिका

पंक्तियों और स्तंभों के साथ संरचित प्रारूप में डेटा प्रदर्शित करने के लिए तालिका HTML में एक आवश्यक घटक है। HTML में, <table>, <tr>, और <td> टैग का उपयोग करके तालिकाएँ बनाई जाती हैं।

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

आप तालिका में कोशिकाओं को मर्ज करने या कई पंक्तियों और स्तंभों में कोशिकाओं को फैलाने के लिए कोलस्पैन और रोस्पैन जैसी विशेषताओं का उपयोग कर सकते हैं। इसके अलावा, आप तालिका के स्वरूप और लेआउट को अनुकूलित करने के लिए सीएसएस गुण लागू कर सकते हैं।

 

तालिका( <table>)

- <table> HTML में टेबल बनाने के लिए एलिमेंट का उपयोग किया जाता है।

- डेटा को पंक्तियों( <tr>) और कॉलम( <td> या <th>) में रखा गया है।

- प्रत्येक डेटा सेल को <td>(डेटा सेल) या <th>(हेडर सेल) तत्वों के भीतर रखा जाता है।

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

कॉलम हेडर( <th>)

- <th> तत्व का उपयोग तालिका में कॉलम हेडर बनाने के लिए किया जाता है।

- आमतौर पर टेबल की पहली पंक्ति में रखा जाता है।

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>  

 

डेटा पंक्तियाँ( <tr>):

- <tr> तत्व का उपयोग किसी तालिका में डेटा पंक्तियाँ बनाने के लिए किया जाता है।

- डेटा सेल( <td>) या हेडर सेल( <th>) इन <tr> तत्वों के भीतर रखे जाते हैं।

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>  

 

कॉलम स्पैनिंग( colspan)

विशेषता colspan का उपयोग तालिका में डेटा सेल या हेडर सेल में फैले कॉलम की संख्या निर्धारित करने के लिए किया जाता है।

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>  

 

पंक्ति विस्तार( rowspan)

विशेषता rowspan का उपयोग तालिका में डेटा सेल या हेडर सेल में फैली पंक्तियों की संख्या निर्धारित करने के लिए किया जाता है।

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>  

 

कोशिकाओं का विलय( colspan और rowspan)

आप किसी तालिका में कक्षों को मर्ज करने के लिए दोनों colspan और विशेषताओं को जोड़ सकते हैं। rowspan

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>  

 

border संपत्ति

- border संपत्ति तालिका सीमा की मोटाई निर्दिष्ट करती है।

- का मान border एक गैर-नकारात्मक पूर्णांक है।

<table border="1">  
<!-- Table rows and columns -->  
</table>  

 

cellpadding संपत्ति

-, cellpadding गुण तालिका में सेल सामग्री और सेल की सीमा के बीच की दूरी निर्दिष्ट करता है।

- का मान cellpadding एक गैर-नकारात्मक पूर्णांक है

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>  

 

cellspacing संपत्ति

- cellspacing संपत्ति तालिका में कोशिकाओं के बीच अंतर निर्दिष्ट करती है।

- का मान cellspacing एक गैर-नकारात्मक पूर्णांक है।

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>  

 

ये विशेषताएँ और तत्व आपको अपनी आवश्यकताओं के अनुसार HTML में तालिकाएँ बनाने और अनुकूलित करने की अनुमति देते हैं। आप अपनी वेबसाइट पर डेटा को स्पष्ट और व्यवस्थित तरीके से प्रदर्शित करने के लिए उनका उपयोग कर सकते हैं।