HTML

Merge Table Cells html
دمج خلايا الجدول في لغة HTML

سوف تتعلم في هذا الدرس كيفية دمج خلايا الجدول table في لغة HTML، سواءً كانت الخلايا في نفس الصف أو في نفس العمود.

التاريخ

30 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

6374

المواضيع

12
الشروحات chevron_left Merge Table Cells html chevron_left HTML

Merge Table Cells in HTML
دمج خلايا الجدول في لغة HTML

</> Merge table cells in HTML
دمج خلايا الجدول في لغة HTML

يمكنك دمج خليتين أو أكثر في الجداول في لغة HTML، إذا كانت الخلايا بجانب بعضها البعض، سواءً كانت بجانب بعضها رأسياً أو أفقياً، وذلك عن طريق:

  • colspan attribute تُستخدم هذه الخاصية مع عنصر الخلايا <td> ونضع بداخلها عدد الخلايا التي سوف يتم دمجها أفقياً في نفس الصف.
  • rowspan attribute تُستخدم هذه الخاصية مع عنصر الخلايا <td> ونضع بداخلها عدد الخلايا التي سوف يتم دمجها رأسياً بين الصفوف، وبين بعضها البعض-أي الخلايا على نفس العمود-.
تعمل خاصية colspan attribute من اليسار إلى اليمين، أما خاصية rowspan attribute فتعمل من الأعلى إلى الأسفل.

</> Colspan attribute in HTML
خاصية colspan في لغة HTML

تُستخدم خاصية colspan لدمج خلايا الجدول أفقياً في لغة HTML، حيث يتم تحديد عدد الخلايا التي سوف يتم دمجها والتي يجب أن تكون على نفس table row الصف -على نفس السطر-.


قيمة الخاصية colspan:

  • يُكتب بداخلها number رقم، لتحديد عدد الخلايا المدموجة.
  • القيمة الافتراضية بدون الخاصية colspan هي صفر، والتي تعني عدم وجود خلايا مدموجة.
  • تُستخدم خاصية colspan مع عنصر <td>  وعنصر <th> فقط.
colspan attribute

دمج خليتين معاً عن طريق الخاصية colspan ، لاحظ الصف الثاني -السطر الثاني- في المثال التالي.

<tr>
   <td>Mohamed</td>
   <td colspan="2">Adly</td>
   <td>33</td>
   <td>PHP</td>
</tr>
colspan attribute with number value

استخدام قيمة number =3 داخل خاصية colspan attribute لدمج ثلاثة خلايا معاً على نفس الصف.

<tr>
   <td>Mohamed</td>
   <td colspan="3">Adly</td>
   <td>33</td>
</tr>

</> Rowspan attribute in HTML
خاصية rowspan في لغة HTML

تُستخدم خاصية rowspan لدمج خلايا الجدول رأسياً في لغة HTML، حيث يتم تحديد عدد الخلايا التي سوف يتم دمجها والتي يجب أن تكون على نفس table column العمود.


قيمة الخاصية rowspan:

  • يُكتب بداخلها number رقم، لتحديد عدد الخلايا المدموجة.
  • القيمة الافتراضية بدون الخاصية colspan هي صفر، والتي تعني عدم وجود خلايا مدموجة.
  • تُستخدم خاصية rowspan مع عنصر <td>  وعنصر <th> فقط.
rowspan attribute

دمج خليتين معاً عمودياً (رأسياً) عن طريق الخاصية rowspan ، لاحظ العمود الأخير "Study" في المثال التالي.

<tr>
      <td>Mohamed</td> 
      <td>Adly</td>
      <td>[email protected]</td>
      <td>33</td>
      <td rowspan="2">PHP</td>
</tr>
rowspan attribute with number value

استخدام قيمة number =3 داخل خاصية rowspan attribute لدمج ثلاثة خلايا معاً على نفس العمود.

<tr>
      <td>Mohamed</td> 
      <td>Adly</td>
      <td>[email protected]</td>
      <td>33</td>
      <td rowspan="3">PHP</td>
    </tr>
Align text in table data

محاذاة النصوص في الخلايا باستخدام خاصية align مع عناصر <td> كما يمكن استخدام خاصية align مع عناصر <th> أيضاً.

<tr>
   <td>Mohamed</td> 
   <td colspan="2">Adly</td>
   <td>33</td>
   <td rowspan="2" align="center">PHP</td>
</tr>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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