टेबल, टेबल साइज, स्पेसिंग और पैडिंग, कॉलस्पेन और रोस्पेन एंड कॉलग्रुप इन HTML

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

यहां एक उदाहरण है:

<table>
  <tr>
    <th>नाम</th>
    <th>उम्र</th>
    <th>शहर</th>
  </tr>
  <tr>
    <td>राहुल</td>
    <td>25</td>
    <td>दिल्ली</td>
  </tr>
  <tr>
    <td>मोहित</td>
    <td>30</td>
    <td>मुंबई</td>
  </tr>
</table>

इस उदाहरण में, हमने <table> एलिमेंट का उपयोग करके एक टेबल बनाई है। <tr> एलिमेंट का उपयोग करके हमने पंक्तियों (rows) को निर्दिष्ट किया है। शीर्षक स्तंभ को <th> एलिमेंट के साथ निर्दिष्ट किया गया है, जबकि डेटा स्तंभ को <td> एलिमेंट के साथ निर्दिष्ट किया गया है। प्रत्येक स्तंभ में विभिन्न डेटा दिया गया है।

इस रूप में, आप HTML में टेबल का उपयोग करके संगठित और स्ट्रक्चर्ड डेटा को प्रदर्शित कर सकते हैं। आप टबल के साथ संबंधित शैली और विन्यास को CSS के माध्यम से भी समायोजित कर सकते हैं।

टेबल बॉर्डर इन HTML

टेबल के बॉर्डर को HTML में विन्यासित करने के लिए, आप CSS (Cascading Style Sheets) का उपयोग कर सकते हैं। निम्नलिखित CSS नियम टेबल के बॉर्डर को निर्दिष्ट करने में मदद करेंगे:

<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}
</style>

यहां <style> टैग के भीतर एक CSS ब्लॉक है जिसमें टेबल और स्तंभों के लिए बॉर्डर के संबंधित नियम निर्दिष्ट किए गए हैं।

1. border-collapse: collapse; नियम टेबल में सभी सेल्स के बीच बॉर्डर को मर्ज करेगा और एक सिंगल बॉर्डर के रूप में प्रदर्शित करेगा।
2. border: 1px solid black; नियम स्तंभों के बॉर्डर की विशेषता को निर्दिष्ट करता है, यहां तक कि <th> और <td> एलिमेंट को प्रभावित करेगा। यहां 1px की मोटाई और काले रंग की बॉर्डर निर्दिष्ट की गई है।
3. padding: 8px; नियम स्तंभों के आस-पास की दूरी को निर्दिष्ट करता है। यहां 8px का पैडिंग निर्दिष्ट किया गया है।

इस रूप में, टेबल के सभी सेल्स के बीच बॉर्डर बनाने और स्तंभों के बॉर्डर को निर्दिष्ट करने के लिएके लिए CSS का उपयोग किया जा सकता है। आप चाहें तो इस CSS को अपने HTML दस्तावेज़ के <style> एलिमेंट के भीतर शामिल कर सकते हैं, या एक अलग CSS फ़ाइल में संग्रहित करके इसे एक्सटर्नल रूप से जोड़ सकते हैं।

टेबल साइज इन HTML

HTML में टेबल का आकार (size) निर्दिष्ट करने के लिए आप CSS (Cascading Style Sheets) का उपयोग कर सकते हैं। निम्नलिखित CSS नियम टेबल के आकार को निर्दिष्ट करने में मदद करेंगे:

<style>
table {
  width: 100%;
  height: 300px;
}
</style>

यहां <style> टैग के भीतर एक CSS ब्लॉक है जिसमें टेबल के लिए आकार संबंधित नियम निर्दिष्ट किए गए हैं।

1. width: 100%; नियम टेबल की चौड़ाई को पूरी उपलब्ध विंडो के लिए सेट करता है। यह टेबल को विंडो की चौड़ाई के बराबर बनाएगा।
2. height: 300px; नियम टेबल की ऊँचाई को 300 पिक्सेल सेट करता है। यह टेबल को निर्दिष्ट ऊँचाई के बराबर बनाएगा।

