كيف تصنع جدول مخطط حمار وحشي باستخدام CSS

لتسهيل قراءة الجداول ، من المفيد غالبًا تصميم الصفوف بألوان خلفية بديلة. من أكثر الطرق شيوعًا لتصميم الجداول هي تعيين لون الخلفية لكل صف آخر. غالبًا ما يشار إلى هذا باسم "خطوط الحمار الوحشي".

يمكنك تحقيق ذلك عن طريق تعيين كل صف آخر باستخدام فئة CSS ثم تحديد النمط لتلك الفئة. تعمل هذه الطريقة ولكنها ليست الطريقة الأفضل أو الأكثر فاعلية للقيام بذلك. عند استخدام هذه الطريقة ، في كل مرة تحتاج فيها إلى تعديل هذا الجدول ، قد تضطر إلى تعديل كل صف في الجدول لضمان توافق كل صف مع التغييرات. على سبيل المثال ، إذا قمت بإدراج صف جديد في الجدول الخاص بك ، فإن كل صف آخر أدناه يحتاج إلى تغيير الفصل.

CSS يسهل تصميم الطاولات بخطوط حمار وحشي. لا تحتاج إلى إضافة أي شيء إضافي لغة البرمجة سمات أو فئات CSS ، ما عليك سوى استخدام: nth-of-type (n) محدد CSS.

محدد: nth-of-type (n) عبارة عن فئة هيكلية زائفة في CSS تسمح لك بتصميم العناصر بناءً على علاقاتها بالعناصر الأصل والأشقاء. يمكنك استخدامه لتحديد عنصر واحد أو أكثر بناءً على ترتيب المصدر. بمعنى آخر ، يمكن أن تتطابق مع كل عنصر يمثل الطفل التاسع لنوع معين من العنصر الأصل.

يمكن أن يكون الحرف n كلمة أساسية (مثل فردي أو زوجي) أو رقم أو صيغة.

على سبيل المثال ، لتصميم كل علامة فقرة أخرى بلون خلفية أصفر ، سيتضمن مستند CSS الخاص بك:

p: nth-of-type (فردي) {
الخلفية: أصفر ؛
}

ابدأ بجدول HTML الخاص بك

أولاً ، قم بإنشاء جدولك كما تكتبه عادةً بتنسيق HTML. لا تقم بإضافة أي فئات خاصة إلى الصفوف أو الأعمدة.

في ورقة الأنماط الخاصة بك ، أضف CSS التالية:

tr: nth-of-type (فردي) {
لون الخلفية: #ccc ؛
}

سيؤدي هذا إلى نمط كل صف آخر بلون خلفية رمادية يبدأ من الصف الأول.

نمط الأعمدة المتناوبة بنفس الطريقة

يمكنك القيام بنفس النوع من التصميم للأعمدة في الجداول الخاصة بك. للقيام بذلك ، ما عليك سوى تغيير tr في فئة CSS إلى td. على سبيل المثال:

td: nth-of-type (فردي) {
لون الخلفية: #ccc ؛
}

استخدام الصيغ في محدد nth-of-type (n)

صيغة الصيغة المستخدمة في المحدد هي + b.

• أ هو رقم يمثل حجم الدورة أو المؤشر.
• n هو في الواقع الحرف "n" ويمثل عدادًا بنجمة عند 0.
• + عامل تشغيل ، وقد يكون أيضًا "-"
• b هو عدد صحيح ويمثل قيمة الإزاحة - على سبيل المثال ، كم عدد الصفوف لأسفل يجب أن يبدأ المحدد في تطبيق لون الخلفية. هذا مطلوب إذا تم تضمين عامل في الصيغة.

على سبيل المثال ، إذا كنت تريد تعيين لون خلفية لكل صف ثالث ، فإن الصيغة الخاصة بك ستكون 3n + 0. قد يبدو CSS الخاص بك كما يلي:

tr: nth-of-type (3n + 0) {
الخلفية: slategray
}

أدوات مفيدة لاستخدام المحدد nth-of-type Selector

إذا كنت تشعر بالإرهاق قليلاً من جانب الصيغة لاستخدام محدد الفئة nth-of-type من الفئة الزائفة ، جرب موقع: nth Tester كأداة مفيدة يمكن أن تساعدك في تحديد بناء الجملة لتحقيق الشكل الذي تريده. استخدم القائمة المنسدلة لتحديد nth-of-type (يمكنك أيضًا تجربة الفئات الزائفة الأخرى هنا أيضًا ، مثل nth-child).