HTML Table Padding & Spacing

Cells के अंदर Padding जोड़ना

td और th elements पर padding cell के border और उसके content के बीच जगह जोड़ता है, बिल्कुल वैसे ही जैसे padding किसी भी अन्य HTML element पर काम करती है -- इसके बिना, text cell edges से सटा हुआ बैठता है, जो एक नज़र में तंग और पढ़ने में मुश्किल दिखता है।

उदाहरण: Adding Padding Inside Cells

<style>
  td, th {
    padding: 10px;
  }
</style>
<table>
  <tr><th>Name</th></tr>
  <tr><td>Alex</td></tr>
</table>

border-spacing से Cells के बीच जगह नियंत्रित करना

border-spacing अलग-अलग, आसपास की cells के बीच का gap सेट करता है -- लेकिन इसका कोई visible असर तभी होता है जब border-collapse को separate (table का default) पर सेट किया गया हो, क्योंकि border-collapse: collapse cell edges को merge कर देता है और space out करने के लिए कोई gap नहीं बचता।

उदाहरण: Controlling Space Between Cells with border-spacing

<style>
  table {
    border-spacing: 10px;
  }
</style>
<table>
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

Readability के लिए Padding के साथ Zebra Striping

उदार cell padding को alternating row background colors (zebra striping) के साथ combine करना wide data tables को स्कैन करना काफी आसान बना देता है, क्योंकि आंख गलती से पड़ोसी row पर कूदे बिना कई columns में एक single row को follow कर सकती है।

उदाहरण: Zebra Striping with Padding for Readability

<style>
  td {
    padding: 10px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Compact बनाम Comfortable Tables के लिए Padding

हर table को समान breathing room की ज़रूरत नहीं होती -- एक dense data-analysis table एक साथ screen पर ज़्यादा rows fit करने के लिए compact 4-6px padding का उपयोग कर सकती है, जबकि एक customer-facing pricing table ज़्यादा relaxed, premium feel के लिए उदार 16-20px padding का उपयोग कर सकती है।

उदाहरण: Padding for Compact vs Comfortable Tables

<table>
  <tr><td style="padding: 4px;">Compact</td></tr>
</table>
<table>
  <tr><td style="padding: 20px;">Comfortable</td></tr>
</table>

Responsive Padding Adjustments

छोटी mobile screens पर, desktop-size का उदार padding कीमती horizontal जगह बर्बाद कर सकता है, जिससे content ज़रूरत से ज़्यादा सिकुड़ जाता है।

narrow viewports के लिए media query के अंदर padding कम करने से table का content बिना ज़्यादा horizontal scrolling किए readable बना रहता है।

उदाहरण: Responsive Padding Adjustments

<style>
  td {
    padding: 16px;
  }
  @media (max-width: 600px) {
    td {
      padding: 8px;
    }
  }
</style>