انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: العناصر الداخلية لعنصر table في لغة HTML

The Element Colgroup Within the Table Element in HTML عنصر Colgroup داخل عنصر Table في HTML

في هذا الدرس، ستتعلم عن العناصر التي تُستخدم داخل الجداول في لغة HTML، مثل عنصر <caption> وعنصر <colgroup>.

1 صفوف تعليمية
لغة HTML
4,239 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يُستخدم عنصر <colgroup> لعمل تنسيقات لأعمدة محدّدة، مثل تغيير ألوان خلفيات بعض الأعمدة، باستخدام عنصر <col> في لغة HTML.


  • يوضع col داخل colgroup لوصف عمود أو أكثر. ويمكن بدلًا من أبناء col استعمال span على colgroup نفسه لوصف مجموعة أعمدة.

  • تُستخدم خاصية span مع عنصر <col> لتحديد عدد الأعمدة التي سيتم تطبيق التنسيق عليها، مثل: ⁦<col span="2">⁩.

  • لتلوين خلفية الأعمدة استخدم CSS، مثل ⁦style="background-color:yellow"⁩. كانت bgcolor مستخدمة في شفرة قديمة.
عنصر Colgroup داخل عنصر Table في HTML

Table Colgroup Element

استخدام CSS background-color والخاصية span مع عنصر <col> وذلك ضمن عنصر <colgroup>، حيث تكون قيم background-color عبارة عن ألوان، بينما تكون قيم الخاصية span عبارة عن عدد الأعمدة التي سنطبق عليها التنسيق.

HTML 
<colgroup>
  <col span="3" style="background-color:yellow">
</colgroup>
جرّب بنفسك
جرّب بنفسك

Using <colgroup> to Apply Different Colors to Table Columns

استخدام خاصية CSS background-color لإضافة لون مختلف لخلفية كل عمود في الجدول بشكل منفرد.

Using colgroup to Apply Different Colors to Table Columns

HTML 
<colgroup>
  <col style="background-color:yellow">
  <col style="background-color:lightblue">
  <col style="background-color:red">
  <col style="background-color:palegreen">
  <col style="background-color:pink">
</colgroup>
جرّب بنفسك
جرّب بنفسك

Customizing Specific Column Colors in a Table with colgroup

استخدام خاصية CSS background-color لتطبيق لون على خلفية كل عمود من الجدول إلا العمود الأخير.

HTML 
<colgroup>
  <col style="background-color:yellow">
  <col style="background-color:lightblue">
  <col style="background-color:red">
  <col style="background-color:palegreen">
</colgroup>
جرّب بنفسك
جرّب بنفسك

جميع فقرات هذا الدرس (العناصر الداخلية لعنصر table في لغة HTML)