지브라 테이블 행

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 40번째.

챌린지

쉬움

테이블이 이미 제공되었습니다. 여러분의 과제는 구조적 의사 클래스를 사용하여 매 두 번째 행마다 다른 배경색을 적용해 얼룩말 줄무늬 테이블(zebra-striped table) 효과를 만드는 것입니다.

:nth-child() 의사 클래스를 사용하여 매 두 번째 행을 연한 회색 배경(#f2f2f2)으로 칠하세요.

직접 해보기

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