HTML Table Borders

📘 HTML Table Borders – Table को बॉर्डर देना

HTML Table बिना किसी स्टाइल के default रूप में plain दिखती है। उसे सुंदर और स्पष्ट बनाने के लिए हमें बॉर्डर (Border) जोड़ना होता है।

---

🔷 1. बॉर्डर जोड़ने का Basic तरीका

HTML में table को बॉर्डर देने का सबसे सरल तरीका है:

<table border="1">
  <tr>
    <th>नाम</th>
    <th>कक्षा</th>
  </tr>
  <tr>
    <td>राम</td>
    <td>10वीं</td>
  </tr>
</table>

📌 border="1" एक पुराना तरीका है लेकिन ब्राउज़र अभी भी सपोर्ट करता है।

---

🔷 2. Modern तरीका – CSS से Border

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

<table>
  <tr>
    <th>नाम</th>
    <th>कक्षा</th>
  </tr>
  <tr>
    <td>सीता</td>
    <td>9वीं</td>
  </tr>
</table>

🔍 यहां:

• border: 1px solid black; से सभी table, header और data cells को बॉर्डर मिलता है।

---

🔷 3. Border Collapse – डबल बॉर्डर हटाना

HTML में कभी-कभी cells के बीच डबल बॉर्डर दिखते हैं। इसे हटाने के लिए border-collapse CSS property का उपयोग करें:

<style>
  table {
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
</style>

✅ अब सभी बॉर्डर single लाइन में merge हो जाएंगे।

---

🔷 4. Border Width, Color और Style Control करना

<style>
  table, th, td {
    border: 2px dashed blue;
  }
</style>

Style	Result
solid	— सीधी लाइन
dashed	— — —
dotted	••••••••
double	=

---

🔷 5. केवल Outer Border देना

<style>
  table {
    border: 2px solid green;
    border-collapse: collapse;
  }
  th, td {
    border: none;
  }
</style>

📌 इससे केवल table के चारों तरफ बॉर्डर रहेगा, cells के बीच नहीं।

---

🧪 Practice Task

1. एक 3×3 table बनाइए जिसमें सभी बॉर्डर हों।
2. फिर उसी table को border-collapse के साथ बनाईए।
3. एक table बनाइए जिसमें:
   • बॉर्डर blue हो
   • cells में dotted line हो
   • outer table का border double हो

---

❗ ध्यान देने योग्य बातें

गलती	समाधान
डबल बॉर्डर	border-collapse: collapse; लगाएं
Cell border गायब	th, td पर भी border जोड़ें
केवल table पर border	सभी elements (table, th, td) को target करें

---

🔚 Conclusion

• आप पुराना border="1" तरीका इस्तेमाल कर सकते हैं लेकिन बेहतर तरीका है CSS के द्वारा styling करना।
• border-collapse से border को merge कर सकते हैं।
• CSS से आप width, color, और style सब control कर सकते हैं।