html الجداول

html دمج خلايا الجدول

آخر تحيين: 06-01-2015

html الإستمارة html تنظيم الجدول


في الجداول المعقدة ، نحتاج في بعض الأحيان لدمج خليتين أو أكثر في خلية واحدة نظرا لتشاركهما نفس المعلومة . و يتم هذا الدمج إما بين

  • الخلايا الأفقية و نستعمل الصفة colspan
  • أو الخلايا العمودية و نستعمل الصفة rowspan
<td colspan="2"> ... </td>

colspan :دمج الخلايا أفقيا

لدمج الخلايا الأفقية نستعمل الصفة colspan و نعطيها القيمة بالأرقام : 2 أو 3 أو ...إلخ . الرقم يدل على عدد الخلايا التي نود دمجَها :

<table>
  <caption>  دمج الخلايا أفقيا </caption>     
  <tr>  
    <td colspan="2">دمج الخلية 1 و الخلية 2 أفقيا </td>
    <td> الخلية 3 </td>      
  </tr>
  <tr>  
    <td> الخلية 4 </td>
    <td> الخلية 5 </td>
    <td> الخلية 6 </td>
  </tr>
  <tr>  
    <td> الخلية 7 </td>
    <td> الخلية 8 </td>
    <td> الخلية 9 </td>
  </tr>
</table>

النتيجة :

دمج الخلايا أفقيا
دمج الخلية 1 و الخلية 2 أفقياالخلية 3
الخلية 4الخلية 5الخلية 6
الخلية 7الخلية 8الخلية 9
لاحظوا جيدا السطر الأول ، لا يضم إلا خليتين بدل ثلاثا . و هذا طبيعي ، لأن الصفة colspan="2" التي أضفناها للخلية الأولى ، تعني أن هذه الخلية تضم خليتين

rowspan :دمج الخلايا عموديا

لدمج الخلايا العمودية ،نستعمل الصفة rowspan

<table>
  <caption>  دمج الخلايا أفقيا </caption>     
  <tr>
    <td> الخلية 1 </td>
    <td> الخلية 2 </td>
    <td> الخلية 3 </td>      
  </tr>
  <tr>  
    <td rowspan="2"> دمج 4 مع 7 عموديا </td>
    <td> الخلية 5 </td>
    <td> الخلية 6 </td>
  </tr>
  <tr>  
    <!-- الخلية 7 تم دمجها مع 4 -->
    <td> الخلية 8 </td>
    <td> الخلية 9 </td>
  </tr>
</table>

النتيجة :

دمج الخلايا عموديا
الخلية 1الخلية 2الخلية 3
دمج 4 مع 7 عمودياالخلية 5الخلية 6
الخلية 8الخلية 9

تم دمج الخلية 4 مع الخلية 7 ، تلاحظون بأن الأمر يختلف نوعا ما عن استخدام colspan ، هنا لم نحذف أي خلية من السطر الثاني الذي يضم الصفة rowspan . بل من السطر الثالث و هذا طبيعي أيضا لأن هذا السطر هو الذي يضم الخلية 7 التي نود إدماجها

يمكنكم الآن إنشاء أي جدول يمر بمخيلتكم مهما كان مُعقّدا ، حتى أنه يمكنكم إدماج الخلايا الأفقية مع الخلايا العمودية في آن واحد ،

سأنهي هذا الدّرس ، بإعطائكم تمرينا ، لتُرسّخوا معلوماتكم . قوموا بإنشاء الجدول التالي :

جودة آداء الموقع
الموقعالآداء
مجموع الزوارالترتيب
www.monsite.com30006/10

التصحيح


خلاصة

لإنشاء الجدول :
نستعمل الوسم الأب <table>
tr : لإنشاء السطور
td : لإنشاء الخلايا
caption : عنوان الجدول
th , thead, tfoot, tbody : لتنظيم الجدول

tfoot : يجب أن تكون دائما قبل tbody
تجنبوا استعمال الصفات الآتية : border, cellpadding, cellspacing, align, valign, char, charOff
لا تستعملوا أبدا الجداول لتصميم الصفحة النموذجية ، طريقة غير محبّذة منذ html4 . إستعملوا الجدول عندما تكون بياناتكم تحتاج فعلا إلى جدول .