زهير طه

22

6,388

دورة html الدرس 7 : الجداول ( الجزء الثاني)


تحدثنا في الدرس السابق عن إنشاء الجداول و محتوياتها من صفوف و أعمدة
وبدأنا الحديث عن خصائص الجدول و شرحنا الخاصة border
وسنكمل حديثنا عن باقي الخواص للجدول و خلاياه

خاصة تباعد الخلايا cellspacing
طريقة كتابتها : نكتب
cellspacing="رقم"

حيث توضع ضمن وسم table لأنها خاصة تابعة له
مثال:





tahasoft tahasoft

الكود السابق يقوم بإظهار مايلي:

وقد حددت على الجدول بأسهم صفراء المسافة بين الخلايا
و الرقم 55 في الكود السابق يعني مسافة 55 بكسل بين الخلايا
جرب أن تقوم بتكبير و تصغير الرقم لرؤية النتائج
و أذكر كالعادة بأن صفحة تجريب الأكود على الرابط التالي :
http://www.tahasoft.com/code.htm



خاصة ملئ الخلية cellpadding
تستعمل كسابقتها ولكن وظيفتها وضع المسافة المحيطة بمحتوى الخلية
وستتوضح الفكرة بالمثال التالي:





tahasoft tahasoft

هذه النتيجة مع التوضيح بالأسهم على ما تفعله الخاصة


وفي الصورة التالية توضيح للفرق بين الخاصتين

حيث الموضح بسهم أخضر هي cellspacing
و الموضح بالأحمر : cellpadding



خاصة الانحياز align :
نستخدمها لتحديد جهة الجدول إما من اليمين أو اليسار أو الوسط أو بارز
في المثال التالي سنقوم بإنشاء جداول كل منها منحاز بجهة
وإذا اطلعت على الكود التالي ستفهم هذه الخاصة:


يمين





وسط





يسار





بارز


ويمكن تطبيق هذه الخاصة على td أو tr
و في المثال التالي تم تطبيقها على كل خلية td لوحدها طبق المثال :











الخاصية dir
لتحديد جهة محتوى خلايا الجدول وهذه الخاصة تشمل كلاً من الجدول أو الخلايا
أي يمكن تطبيقها ضمن table أو ضمن td أو tr
المثال التالي مطبق على الخلايا td :
يسار وسط يمين







وفي المثال التالي تم تطبيقها على مستوى كامل الجدول:
من اليمين لليسارمن اليسار لليمين








الخاصة width للتحكم بالعرض
تطبق على الخلايا أو الجدول
وفي الأمثلة التي وردت أعلاه لعلك لاحظت كيف تم تطبيقها على الجدول



الخاصة heigh
للتحكم بالارتفاع , وتستخدم على مستوى خلايا الجدول فقط
لاحظ المثال التالي :
دورة برمجة الويبلغة html





tahasofttahasoft




ملاحظة : يمكن التحكم بشكل أفضل بخصائص العرض و الارتفاع للجدول و خلاياه عن طريق css
وسنرى ذلك في الدورة القريبة بعد html فوراً




خاصة caption
تستخدم لوضع عنوان للجدول
مثال:




















جدول الفواتير
الشهر الفاتورة
كانون الثاني $100
آذار $50




حيث يأتي العنوان بشكل متوسط في أعلى الجدول حتى لو تم وضع الوسم caption في نهاية الجدول أو بين وسوم tr



خاصية bgcolor
للتحكم بلون الخلفية سواءً للجدول table أو الخلايا td,tr
مثال:

























جدول الفواتير
الشهر الفاتورة
كانون الثاني $100
كانون الأول $200
آذار $50




وهذا الكود لجدول الفواتير للمثال السابق مع التلوين
ولاحظ كيف وضعنا اللون الأحمر للجدول كاملاً red
ثم خصصنا اللون الليموني lime لصف كامل tr





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

التعليقات (1)

حسن صحارى     
روووووووووووعة ياكبير
بإنتظار الدرس القادم