Merge Table Cells html
دمج خلايا الجدول في لغة HTML
سوف تتعلم في هذا الدرس كيفية دمج خلايا الجدول table في لغة HTML، سواءً كانت الخلايا في نفس الصف أو في نفس العمود.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Merge Table Cells in HTML
دمج خلايا الجدول في لغة HTML
</>
Merge table cells in HTML
دمج خلايا الجدول في لغة HTML
يمكنك دمج خليتين أو أكثر في الجداول في لغة HTML، إذا كانت الخلايا بجانب بعضها البعض، سواءً كانت بجانب بعضها رأسياً أو أفقياً، وذلك عن طريق:
- colspan attribute تُستخدم هذه الخاصية مع عنصر الخلايا <td> ونضع بداخلها عدد الخلايا التي سوف يتم دمجها أفقياً في نفس الصف.
- rowspan attribute تُستخدم هذه الخاصية مع عنصر الخلايا <td> ونضع بداخلها عدد الخلايا التي سوف يتم دمجها رأسياً بين الصفوف، وبين بعضها البعض-أي الخلايا على نفس العمود-.
</>
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
