Filas de tabla tipo cebra

Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 40 de 43.

Desafío

Fácil

Ya se te proporciona una tabla. Tu tarea es utilizar pseudoclases estructurales para dar estilo a cada segunda fila con un color de fondo diferente para crear un efecto de tabla con rayas de cebra.

Utiliza la pseudoclase :nth-child() para colorear cada segunda fila con un fondo gris claro (#f2f2f2).

Pruébalo tú mismo

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