Menu
CoddyTech
flag Ar iconالعربيةdown icon

صفوف الجدول المخططة

جزء من قسم إتقان CSS في رحلة HTML على Coddy. الدرس 40 من 43.

challenge icon

التحدي

سهل

تم تزويدك بجدول بالفعل. مهمتك هي استخدام الفئات الزائفة الهيكلية لتنسيق كل صف ثانٍ بلون خلفية مختلف لإنشاء تأثير جدول مخطط (zebra-striped table). 

  1. استخدم الفئة الزائفة :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>

جميع دروس إتقان CSS

تدرّب بنفسك: Playground لـ Web