CSS से तुलना टेबल (कॉम्पेरिजन टेबल) कैसे बनाएं?

कॉम्पेरिजन टेबल में फीचर कॉलम बाएं, प्लान कॉलम दाएं होते हैं। 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 {
      text-align: center; padding: 16px;
      font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 18px;
    }
    th:first-child, td:first-child { text-align: left; }
    tr:nth-child(even) { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Comparison Table Example</h1>
  <table>
    <tr> <th style="width:50%">Features</th> <th>Basic</th> <th>Pro</th> </tr>
    <tr> <td>Free</td> <td>Yes</td> <td>No</td> </tr>
    <tr> <td>Customer Support</td> <td>No</td> <td>Yes</td> </tr>
    <tr> <td>Validity</td> <td>1 Year</td> <td>Lifetime</td> </tr>
    <tr> <td>Warranty</td> <td>No</td> <td>5 Years</td> </tr>
  </table>
</body>
</html>

आउटपुट

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

मुख्य बिंदु

• पहला कॉलम लेफ्ट - th:first-child, td:first-child
• बाकी सेंटर - फीचर तुलना के लिए
• ज़ेबरा स्ट्रिपिंग - tr:nth-child(even) हल्का ग्रे
• फीचर कॉलम चौड़ा - 50% चौड़ाई
• बोल्ड फॉन्ट - सभी सेल बोल्ड