Tô màu xen kẽ các hàng trong bảng

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 40 trên 43.

Thử thách

Dễ

Một bảng đã được cung cấp sẵn. Nhiệm vụ của bạn là dùng các lớp giả cấu trúc để tạo màu nền khác cho mỗi hàng thứ hai, tạo hiệu ứng bảng sọc vằn.

Dùng lớp giả :nth-child() để tô màu mỗi hàng thứ hai bằng nền xám nhạt (#f2f2f2).

Tự làm thử

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