Padding & Spacing in Tables
📘 Padding & Spacing in Tables – Table Cells के बीच की दूरी और Padding
Table की cells में text और content को readable बनाने के लिए padding और spacing का सही तरीके से उपयोग करना जरूरी है। Padding से cells के अंदर content को space मिलता है, जबकि spacing से cells के बीच की दूरी बढ़ाई जाती है।
🔷 1. Padding in Tables
Padding का मतलब है कि आप cell के अंदर content (text या images) के चारों ओर खाली जगह छोड़ सकते हैं।
✅ Basic Padding Example:
<style>
td, th {
padding: 15px;
}
</style>
<table border="1">
<tr>
<th>नाम</th>
<th>कक्षा</th>
</tr>
<tr>
<td>राम</td>
<td>10वीं</td>
</tr>
</table>
📌 यह 15px padding सभी cells (td और th) को दी जाती है, जिससे text और cell borders के बीच अच्छी spacing होती है।
🔷 2. Padding Values
आप padding को हर दिशा के लिए अलग-अलग भी सेट कर सकते हैं:
✅ Padding in all four directions:
<style>
td, th {
padding: 10px 20px 15px 25px; /* top, right, bottom, left */
}
</style>
- Top padding:
10px - Right padding:
20px - Bottom padding:
15px - Left padding:
25px
📌 आप padding को shorthand में भी लिख सकते हैं – जैसे padding: 10px 20px; (यह top-bottom और left-right के लिए common padding देता है)।
🔷 3. Spacing Between Cells (border-spacing)
Cell के बीच की दूरी को बढ़ाने के लिए border-spacing CSS property का उपयोग करते हैं।
✅ Example:
<style>
table {
border-spacing: 10px; /* Cell के बीच की दूरी */
}
</style>
<table border="1">
<tr>
<th>नाम</th>
<th>कक्षा</th>
</tr>
<tr>
<td>राम</td>
<td>10वीं</td>
</tr>
</table>
📌 border-spacing की मदद से cells के बीच की दूरी बढ़ाई जाती है। ध्यान दें कि यह तभी काम करेगा जब border-collapse: collapse; ना हो।
🔷 4. Cell Spacing और Border Collapse
अगर आपने table में border-collapse: collapse; लगाया है तो border-spacing काम नहीं करेगा, क्योंकि इसे cells को एक साथ मिलाकर दिखाने के लिए design किया गया है।
<style>
table {
border-collapse: collapse;
}
</style>
📌 border-collapse के साथ cells एक दूसरे के पास होते हैं और spacing लागू नहीं होती।
🔷 5. Combining Padding और Spacing
आप padding और spacing दोनों का उपयोग एक साथ कर सकते हैं ताकि table cells को बेहतर तरीके से arranged किया जा सके:
<style>
table {
border-spacing: 10px;
}
td, th {
padding: 15px;
}
</style>
<table border="1">
<tr>
<th>नाम</th>
<th>कक्षा</th>
</tr>
<tr>
<td>सीता</td>
<td>9वीं</td>
</tr>
</table>
📌 इसमें cells के बीच की दूरी border-spacing से तय होगी और content के चारों ओर padding padding से।
🧪 Practice Task
- एक table बनाइए जिसमें 20px padding हो और cells के बीच 10px spacing हो।
- एक table बनाइए जिसमें top और bottom padding अलग-अलग हों।
border-spacingऔरborder-collapseका difference समझने के लिए दोनों को अलग-अलग use करके table बनाइए।
❗ ध्यान रखें:
| गलती | समाधान |
|---|---|
| Padding काम नहीं कर रहा | सुनिश्चित करें कि आपने सही तरीके से CSS से padding applied की है। |
| Spacing दिखाई नहीं दे रहा | border-collapse: collapse; से spacing को हटाते समय, border-spacing का उपयोग करें। |
🔚 Conclusion
- Padding का उपयोग cell के अंदर content के चारों ओर space देने के लिए किया जाता है।
- Spacing से आप cells के बीच की दूरी बढ़ा सकते हैं, और यह
border-spacingसे controlled होता है। border-collapseऔरborder-spacingको ठीक से समझकर इस्तेमाल करना जरूरी है।