صفوف الجدول المخططة
جزء من قسم 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 مموهةتدرّب بنفسك: Playground لـ Web