HTML टेबल स्टाइलिंग

एक Clean Base Style बनाना

एक ठोस table styling foundation grid lines merge करने के लिए border-collapse: collapse, breathing room के लिए हर cell पर consistent padding, और एक neutral border color से शुरू होती है -- सिर्फ ये तीन basics ही किसी raw, unstyled table को एक clean और professional-looking चीज़ में बदल देते हैं।

उदाहरण: Building a Clean Base Style

<style>
  table {
    border-collapse: collapse;
  }
  td, th {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

Header Row को Style करना

एक अलग header style, आमतौर पर white या dark contrasting text के साथ एक solid background color, readers को तुरंत बताती है कि labels कहां हैं और data कहां से शुरू होता है, जिससे पूरी table को एक नज़र में समझना कहीं तेज़ हो जाता है।

उदाहरण: Styling the Header Row

<style>
  th {
    background-color: #333;
    color: white;
  }
</style>
<table>
  <tr><th>Name</th></tr>
</table>

Rows में Zebra Striping

:nth-child(even) या :nth-child(odd) selector से apply की गई हर दूसरी row पर alternating background colors एक "zebra stripe" pattern बनाते हैं जो किसी wide table में गलती से पड़ोसी row पर कूदे बिना एक row को follow करना बहुत आसान बना देता है।

उदाहरण: Zebra Striping Rows

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

Interactive Tables के लिए Hover Effects

tr:hover पर एक subtle background color बदलाव users को स्पष्ट visual feedback देता है कि उनका mouse अभी किस row के ऊपर है, जो कई rows वाली wide tables पर वाकई उपयोगी बन जाता है जहां horizontally पढ़ते हुए track खोना आसान होता है।

उदाहरण: Hover Effects for Interactive Tables

<style>
  tr:hover {
    background-color: #ddd;
    transition: background-color 0.2s;
  }
</style>
<table>
  <tr><td>Hover me</td></tr>
</table>

Responsive Table Design

narrow mobile screens पर, अगर सिर्फ सिकुड़ने के लिए छोड़ दिया जाए तो एक wide multi-column table वाकई unusable हो सकती है।

आम responsive strategies में एक contained wrapper के अंदर horizontal scroll allow करना, या छोटे breakpoints पर CSS के साथ cells को vertically stack करके restructure करना शामिल है ताकि हर row एक cramped grid की बजाय एक labeled card जैसी पढ़ी जाए।

उदाहरण: Responsive Table Design

<div style="overflow-x: auto;">
  <table>
    <tr><td>Wide table content</td></tr>
  </table>
</div>