HTML टेबल्स

परिचय

HTML टेबल <table> टैग का उपयोग करके बनाई जाती है। टेबल में, प्रत्येक पंक्ति <tr> टैग से निर्दिष्ट होती है, टेबल हेडर <th> टैग से परिभाषित होता है, और टेबल डेटा <td> टैग से परिभाषित होता है।

सिंटैक्स

<table>
  <tr>
    <th>टेबल हेडर</th>
    <th>टेबल हेडर</th>
  </tr>
  <tr>
    <td>टेबल डेटा</td>
    <td>टेबल डेटा</td>
  </tr>
  <tr>
    <td>टेबल डेटा</td>
    <td>टेबल डेटा</td>
  </tr>
</table>

HTML टेबल एट्रिब्यूट्स

HTML caption एलिमेंट

हम HTML <caption> एलिमेंट का उपयोग करके टेबल के लिए कैप्शन भी सेट कर सकते हैं।

सिंटैक्स

<caption>टेक्स्ट</caption>

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  table {
    margin: 2rem auto;
    width: 400px;
    border-collapse: collapse;
  }
  th, td {
    border: 2px solid #333;
    padding: 12px;
  }
  th {
    background: #333;
    color: white;
  }
  caption {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: #db133a;
    padding: 10px;
    border-radius: 4px 4px 0 0;
  }
</style>
<body>
<h1>HTML टेबल्स</h1>
<table>
  <caption>छात्र डेटा</caption>
  <tr>
    <th>नाम</th>
    <th>रोल नं.</th>
  </tr>
  <tr>
    <td>जॉन</td>
    <td>031717</td>
  </tr>
  <tr>
    <td>एलन</td>
    <td>051717</td>
  </tr>
</table>
</body>
</html>

आउटपुट

एक स्टाइल की गई टेबल दिखाई देगी जिसमें कैप्शन "छात्र डेटा", हेडर पंक्ति (नाम, रोल नं.), और दो डेटा पंक्तियाँ होंगी।

पूर्ण टेबल संरचना

<table>
  <caption>कैप्शन</caption>
  <thead>
    <tr><th>हेडर</th></tr>
  </thead>
  <tbody>
    <tr><td>डेटा</td></tr>
  </tbody>
  <tfoot>
    <tr><td>फुटर</td></tr>
  </tfoot>
</table>

सेल मर्ज करना

• <td colspan="2"> - दो कॉलम फैलाता है
• <td rowspan="2"> - दो पंक्तियाँ फैलाता है
• <td colspan="2" rowspan="2"> - 2x2 ब्लॉक फैलाता है

CSS स्टाइलिंग टिप्स

table {
  border-collapse: collapse; /* बॉर्डर मिलाएं */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9; /* जेब्रा स्ट्रिपिंग */
}
tr:hover {
  background-color: #f5f5f5; /* होवर प्रभाव */
}

एक्सेसिबिलिटी

• <th scope="col"> कॉलम हेडर के लिए
• <th scope="row"> पंक्ति हेडर के लिए
• <caption> टेबल सारांश के लिए
• जटिल टेबल्स के लिए <thead>, <tbody>, <tfoot> उपयोग करें

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।