Zebra-Tabellenzeilen

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 40 von 43.

Aufgabe

Einfach

Eine Tabelle ist bereits vorgegeben. Deine Aufgabe besteht darin, strukturelle Pseudoklassen zu verwenden, um jede zweite Zeile mit einer anderen Hintergrundfarbe zu gestalten und so den Effekt einer zebra-gestreiften Tabelle zu erzeugen.

Verwende die Pseudoklasse :nth-child(), um jede zweite Zeile mit einem hellgrauen Hintergrund (#f2f2f2) einzufärben.

Probier es selbst

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