دورة 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


















tahasoft
tahasoft

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



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

جدول الفواتير
  
  

    
الشهر
    
الفاتورة
  

  

    
كانون الثاني

    
$100
  
  

    
آذار
    
$50
  

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



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

جدول الفواتير
  
  

    
الشهر
    
الفاتورة
  

  

    
كانون الثاني

    
$100
  

    
كانون الأول

    
$200
  
  

    
آذار
    
$50
  

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





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