عنوان المشاركة

🎨 شرح عملي لتنسيق جدول باستخدام CSS

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

🔧 خصائص جدول HTML مع CSS

• width: 100%: (📌 يُستخدم لتوسيع الجدول ليشغل كامل عرض الصفحة، وهذا مفيد لعرض البيانات بشكل متناسق) ليمتد الجدول بعرض الصفحة بالكامل.
• border-collapse: ()لتوحيد حدود الخلايا.
• font-family: (📌 يدمج الحدود بين الخلايا لتظهر كخط واحد مشترك، مما يعطي مظهرًا أكثر احترافية)نستخدم خط Cairo لدعم العربية بشكل أنيق.
• direction: rtl: (📌 يُوجّه عرض الجدول من اليمين إلى اليسار، وهو ضروري للنصوص المكتوبة باللغة العربية) لأن النص عربي، نستخدم الاتجاه من اليمين لليسار.
• background-color: (📌 يضبط خلفية الجدول بلون رمادي ثلجي فاتح جدًا (Cultured) ليجعل العناصر الداخلية أكثر وضوحًا) نختار لون خلفية فاتح للراحة البصرية.

🖋️ تنسيق الخلايا النصية

• padding: لجعل المحتوى داخل الخلية له فراغ مريح.
• border: حدود رقيقة تبرز هيكل الجدول.
• text-align: لمحاذاة النص يمينًا.
• color: اخترنا #0a0a0a لأنه فحمي داكن واضح.
• text-shadow: ظل بسيط للنص لزيادة الوضوح.

🎨 شرح الألوان المستخدمة

الكود	الاسم التقريبي	الاستخدام
#f9f9f9	Cultured	خلفية الجدول
#ddd	Light Gray	حدود الخلية
#0a0a0a	Charcoal Black	لون الخط
#ccc	Silver Sand	ظل النص
#ffddc1	Peach Puff	خلفية رأس الجدول
#fff4ee	Linen	صفوف زوجية
#ffe3d1	Champagne	تأثير hover

📌 ملاحظات ختامية

هذا التنسيق يجعل الجدول أكثر وضوحًا وسهولة قراءة، خاصة للمحتوى العربي. "طباعة".