شرح صفوف ومحتوى الفقرة
عند تشخيص أبعاد الأعمدة أو سبب عدم ظهور لون التمرير في أدوات المطور DevTools، راجع تبويب الأنماط المحسوبة على عنصر الجدول وخلايا الرأس والبيانات للتأكد من تفعيل border-collapse: collapse; وعدم تغطية الخلايا لخلفية الصفوف.
| الخاصية | العنصر المستهدف | أبرز القيم | الوظيفة الهندسية |
|---|---|---|---|
border-collapse | <table> | separate، collapse | دمج جدران الخلايا المزدوجة في خط شبكي واحد |
border-spacing | <table> | 8px، 10px 6px | تحديد مسافة الفراغ بين الخلايا في الوضع المنفصل |
table-layout | <table> | auto، fixed | تثبيت نسب عرض الأعمدة بسرعة بناءً على الصف الأول |
caption-side | <table> | top، bottom | تحديد موضع عنوان الجدول الدلالي في الأعلى أو الأسفل |
empty-cells | <table> | show، hide | إخفاء إطارات الخلايا الفارغة في الوضع المنفصل |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اجمع بين width: 100%; و border-collapse: collapse; لبناء جداول ذات خطوط مفردة أنيقة، وأضف حشوة مريحة ومحاذاة متطابقة لخلايا الرأس والبيانات، وميّز الصفوف عبر .table-row-alt و tr:hover مع إحاطة الجداول العريضة بحاوية overflow-x: auto;. الخطوة التالية — انتقل إلى درس الشفافية في لغة CSS لإتقان مقياس الشفافية وتأثيرها على الأبناء والتفاعلات البصرية.