منتديات احلى حكاية
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات احلى حكاية دخول

موقع خاص بالتصاميم وتحويل الاستايلات واكواد حصريه لخدمه مواقع احلى منتدى


descriptionالدرس الحادي عشر: المزيد حول الجداول Emptyالدرس الحادي عشر: المزيد حول الجداول

more_horiz
الدرس الحادي عشر: المزيد حول الجداول



عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر
للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء
في HTML لن تستطيع معرفته واستخدامه.


ماذا بقي إذاً؟



خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.


Colspan هي اختصار "column span"، Colspan تستخدم في الوسم

الكود:

<td>
لتحدد عدد الأعمدة التي ستتمدد لها الخلية:



مثال 1:



الكود:


   <table border="1">
     <tr>
      <td colspan="3">Cell 1</td>
     </tr>
     <tr>
      <td>خلية 2</td>
      <td>خلية 3</td>
      <td>خلية 4</td>
     </tr>
   </table>






سيظهر بهذا الشكل في متصفحك





خلية 1
خلية 2 خلية 3 خلية 4





بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية



مثال 2:

الكود:


[center]

   [/center]

   [center]   
   <table border="1">
     <tr>
      <td colspan="2">خلية 1</td>
      <td>خلية 2</td>
     </tr>
     <tr>
      <td>خلية 3</td>
      <td>خلية 4</td>
      <td>خلية 5</td>
     </tr>
   </table>
   [/center]





سيظهر بهذا الشكل في متصفحك



خلية 1 خلية 2
خلية 3 خلية 4 خلية 5


ما هي خاصية rowspan؟



كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:



مثال 3:



الكود:


   <table border="1">
     <tr>
      <td rowspan="3">خلية 1</td>
      <td>خلية 2</td>
     </tr>
     <tr>
      <td>خلية 3</td>
     </tr>
     <tr>
      <td>خلية 4</td>
     </tr>
   </table>
   





سيظهربهذا الشكل في متصفحك



خلية 1 خلية 2
خلية 3
خلية 4





في المثال أعلاه أعطينا الخاصية rowspan

القيمة "3"
للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع
فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس
الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.



هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في
التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق
قبل أن تطبقه على HTML.



ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.

الدرس الثانى عشر: تصميم ( css )

الدرس الثاني عشر: التصميم (CSS)

descriptionالدرس الحادي عشر: المزيد حول الجداول Emptyرد: الدرس الحادي عشر: المزيد حول الجداول

more_horiz
جزاك الله خير و بارك الله
جعله الله في ميزان حسناتك

descriptionالدرس الحادي عشر: المزيد حول الجداول Emptyرد: الدرس الحادي عشر: المزيد حول الجداول

more_horiz
شكرا

أصلا لغة الهتمل سهلة

descriptionالدرس الحادي عشر: المزيد حول الجداول Emptyرد: الدرس الحادي عشر: المزيد حول الجداول

more_horiz
شكراً جزيلاً للمجهود الرآئع .. في ميزان حسناتك ان شاء الله ..
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
power_settings_newقم بتسجيل الدخول للرد