HTML الوسم <colgroup>

تعريفه

نستخدم الوسم <colgroup> لتقسيم أعمدة الجدول إلى مجموعات بهدف تعديل خصائص ظهورها مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.

إستخدام الوسم <colgroup> لوحده يتيح لك تقسيم الجدول لمجموعتين كحد أقصى و هذا في الأغلب غير مفيد.
لتقسيم أعمدة الجدول بحرية مطلقة نستخدم وسوم <col> بداخله على النحو التالي.

<table>
	<colgroup>
		<col>
		<col>
		...
	</colgroup>
</table>
	

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <col>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية span

في حال عدم وضع أي وسم <col> بداخل الوسم <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;
}