Lignes de tableau en zèbre

Fait partie de la section CSS Mastery du Journey HTML de Coddy. Leçon 40 sur 43.

Défi

Facile

Un tableau vous est déjà fourni. Votre tâche consiste à utiliser des pseudo-classes structurelles pour styliser une ligne sur deux avec une couleur d'arrière-plan différente afin de créer un effet de tableau à rayures zébrées.

Utilisez la pseudo-classe :nth-child() pour colorer chaque deuxième ligne avec un arrière-plan gris clair (#f2f2f2).

Essayez vous-même

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