इस रूप में, आप टेबल की चौड़ाई और ऊँचाई को CSS के माध्यम से निर्दिष्ट कर सकते हैं। आप चाहें तो इस CSS को अपने HTML दस्तावेज़ के <style> एलिमेंट के भीतर शामिल कर सकते हैं, या एक अलग CSS फ़ाइल में संग्रहित करके इसे एक्सटर्नल रूप से जोड़ सकते हैं।

स्पेसिंग और पैडिंग इन टेबल इन HTML

HTML टेबल में स्पेसिंग और पैडिंग को निर्दिष्ट करने के लिए आप CSS (Cascading Style Sheets) का उपयोग कर सकते हैं। स्पेसिंग टेबल के चारों ओर की दूरी (margin) को निर्दिष्ट करती है, जबकि पैडिंग सेल्स की आस-पास की दूरी (padding) को निर्दिष्ट करती है। निम्नलिखित CSS नियम टेबल में स्पेसिंग और पैडिंग को निर्दिष्ट करने में मदद करेंगे:

<style>
table {
  border-spacing: 10px;
}

td {
  padding: 5px;
}
</style>

यहां <style> टैग के भीतर एक CSS ब्लॉक है जिसमें टेबल और सेल्स के लिए स्पेसिंग और पैडिंग संबंधित नियम निर्दिष्ट किए गए हैं।

1. border-spacing: 10px; नियम टेबल के चारों ओर की दूरी को 10 पिक्सेल सेट करता है। यह टेबल सेल्स के बीच रिक्त स्थान को निर्दिष्ट करता है।
2. padding: 5px; नियम सेल्स की पैडिंग की विशेषता को निर्दिष्ट करता है। यहां 5 पिक्सेल की पैडिंग निर्दिष्ट की गई है।

इस रूप में, आप टेबल के चारों ओर की दूरी और सेल्स की पैडिंग को CSS के माध्यम से निर्दिष्ट कर सकते हैं। आप चाहें तो इस CSS को अपने HTML दस्तावेज़ के <style> एलिमेंट के भीतर शामिल कर सकते हैं, या एक अलग CSS फ़ाइल में संग्रहित करके इसे एक्सटर्नल रूप से जोड़ सकते हैं।

कॉलस्पेन और रोस्पेन इन टेबल इन HTML

कॉलस्पेन (colspan) और रोस्पेन (rowspan) टेबल एलिमेंट में उपयोग होने वाले एट्रिब्यूट्स हैं जो आपको टेबल के सेल्स को संख्या के आधार पर समायोजित करने में मदद करते हैं।

1. कॉलस्पेन (colspan): कॉलस्पेन एट्रिब्यूट एक सेल को किसी स्तंभ (column) में संख्या के आधार पर विस्तारित करने के लिए उपयोग किया जाता है। इससे सेल का विस्तार किया जाता है और यह कई स्तंभों को आपस में मिलाकर एक सेल के रूप में प्रदर्शित होता है।

<table>
  <tr>
    <td colspan="2">दो स्तंभों का कॉलस्पेन</td>
    <td>एक स्तंभ</td>
  </tr>
</table>

2. रोस्पेन (rowspan): रोस्पेन एट्रिब्यूट एक सेल को किसी पंक्ति (row) में संख्या के आधार पर विस्तारित करने के लिए उपयोग किया जाता है। इससे सेल का विस्तार किया जाता है और यह कई पंक्तियों को आपस में मिलाकर एक सेल के रूप में प्रदर्शित होता है।

<table>
  <tr>
    <td rowspan="2">दो पंक्तियों का रोस्पेन</td>
    <td>एक सेल</td>
    <td>एक सेल</td>
  </tr>
  <tr>
    <td>एक सेल</td>
    <td>एक सेल</td>
  </tr>
</table>

