❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

الوسم <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;
}