Zebra Tablo Satırları

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 40 / 43.

Görev

Kolay

Size halihazırda bir tablo verilmiştir. Göreviniz, zebra çizgili tablo efekti oluşturmak için her ikinci satırı farklı bir arka plan rengiyle stillendirmek üzere yapısal sözde sınıfları kullanmaktır.

Her ikinci satırı açık gri bir arka planla (#f2f2f2) renklendirmek için :nth-child() sözde sınıfını kullanın.

Kendin dene

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