इस रूप में, कॉलस्पेन और रोस्पेन एट्रिब्यूट का उपयोग टेबल की संरचना को निर्धारित करने में किया जाता है। कॉलस्पेन एट्रिब्यूट से सेल्स को आपस में विस्तारित किया जाता है, जबकि रोस्पेन एट्रिब्यूट से सेल्स को ऊपर या नीचे विस्तारित किया जाता है। यहां एक उदाहरण है:

<table>
  <tr>
    <td colspan="2">कॉलस्पेन उदाहरण</td>
    <td>एक स्तंभ</td>
  </tr>
  <tr>
    <td>एक स्तंभ</td>
    <td>एक स्तंभ</td>
    <td>एक स्तंभ</td>
  </tr>
</table>

इस उदाहरण में, पहली पंक्ति में <td> एलिमेंट को colspan="2" के साथ निर्दिष्ट किया गया है, जिससे वह दो स्तंभों को आपस में मिलाकर एक सेल के रूप में प्रदर्शित होता है। दूसरी पंक्ति में सामान्य रूप से सेल्स को प्रदर्शित किया गया है।

<table>
  <tr>
    <td rowspan="2">रोस्पेन उदाहरण</td>
    <td>एक सेल</td>
    <td>एक सेल</td>
  </tr>
  <tr>
    <td>एक सेल</td>
    <td>एक सेल</td>
  </tr>
</table>

इस उदाहरण में, पहली पंक्ति में पहले <td> एलिमेंट को rowspan="2" के साथ निर्दिष्ट किया गया है, जिससे वह वह दो पंक्तियों को आपस में मिलाकर एक सेल के रूप में प्रदर्शित होता है। दूसरी पंक्ति में सामान्य रूप से सेल्स को प्रदर्शित किया गया है।

इस रूप में, कॉलस्पेन और रोस्पेन एट्रिब्यूट का उपयोग करके आप टेबल के सेल्स को समायोजित कर सकते हैं और अधिक विस्तृत टेबल संरचना बना सकते हैं।

कॉलग्रुप इन टेबल इन HTML

कॉलग्रुप (colgroup) एलिमेंट HTML टेबल में एक या एक से अधिक स्तंभों के लिए एक समूह (group) का निर्धारण करने के लिए उपयोग किया जाता है। यह स्तंभों को विशेष संप्रेषण (formatting) और समूहीकरण (grouping) नियमों के लिए एक संकेत प्रदान करता है।

कॉलग्रुप एलिमेंट <colgroup> टेबल के <table> एलिमेंट के अंदर संलग्न किया जाता है। इसके भीतर <col> एलिमेंट का उपयोग करके स्तंभों के लिए स्वेच्छिक विशेषताओं को निर्दिष्ट किया जा सकता है।

यहां एक उदाहरण है:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="background-color: cyan;">
    <col>
  </colgroup>
  <tr>
    <th>शीर्षक 1</th>
    <th>शीर्षक 2</th>
    <th>शीर्षक 3</th>
  </tr>
  <tr>
    <td>डेटा 1</td>
    <td>डेटा 2</td>
    <td>डेटा 3</td>
  </tr>
</table>

इस उदाहरण में, हमने <colgroup> एलिमेंट का उपयोग करके एक कॉलग्रुप निर्धारित किया है और <col> एलिमेंट का उपयोग करके स्तंभों के लिए विशेषताएं निर्दिष्ट की हैं। यहां पहले दो स्तंभों के लिए पृष्ठभूमि रंगों को निर्दिष्ट किया गया है, जबकि तीसरा तीसरा स्तंभ एक साधारण स्टाइल का उपयोग करता है। इस तरह, आप कॉलग्रुप का उपयोग करके टेबल के स्तंभों के लिए स्पष्ट विशेषताएं निर्दिष्ट कर सकते हैं।

आप चाहें तो इस CSS को अपने HTML दस्तावेज़ के <style> एलिमेंट के भीतर शामिल कर सकते हैं, या एक अलग CSS फ़ाइल में संग्रहित करके इसे एक्सटर्नल रूप से जोड़ सकते हैं।