انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 20
دورة لغة HTML

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

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
12,709
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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

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


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

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

المقصود أن خلية واحدة تشغل مواضع عدة أعمدة أو صفوف؛ السمة لا تجمع نصوص خلايا موجودة تلقائيًا. احذف الخلايا التي تغطيها الخلية الممتدة من الصفوف المعنية حتى لا يتداخل البناء.

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

Colspan Attribute in HTML خاصية Colspan في HTML

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

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

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


  • يكتب عدد صحيح من 1 إلى 1000 لتحديد عدد الأعمدة التي تشغلها الخلية.

  • القيمة الافتراضية عند عدم استخدام الخاصية [colspan] هي 1، مما يعني عدم وجود دمج للخلايا.

  • تُستخدم خاصية [colspan] مع عنصري <td> و <th> فقط.

Colspan Attribute

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

HTML 
<tr>
   <td>Mohamed</td>
   <td colspan="2">Adly</td>
   <td>33</td>
   <td>PHP</td>
</tr>
جرّب بنفسك
جرّب بنفسك

Colspan Attribute with Number Value

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

HTML 
<tr>
   <td>Mohamed</td>
   <td colspan="3">Adly</td>
   <td>PHP</td>
</tr>
جرّب بنفسك
جرّب بنفسك

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

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

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

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

  • يكتب عدد صحيح من 1 إلى 65534 لتحديد عدد الصفوف التي تشغلها الخلية، أو 0 لتمتد حتى نهاية مجموعة الصفوف الحالية. لا تمتد خلية واحدة عبر مجموعتي صفوف مختلفتين.

  • القيمة الافتراضية عند عدم استخدام الخاصية هي 1، مما يعني عدم وجود دمج للخلايا.

  • تُستخدم خاصية rowspan مع عنصري <td> و <th> فقط.

rowspan attribute

دمج خليتين معاً عمودياً باستخدام الخاصية [rowspan]، لاحظ العمود [Study] الأخير في المثال التالي.

HTML 
<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 لدمج ثلاثة خلايا معاً على نفس العمود.

HTML 
<tr>
      <td>Mohamed</td> 
      <td>Adly</td>
      <td>[email protected]</td>
      <td>33</td>
      <td rowspan="3">PHP</td>
    </tr>
جرّب بنفسك
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…