زهير طه

45

4,474

دورة 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,cssJavascriptPhp,mysql,ajax,xml

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

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



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










tahasoft.com 1 2
3 4


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



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



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



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

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

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

منهـل     
مشكور يا معلم
زهير طه     
شكراً لمروركم
و ان شاء الله بدروس الجداول هذه أكون شملت كل ما يتعلق بالجداول
إلا ما يخص التنسيق بـ css
navigateur     
دورة حلوة و ممتازة انتظر جديدك

بالتوفيق
حسن صحارى     
تمام معلم
بس بالنسبة للتطبيق
يعني نعتمد في التصميم
على هذه الصور:

أم لا ؟
والنتيجة رح تظهر نفس الصورة بالأعلى ؟