الدرس الحادي عشر: المزيد حول الجداول
عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر
للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء
في HTML لن تستطيع معرفته واستخدامه.
ماذا بقي إذاً؟
خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.
Colspan هي اختصار "column span"، Colspan تستخدم في الوسم لتحدد عدد الأعمدة التي ستتمدد لها الخلية:
مثال 1:
سيظهر بهذا الشكل في متصفحك
بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية
مثال 2:
سيظهر بهذا الشكل في متصفحك
ما هي خاصية rowspan؟
كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:
مثال 3:
سيظهر بهذا الشكل في متصفحك
في المثال أعلاه أعطينا الخاصية rowspan القيمة "3"
للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع
فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس
الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.
هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في
التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق
قبل أن تطبقه على HTML.
ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.
عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر
للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء
في HTML لن تستطيع معرفته واستخدامه.
ماذا بقي إذاً؟
خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.
Colspan هي اختصار "column span"، Colspan تستخدم في الوسم
مثال 1:
Cell 1 | ||
خلية 2 | خلية 3 | خلية 4 |
سيظهر بهذا الشكل في متصفحك
خلية 1 | ||
خلية 2 | خلية 3 | خلية 4 |
بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية
مثال 2:
خلية 1 | خلية 2 | |
خلية 3 | خلية 4 | خلية 5 |
سيظهر بهذا الشكل في متصفحك
خلية 1 | خلية 2 | |
خلية 3 | خلية 4 | خلية 5 |
ما هي خاصية rowspan؟
كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:
مثال 3:
خلية 1 | خلية 2 |
خلية 3 | |
خلية 4 |
سيظهر بهذا الشكل في متصفحك
خلية 1 | خلية 2 |
خلية 3 | |
خلية 4 |
في المثال أعلاه أعطينا الخاصية rowspan القيمة "3"
للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع
فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس
الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.
هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في
التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق
قبل أن تطبقه على HTML.
ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.
hassan_dmar- عضو ماهر
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 184
نقاط العضو : 10551
شعبية العضو : 4
الموقع : اول لفة على ايديك اليمين
العمر : 29
تاريخ التسجيل : 16/08/2010
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
- مساهمة رقم 2
رد: الدرس الحادي عشر: المزيد حول الجداول
AbU ALi ElA$Sa$Y- AbU Ali ElAsSaSy SiTe EmPeRoR
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 3295
نقاط العضو : 47459
شعبية العضو : 1740
الموقع : عايش فى منتدى العساسيه
العمر : 31
تاريخ التسجيل : 22/05/2009
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
بطاقة الشخصية
شات المنتدى:
- مساهمة رقم 3
رد: الدرس الحادي عشر: المزيد حول الجداول
شكرررررررررررررر لمرورك
hassan_dmar- عضو ماهر
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 184
نقاط العضو : 10551
شعبية العضو : 4
الموقع : اول لفة على ايديك اليمين
العمر : 29
تاريخ التسجيل : 16/08/2010
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
- مساهمة رقم 4
رد: الدرس الحادي عشر: المزيد حول الجداول
:)