انتقل إلى محتوى الدرس

Table Sizing Border Basics تحجيم الجداول وإطاراتها الأساسية

تعلم تنسيق جداول البيانات في لغة CSS بدمج حدود الخلايا وضبط الحشوات والمحاذاة وتمييز الصفوف المتناوبة والتفاعلية وإضافة التمرير الأفقي الآمن للهواتف.
3 صفوف تعليمية
لغة CSS
5,946 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تنكمش عناصر الجداول <table> غير المنسقة افتراضياً على قدر نصوصها الداخلية دون رسم أي خطوط فاصلة بين الصفوف والأعمدة، ما يصعّب تتبع البيانات الرقمية المتجاورة. يمنح ضبط width: 100%; على صنف الجدول امتداداً متوازناً يملأ الحاوية، بينما يرسم تطبيق border على خلايا الرأس <th> وخلايا البيانات <td> حدوداً واضحة ومنظمة.

كما تتحكم خاصية table-layout في خوارزمية توزيع عرض الأعمدة؛ فالوضع الافتراضي auto يفحص أطول محتوى في كافة الصفوف أولاً، بينما يثبت الوضع fixed نسب الأعمدة فوراً بناءً على الصف الأول فقط.

الصف 2 صورة توضيحية
مخطط توضيحي يقارن الحدود المنفصلة والمدمجة وتثبيت عرض الأعمدة في الجداول
الصف 3 ملاحظة هامة