صفوف الجدول المخططة
جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 40 من 43.
التحدي
سهلتم تزويدك بجدول بالفعل. مهمتك هي استخدام الفئات الزائفة الهيكلية لتنسيق كل صف ثانٍ بلون خلفية مختلف لإنشاء تأثير جدول مخطط (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>
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة9التحديات النهائية
تمييز القائمة النشطةصفوف الجدول المخططةتأثير تمرير الماوس على الزرتخطيط البطاقات بنظام Gridصورة Hero مموهة