منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



أهلا وسهلا بك في مؤسسة فينكس تكنالوجي ®
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


منتدي متخصص في صيانة الانضمة والشبكات المعلوماتية وتطوير المواقع والمنتديات . وافلام ومسلسلات عالمية مختلفة
 
الرئيسيةالبوابة رمضانيةأحدث الصورالتسجيلدخول

شاطر|


بيانات كاتب الموضوع
الدرس الحادي عشر: المزيد حول الجداول HTML
كاتب الموضوعرسالة
المعلومات
الكاتب:
اللقب:

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: الدرس الحادي عشر: المزيد حول الجداول HTML الدرس الحادي عشر: المزيد حول الجداول HTML Empty16/11/2014, 17:25

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




الدرس الحادي عشر: المزيد حول الجداول
عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في 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:

الكود:

   <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>
   


سيظهر بهذا الشكل في متصفحك
خلية 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
بنفسك.















 الموضوع الأصلي : الدرس الحادي عشر: المزيد حول الجداول HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: الدرس الحادي عشر: المزيد حول الجداول HTML الدرس الحادي عشر: المزيد حول الجداول HTML Empty28/11/2014, 16:14

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




جزاك الله كل خيرا علي الموضوع















 الموضوع الأصلي : الدرس الحادي عشر: المزيد حول الجداول HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» الدرس السادس: المزيد من العناصر HTML
» الدرس العاشر: الجداول HTML
» الدرس الحادي عشر: تغيير المتغيرات من خلال النماذج
» الدرس الثاني: ما هي HTML؟
» الدرس السابع: الخصائص HTML



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام