شرح الجداول في CSS — كيف تجعل table احترافية وسهلة القراءة؟

الجداول (table) ممتازة لعرض البيانات: أسعار، نتائج، جداول مقارنة. لكن بدون CSS غالباً تبدو قديمة وصعبة القراءة.

إذا كنت تبحث عن شرح تنسيق الجداول في CSS أو كيف أستخدم border-collapse أو أفضل طريقة لتنسيق table احترافية، فهذا الدرس موجه لك.

ما هي أساسيات تنسيق الجداول في CSS؟

أهم الخصائص التي تحتاجها غالباً:

• border-collapse: دمج حدود الخلايا.
• width: التحكم بعرض الجدول.
• border على table, th, td.
• padding داخل الخلايا لتحسين القراءة.

التعريف البسيط: Table Styling in CSS هو تحسين شكل الجدول والخلايا ليصبح أوضح وأسهل استخداماً.

border-collapse في CSS (أهم خاصية للجداول)

افتراضياً، الحدود تكون منفصلة وقد تعطي مظهراً قديمًا. border-collapse: collapse; يدمج الحدود بخط واحد نظيف.

table {
    border-collapse: collapse;
}

ماذا يفعل هذا الكود؟ يزيل الفراغات بين حدود الخلايا ويجعل الجدول أكثر أناقة.

النتيجة المتوقعة: حدود واضحة ومتناسقة.

خطأ شائع: نسيان collapse ثم التساؤل عن شكل الحدود المزدوجة.

width: 100% للجداول في CSS

غالباً نريد الجدول يستغل عرض الحاوية كاملاً.

table {
    width: 100%;
}

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

النتيجة المتوقعة: الجدول يبدو متوازن العرض في الأقسام المختلفة.

خطأ شائع: عرض ثابت كبير يكسر التصميم على الشاشات الصغيرة.

تطبيق الحدود على table و th و td

table,
th,
td {
    border: 1px solid #d1d5db;
}

ماذا يفعل هذا الكود؟ يضيف إطاراً موحداً للجدول وكل الخلايا.

النتيجة المتوقعة: عرض بيانات أوضح خاصة في جداول المقارنة.

مثال عملي كامل: جدول احترافي في CSS

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #e5e7eb;
    padding: 10px;
    text-align: right;
}

th {
    background: #f8fafc;
}

ماذا يفعل هذا الكود؟ يطبّق تنسيقاً نظيفاً وعملياً للبيانات.

سطر بسطر:

• border-collapse: دمج الحدود.
• padding: فراغ مريح داخل الخلية.
• text-align: right: مناسب للجداول العربية.
• th background: تمييز صف العناوين.

النتيجة المتوقعة: جدول واضح وسهل القراءة.

خطأ شائع: خلايا بدون padding فتبدو مزدحمة.

نصيحة Responsive للجداول في CSS

في الشاشات الصغيرة، يمكن تغليف الجدول داخل حاوية مع تمرير أفقي:

.table-wrap {
    overflow-x: auto;
}

النتيجة المتوقعة: الجدول لا يكسر الصفحة على الهاتف.

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

١) نسيان border-collapse: حدود مزدوجة ومظهر قديم.

٢) عدم تنسيق th: يصعب تمييز عناوين الأعمدة.

٣) جداول عريضة بلا حل responsive: تسبب كسر الواجهة على الهاتف.

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

كيف أجعل الجدول احترافي في CSS؟

استخدم border-collapse: collapse مع padding للخلايا وتنسيق واضح لـ th.

ما فائدة border-collapse في CSS؟

تدمج الحدود المتجاورة في خط واحد نظيف وتمنع الشكل المزدوج.

كيف أجعل table responsive في CSS؟

ضع الجدول داخل حاوية overflow-x: auto;.

لماذا الجدول يبدو مزدحم في CSS؟

غالباً بسبب غياب padding داخل th وtd.

هل أستخدم width:100% للجداول دائماً؟

غالباً نعم داخل الحاويات المرنة، مع مراعاة responsive على الشاشات الصغيرة.