שורות מתחלפות בטבלה

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 40 מתוך 43.

אתגר

קל

כבר ניתנה לך טבלה. המשימה שלך היא להשתמש במחלקות פסאודו מבניות כדי לעצב כל שורה שנייה בצבע רקע שונה וליצור אפקט של טבלת פסים בסגנון זברה.

השתמש במחלקת הפסאודו :nth-child() כדי לצבוע כל שורה שנייה ברקע אפור בהיר (#f2f2f2).

נסו בעצמכם

<html>
<head>
  <title>Zebra Table Rows</title>
  <style> 
    .destinations {
      width: 100%;
      border-collapse: collapse;
      font-family: sans-serif;
    }
    
    .destinations th, .destinations td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ccc;
    }
    
    /* Add your styles here */

  </style>
</head>
<body>
    <table class="destinations">
      <tr>
        <th>Destination</th>
        <th>Country</th>
        <th>Best Season</th>
      </tr>
      <tr>
        <td>Kyoto</td>
        <td>Japan</td>
        <td>Spring</td>
      </tr>
      <tr>
        <td>Reykjavik</td>
        <td>Iceland</td>
        <td>Winter</td>
      </tr>
      <tr>
        <td>Barcelona</td>
        <td>Spain</td>
        <td>Summer</td>
      </tr>
      <tr>
        <td>Cape Town</td>
        <td>South Africa</td>
        <td>Autumn</td>
      </tr>
    </table>
</body>
</html>