Zebra Tablo Satırları

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

Görev

Kolay

Sana zaten bir tablo verilmiştir. Görevin, zebra çizgili tablo efekti oluşturmak için yapısal sözde sınıfları kullanarak iki satırdan her ikincisini farklı bir arka plan rengiyle biçimlendirmektir.

İki satırdan her ikincisini açık gri bir arka planla (#f2f2f2) renklendirmek için :nth-child() sözde sınıfını kullan.

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>