CSS से ज़ेबरा स्ट्राइप्ड टेबल (अल्टरनेट रो कलर) कैसे बनाएं?

ज़ेबरा स्ट्रिपिंग में वैकल्पिक पंक्तियों का रंग अलग होता है। tr:nth-child(even) सिलेक्टर का उपयोग करके सम पंक्तियों को स्टाइल किया जाता है। इससे बड़ी टेबल पढ़ना आसान हो जाता है।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    table {
      border-collapse: collapse; border-spacing: 0;
      width: 100%; border: 1px solid #ddd;
    }
    th, td {
      font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 18px; text-align: left; padding: 16px;
    }
    tr:nth-child(even) {
      background-color: #8b8b8b; color: white;
    }
  </style>
</head>
<body>
  <h1>Zebra Striped Table Example</h1>
  <table>
    <tr> <th>First Name</th> <th>Last Name</th> <th>BirthMonth</th> </tr>
    <tr> <td>Jack</td> <td>Roy</td> <td>January</td> </tr>
    <tr> <td>Steve</td> <td>Smith</td> <td>March</td> </tr>
    <tr> <td>Brandon</td> <td>Anderson</td> <td>February</td> </tr>
  </table>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• tr:nth-child(even) - सम पंक्तियों (2, 4, 6...) को चुनता है
• border-collapse: collapse - सेल बॉर्डर मर्ज करता है
• कंट्रास्ट रंग - ग्रे बैकग्राउंड, सफेद टेक्स्ट
• हेडर स्टाइल - th बोल्ड, पैडिंग के साथ
• नो जावास्क्रिप्ट - शुद्ध CSS समाधान