خاصية [colspan]: تُستخدم خاصية colspan مع عنصر الخلايا <td> لتحديد عدد الخلايا التي سيتم دمجها أفقياً في نفس الصف.
خاصية [rowspan]: تُستخدم خاصية rowspan مع عنصر الخلايا <td> لتحديد عدد الخلايا التي سيتم دمجها رأسياً بين الصفوف في نفس العمود.

لاحظ أن

تعمل خاصية [colspan] من اليسار إلى اليمين، بينما تعمل خاصية [rowspan] من الأعلى إلى الأسفل.

</> Colspan Attribute in HTML
خاصية Colspan في HTML

تُستخدم خاصية [colspan] لدمج خلايا الجدول أفقياً في لغة HTML، حيث يتم تحديد عدد الخلايا التي سيتم دمجها والتي يجب أن تكون في نفس الصف.

وهذه الخاصية تأخذ قيمة ["colspan="value] لتحديد عدد الخلايا المدموجة.

قيمة خاصية [colspan]:

يُكتب بداخلها عدد صحيح لتحديد عدد الخلايا المدموجة.
القيمة الافتراضية عند عدم استخدام الخاصية [colspan] هي 1، مما يعني عدم وجود دمج للخلايا.
تُستخدم خاصية [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

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

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

جربها بنفسك

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

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

وهذه الخاصية تأخذ قيمة ["rowspan="value] لتحديد عدد الخلايا المدموجة.

قيمة خاصية [rowspan]:

يُكتب بداخلها عدد صحيح لتحديد عدد الخلايا المدموجة.
القيمة الافتراضية عند عدم استخدام الخاصية هي 1، مما يعني عدم وجود دمج للخلايا.
تُستخدم خاصية 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

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

<tr>
      <td>Mohamed</td> 
      <td>Adly</td>
      <td>[email protected]</td>
      <td>33</td>
      <td rowspan="3">PHP</td>
    </tr>

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Merge Table Cells HTML HTML