دورة html الدرس 8 : الجداول ( الجزء الثالث)

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


وهذا الكود :

خاصة التحكم بطريقة ظهور إطارات الجدول

في دورة برمجة الويب على منتدى طه سوفت





border













  
الأول
  
الصف
   

  
الثاني
  
الصف





box













  
الأول
  
الصف
   

  
الثاني
  
الصف





void













  
الأول
  
الصف
   

  
الثاني
  
الصف





above













  
الأول
  
الصف
   

  
الثاني
  
الصف





below













  
الأول
  
الصف
   

  
الثاني
  
الصف





hsides













  
الأول
  
الصف
   

  
الثاني
  
الصف





vsides













  
الأول
  
الصف
   

  
الثاني
  
الصف





lhs













  
الأول
  
الصف
   

  
الثاني
  
الصف





rhs













  
الأول
  
الصف
   

  
الثاني
  
الصف

طبق الكود على الصفحة :http://www.tahasoft.com/code.htm وجرب بنفسك



الخاصة valign
للتحكم بالانحياز الرأسي لمحتوى الخلايا
لها ثلاثة أشكال
الوضع الافتراضي بدون وضع هذه الخاصة يكون في الوسط
و الوضع bottom للانحياز السفلي
و الوضع top للانحياز العلوي
مثال توضيحي :

أعلى
أسفل
وسط

النتيجة ستكون كالتالي :




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

دورة برمجة الويب على طه سوفت


Html,css
Javascript
Php,mysql,ajax,xml

النتيجة تكون :

لاحظ أن الرقم 3 هو عدد الخلايات التي تم دمجها
و بشكل عام يجب أن تتذكر دوماً أن عدد الخلايا في كل سطر يجب أن يكون نفسه
ففي الكود السابق يوجد في السطر الثاني 3 خلايا و لا يمكن أن نضع الرقم 2 عند الخاصة colspan
وهذه يجب مراعاتها دوماً " عدد الخلايا في كل سطر يجب أن يبقى نفسه حتى نهاية الجدول "



الخاصة rowspan
تستخدم لدمج الخلايا المتجاورة بشكل عمودي معاً
مثال :

tahasoft.com
1
2


3
4

شكل هذه التعليمة مزعج عند التعامل لأول مرة
ولكن مع الممارسة تعتاد عليها



تطبيق عملي ( وظيفة )
بالاعتماد على الصور التالية :



قم بعمل جدول لواجهة موقع بحيث يكون الشكل كالتالي:



في الدرس القادم سنقوم بحل هذا التطبيق
و ربما يكون صعباً في البداية لكن التجربة قبل الدرس ستكون جيدة
ملاحظة : اللون المستخدم الرمادي في الصورة السابقة اسمه silver ويطبق مع الخاصة bgcolor

بالتــــوفيق