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

Table Cell Padding Alignment حشوة الخلايا ومحاذاة محتواها

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

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

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

تعتمد سهولة قراءة الجداول على منح الخلايا حشوة داخلية مريحة مثل padding: 12px 16px; على خلايا الرأس والبيانات معاً. ومن المهم الانتباه إلى أن المتصفحات توسّط نصوص خلايا الرأس <th> افتراضياً بينما تحاذي خلايا البيانات <td> نحو بداية السطر، ما يخلق عدم تطابق بصري بين عنوان العمود ومحتواه.

لذلك اضبط text-align صراحة على خلايا الرأس لتطابق اتجاه البيانات — right في العربية و left في الإنجليزية — مع ضبط المحاذاة العمودية عبر vertical-align: middle; أو top عند تفاوت عدد الأسطر داخل الصف الواحد.

الصف 2 ملاحظة هامة