صفحة تجريبية مرحبا
- الحصول على الرابط
- X
- بريد إلكتروني
- التطبيقات الأخرى
🎨 شرح عملي لتنسيق جدول باستخدام 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 |
📌 ملاحظات ختامية
هذا التنسيق يجعل الجدول أكثر وضوحًا وسهولة قراءة، خاصة للمحتوى العربي. "طباعة".
- الحصول على الرابط
- X
- بريد إلكتروني
- التطبيقات الأخرى
المشاركات الشائعة من هذه المدونة
reset إعادة ضبط... style = {};
reset
إعادة ضبط...
style = {};
📘 مكتبة المصطلحات الخطية 📘 مكتبة المصطلحات الخطية تعرّف على أبرز المصطلحات البرمجية في تصميم الخط العربي من خلال تجربة تفاعلية شاملة. ⚙️ إعدادات 🎛️ أوضاع 📐 أبعاد ✨ شكل 👓 تصحيحات 📂 الكل x-height ارتفاع جسم الحرف المتوسط مثل السين أو العين. font.xHeight = 500; لغة البرمجة: JavaScript الدالة المستخدمة: ضبط خاصية xHeight داخل كائن font. reset إعادة ضبط... style = {}; apply تنفيذ التعديلات أو تفعيل الإعدادات الجديدة. applyStyle(fontSettings); save حفظ الحالة أو النموذج بصيغ متعددة. saveFont("MyFont.otf"); preview عرض سريع لما سيبدو عليه الخط بعد التعديل. showPreview(glyph); roundness درجة استدارة الحواف والزوايا داخل الحرف. cornerRadius = 12; sharpness حدة الزوايا أو الأطراف الهندسية للحرف. if (angle < 30) edgeType = "sharp"; ...
المصطلحات للخطوط
كروت المصطلحات للخطوط 📘 كروت المصطلحات البرمجية setting إعدادات واجهة أو قيمة افتراضية للخط. let settings = { size: 14, family: "Arial" }; reset إعادة ضبط الحرف أو النموذج للقيمة الأساسية. style = {}; // reset جميع الإعدادات flop it! قلب اتجاه الحرف أو العنصر أفقياً. transform: scaleX(-1); undo تراجع عن آخر تعديل على الشكل أو الإعدادات. history.pop(); render(history.at(-1)); mode الوضع الحالي للتعامل مع الحرف (رسم / تعديل). if (mode === "edit") enableEditor(); dummy عنصر وهمي أو اختبار لا يظهر في الإخراج النهائي. let dummyGlyph = new Glyph("test"); nerd وضع مطوّر يعرض إعدادات متقدمة للخط. showAdvancedControls(true); unit width عرض الوحدة الأساسية للحرف في التصميم. font.unitWidth = 600; pen width سماكة القلم المستخدم في رسم الحرف. strokeWidth = ...
تعليقات
إرسال تعليق