Righe alternate nella tabella

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 40 di 43.

Sfida

Facile

Ti viene già fornita una tabella. Il tuo compito è usare le pseudoclassi strutturali per applicare un colore di sfondo diverso a una riga sì e una no, creando un effetto di tabella a righe alternate.

Usa la pseudoclasse :nth-child() per colorare una riga sì e una no con uno sfondo grigio chiaro (#f2f2f2).

Provalo tu

<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>