شرح تنسيق خلايا الجداول في CSS — padding و zebra و hover باحتراف

بعد ضبط هيكل الجدول، الخطوة الأهم هي تنسيق الخلايا نفسها. تنسيق th وtd بشكل صحيح يجعل البيانات أسهل قراءة وأكثر احترافية.

إذا كنت تبحث عن تنسيق خلايا الجدول في CSS أو zebra table في CSS أو table row hover effect، فهذا الدرس موجه لك.

لماذا تنسيق الخلايا مهم في CSS؟

الجداول بدون padding وألوان مناسبة تكون مرهقة بصرياً. مع تنسيق بسيط، تتحول إلى جدول واضح وسهل التتبع.

التعريف البسيط: Table Cell Styling في CSS يعني تحسين شكل الخلايا (th, td) لتسهيل قراءة البيانات.

1) Padding داخل خلايا الجدول في CSS

أول خطوة أساسية: إضافة padding للخلايا.

th,
td {
    padding: 12px;
    text-align: right;
}

ماذا يفعل هذا الكود؟ يضيف مسافة داخل كل خلية ويجعل النص مناسباً للعربية بمحاذاة يمين.

النتيجة المتوقعة: الجدول يصبح أقل ازدحاماً وأسهل قراءة.

خطأ شائع: ترك الخلايا بدون padding فيظهر النص ملتصقاً بالحدود.

2) تنسيق رأس الجدول (th) في CSS

صف العناوين يجب أن يكون مميزاً بصرياً حتى يفهم المستخدم الأعمدة بسرعة.

th {
    background-color: #0d6efd;
    color: white;
}

ماذا يفعل هذا الكود؟ يميز العناوين بخلفية زرقاء ونص أبيض.

النتيجة المتوقعة: تمييز واضح بين header والبيانات.

خطأ شائع: اختيار لون header قريب من صفوف البيانات فيضعف التباين.

3) Zebra Stripes في CSS باستخدام nth-child

الجداول الطويلة تصبح أسهل قراءة عند تلوين الصفوف بالتناوب.

tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

ماذا يفعل هذا الكود؟ يلوّن الصفوف الزوجية بلون مختلف خفيف.

النتيجة المتوقعة: متابعة السطور أسهل خصوصاً في البيانات الكثيفة.

خطأ شائع: تطبيق nth-child على كل الصفوف فيؤثر على header بطريقة غير مرغوبة.

4) Hover Effect لصفوف الجدول في CSS

تأثير hover يساعد المستخدم على متابعة السطر الذي يقف عليه المؤشر.

tbody tr:hover {
    background-color: #e5e7eb;
}

ماذا يفعل هذا الكود؟ يغير لون الصف عند المرور عليه.

النتيجة المتوقعة: تفاعل أفضل وقراءة أدق في الجداول الكبيرة.

خطأ شائع: لون hover قوي جداً يجعل النص غير واضح.

أخطاء شائعة في Table Cells CSS

١) Header غير مميز: يصعب فهم الأعمدة.

٢) غياب محاذاة مناسبة: خاصة في جداول عربية تحتاج غالباً text-align:right.

٣) كثرة ألوان: تؤثر على وضوح البيانات.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أضيف مسافة داخل خلايا الجدول في CSS؟

استخدم padding على th, td.

كيف أعمل zebra table في CSS؟

عبر tbody tr:nth-child(even) لتلوين الصفوف الزوجية.

كيف أغير لون رأس الجدول في CSS؟

طبّق background-color وcolor على th.

كيف أضيف تأثير hover على صفوف الجدول؟

استخدم tbody tr:hover { ... }.

لماذا الجدول صعب القراءة رغم الحدود؟

غالباً بسبب غياب padding أو تباين ضعيف أو عدم تمييز صف العناوين.