HTML - Table Colgroup تنسيق الأعمدة

استخدام <colgroup> لتنسيق الأعمدة في HTML

عنصر <colgroup> في HTML يُستخدم لتحديد مجموعة من الأعمدة داخل جدول وتطبيق تنسيق معين عليها.

🟢 مفيد إذا كنت تريد التحكم بعرض أو لون عمود معين بدون التأثير على الصفوف الأخرى.

---

✅ الصيغة العامة (Syntax):

<table>
  <colgroup>
    <col style="..."/>
    <col style="..."/>
  </colgroup>
  <tr>...</tr>
</table>

⬅ يتم وضع <colgroup> مباشرة بعد وسم <table> وقبل الصفوف <tr>.

---

🧪 مثال عملي: تغيير لون عمود

<table>
  <colgroup>
    <col style="background-color:lightblue">
    <col>
  </colgroup>
  <tr>
    <th>اسم</th>
    <th>عمر</th>
  </tr>
  <tr>
    <td>منى</td>
    <td>22</td>
  </tr>
</table>

⬅ العمود الأول سيظهر بخلفية زرقاء فاتحة.

---

✅ استخدام span مع <col>

<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>

⬅ هذه الطريقة تطبق النمط على عمودين متتاليين.

---

🔍 ملاحظات مهمة:

• <colgroup> لا يُظهر أي محتوى مرئي، فقط يُستخدم للتنسيق.
• يمكن استخدام أكثر من <col> داخل <colgroup> لتطبيق أنماط مختلفة على كل عمود.
• لا يمكن استخدام rowspan أو colspan مع <colgroup> أو <col>.