HTML الوسم <colgroup>
تعريفه
نستخدم الوسم <colgroup> لتقسيم أعمدة الجدول إلى مجموعات بهدف تعديل خصائص ظهورها مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.
إستخدام الوسم <colgroup> لوحده يتيح لك تقسيم الجدول لمجموعتين كحد أقصى و هذا في الأغلب غير مفيد.
لتقسيم أعمدة الجدول بحرية مطلقة نستخدم وسوم <col> بداخله على النحو التالي.
<table> <colgroup> <col> <col> ... </colgroup> </table>
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <col>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائصه
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
الخاصية span
في حال عدم وضع أي وسم <col> بداخل الوسم <colgroup> يمكن إضافتها له لتحديد عدد الأعمدة في المجموعة كم سيكون.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
الوسمين <colgroup> و <col> كلاهما يملكان الخاصية span و في الحالتين فإن هذا الخاصية تستخدم لتحديد عدد الأعمدة التابعة لنفس المجموعة.
الفرق الوحيد بالنسبة للوسم <colgroup> هو أن هذه الخاصية يمكن استخدامها لتحديد عدد أعمدة المجموعة الأولى فيه فقط.
إستخدامه
في المثال التالي قمنا بإنشاء جدول يتألف من 3 أعمدة, و قمنا بتقسيم أعمدته لمجموعتين كالتالي:
- المجموعة الأولى تتألف من أول و ثاني عمود و لون خلفيتها جعلناه أزرق باهت.
- المجموعة الثانية تتألف من ثالث عمود (أي العامود المتبقي) و لون خلفيته هو اللون الإفتراضي للجدول.
ملاحظة: الخاصية style أضفناها للوسم <colgroup> لتحديد لوان خلفية المجموعة التي يمثلها بشكل مباشر بواسطة الخاصية background-color بلغة CSS.
مثال
<table> <colgroup span="2" style="background-color: #d7d9f2;"></colgroup> </table>
في المثال التالي قمنا بإنشاء جدول يتألف من 4 أعمدة, و قمنا بتقسيم أعمدته لثلاث مجموعات كالتالي:
- المجموعة الأولى تتألف من أول عمود و لم نجري أي تعديل على تصميمها.
- المجموعة الثانية تتألف من العمودين الثاني و الثالث و لون خلفيتها جعلناه أزرق باهت.
- المجموعة الثالثة تتألف من رابع عمود و لون خلفيتها جعلناه أحمر باهت.
ملاحظة: الخاصية style أضفناها في الوسم <col> الثاني و الثالث لتحديد لون الخلفية بشكل مباشر بواسطة الخاصية background-color بلغة CSS.
المثال الثاني
<table> <colgroup> <col> <col span="2" style="background-color: #d7d9f2;"> <col style="background-color: #ffe8d4;"> </colgroup> </table>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
colgroup {
display: table-column-group;
}
