الجداول في CSS
HTML يبني شبكة الصفوف والخلايا. CSS يقرر إن كانت الحدود نظيفة، وعرض الجدول، ومكان النص في الخلية، وسهولة مسح الصفوف بالعين.
مجموعة أدوات CSS للجداول
📊 أنماط الجدول بنظرة واحدة
| الخاصية | دورها اليومي |
|---|---|
border-collapse |
دمج حدود الخلايا (collapse) أو إبقاؤها منفصلة (separate) |
border-spacing |
الفراغ بين الخلايا عندما تكون الحدود منفصلة |
width |
عرض الجدول (غالبًا 100% في مقال أو بطاقة) |
padding على th/td |
مساحة تنفس داخل الخلايا |
text-align / vertical-align |
محاذاة أفقية وعمودية داخل الخلية |
عادةً تنسّق table وth وtd وأحيانًا tr — لا كل خلية بمفردها — ليبقى الجدول متسقًا.
حدود لا تتضاعف
بلا مساعدة قد تبدو حدود الخلايا المتجاورة سميكة أو مزدوجة. border-collapse: collapse يدمجها في خط نظيف — الخيار اليومي لجداول البيانات.
حدود جدول مطوية
csstable.data {
width: 100%;
border-collapse: collapse;
}
table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}حدود منفصلة وتباعد
إن أردت فراغًا مرئيًا بين الخلايا استخدم border-collapse: separate واضبط border-spacing. التباعد يُتجاهل عند الطي.
خلايا منفصلة بفراغ
csstable.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}
table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}العرض والعناوين والمحاذاة
جدول بعرض كامل غالبًا أوضح في المقالات. أبرز العناوين، وحاذِ النص، واستخدم vertical-align حين تختلف ارتفاعات الخلايا.
محاذاة العنوان والخلية
csstable.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}
table.data td {
text-align: left;
vertical-align: top;
}صفوف متناوبة وتحويم هادئ
خلفيات متناوبة تساعد العين على تتبّع الجداول العريضة. :hover خفيف على tr يبرز الصف النشط بلا ضوضاء نيون.
صفوف متناوبة + تحويم الصف
csstable.data tbody tr:nth-child(even) {
background: #fafafa;
}
table.data tbody tr:hover {
background: #eef5ff;
}عادة هادئة لجدول البيانات
اطوِ الحدود، امنح الخلايا حشوًا حقيقيًا، أبقِ تباين العناوين معتدلًا، وأضف التناوب أو التحويم حين يحتاج الجدول العريض مساعدة في المسح.
جدول مقال مقروء
cssarticle table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}جرّب بنفسك
- ضع
border-collapse: collapseوحدًا خفيفًا علىth/td. - أضف
paddingمريحًا داخل الخلايا. - حاذِ العناوين لليسار؛ جرّب
vertical-align: topعلى خلايا متعددة الأسطر. - لوّن الصفوف الزوجية بـ
tr:nth-child(even). - أضف خلفية ناعمة لـ
tr:hover— ثم قارن مع جدول ثانٍ وborder-spacing.
أخطاء شائعة
- ترك الحدود المنفصلة الافتراضية فتبدو الخطوط مزدوجة وفوضوية
- ضبط
border-spacingمعborder-collapse: collapse(يُتجاهل التباعد) - حشو ضئيل يجعل البيانات الكثيفة صعبة القراءة
- تحويم نيون أو تناوب ثقيل يحارب المحتوى
- خلط هذا الدرس مع علامات
list-style(الجلسة السابقة)
ملخص
border-collapse: collapseالافتراضي الهادئ لجداول البيانات- استخدم
separate+border-spacingللفراغ بين الخلايا - العرض والحشو والمحاذاة تشكّل القراءة
- الصفوف المتناوبة والتحويم الخفيف يساعدان المسح
- أبقِ البنية في HTML والمظهر في CSS
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى