Zebra-Tabellenzeilen

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

Aufgabe

Einfach

Eine Tabelle ist bereits für dich vorbereitet. Deine Aufgabe ist es, strukturelle Pseudoklassen zu verwenden, um jede zweite Zeile mit einer anderen Hintergrundfarbe zu gestalten, um einen Zebra-Streifen-Effekt (zebra-striped table) zu erzielen.

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>