الدرس السادس 6 || دمج الجداول

اللَّهُمَّ انْفَعْنَا بِمَا عَلَّمْتَنَا , وَعَلِّمْنَا مَا يَنْفَعُنَا , وَزِدْنَا عِلْمًا إِلَى عِلْمِنَا

السلام عليكم ورحمة الله وبركاته..

كيفكم جميعاً أن شاء الله تمام !؟

وما تشكون من بأس!

اليوم موضوعنا راح نكتب فيه أكواد مهمة جداً جداُ

وهي تابعة للدرس الماضي وهو الجداول

تعلمنا كيف ننشى جدول حسب الصفوف والأعمدة

لكن هذا الشكل كيف نتمكن من عمله

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

طيب شوف هذه الصورة شرح لخاصيتين
وهما




طيب هذا هو جدولنا


نريد دمج رقم 13 مــع 00 بجانبها على اليمين

ماهي الخاصية التي سوف نستخدمها
وكيف نستخدمها ؟

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

CLOSPAN="2"

تنويةّ:-
أذا دمجنا الصف بالذي بجانبه سوف تأتي هكذا




وأقول لكم لأتخفُ فهذا أمر طبيعي
أننا عندما دمجنا لم نحذف الخلية التي نريد الدمج معها
من الملف
فعندما نحذف هذا الخلية
كما الأن


يصبحُ جدولنا هكذا



تم الدمج بنجاح

طيب نريد دمج
13 مع 9 و 00 التي بجانبها

أقول لكم لزم ندمج 9 و 00 من ثم ندمجها مع 13

لايمكن دمج أكثر من عمود مع صف او اكثر والعكس صحيح

نعمل مع 9 كما عملنا مع 13

CLOSPAN="2"

ونحذف رقم 00 من الملف ويأتي اسفل رقم 9 ""طبيعياَ""

يصبح كهذا



الأن نأتي للجزء ألأخرمن الدرس وهو دمج الأعمدة

وهو نفس دمج الصفوف لكن نغير الأمر أو الخاصيه من

ROWSPAN="2"

ونحذف التي أسفلها

وذكرنا بالتنوية الأخير

"
COLSPAN = تاتي من اليسار الى اليمين فقط
ROWSPAN = تاتي من أعلى الى أسفل فقط
"

نريد الأن دمج رقم 13 مع 9 وحذف رقم 9 من الملف

نرى الكود الخاص بذلك


صورة أخيرة للجدول بعد الدمج النهائي




الحمدلله على الأنتهاء من الجدول

والمعذرة على التأخير في طرح هذا الاسبوع لمشاغل الدراسة

واجب الدرس

هذا هو الملف حمله وعدل عليه بحيث

تدمج 00 مع 10 = ROWSPAN
&
تدمج 6 مع 5 = COLSPAN

كان هذا الدرس الجميل البسيط أهم الدروس في
HTML
وألأنن نودعكم والى الأسبوع القادم

في أمان الله


سُبْحَانَكَ اللَّهُمَّ وَبِحَمْدِكَ أَشْهَدُ أَنْ لا إِلهَ إِلأَ انْتَ أَسْتَغْفِرُكَ وَأَتْوبُ إِلَيْكَ

---

التعديل الأخير تم بواسطة JERY7 ; 03-17-2014 الساعة 01:57 PM