HTML الوسم <col>

تعريفه

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

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

بشكل عام, الوسم <col> يمثل عامود واحد في الجدول في حال لم تحدد أنه يشير لأكثر من واحد.
و يمكنك وضع العدد الذي تريده من الوسوم <col> و تمرير خصائص CSS لهم بالشكل الذي تريده.

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

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

خصائصه

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

الخاصية span

يمكن إضافتها للوسم بهدف جعل الوسم <col> يشير لأكثر من عمود في الجدول.
الرقم الذي تمرره لها كقيمة يمثل عدد الأعمدة التي سيتم وضعها ضمن نفس المجموعة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 4 أعمدة, و قمنا بتقسيم أعمدته لثلاث مجموعات كالتالي:

• المجموعة الأولى تتألف من أول عمود و لم نجري أي تعديل على تصميمها.
• المجموعة الثانية تتألف من العمودين الثاني و الثالث و لون خلفيتها جعلناه أزرق باهت.
• المجموعة الثالثة تتألف من رابع عمود و لون خلفيتها جعلناه أحمر باهت.

ملاحظة: الخاصية style أضفناها في الوسم <col> الثاني و الثالث لتحديد لون الخلفية بشكل مباشر بواسطة الخاصية background-color بلغة CSS.

<table>
	<colgroup>
		<col>
		<col span="2" style="background-color: #d7d9f2;">
		<col style="background-color: #ffe8d4;">
	</colgroup>
</table>
		

جرب الكود

في المثال التالي قمنا بتقسيم الجدول تماماً كما فعلنا في المثال السابق و لكننا هذه المرة قمنا بتحسين تصميم الجدول كله حتى تظهر فائدة تقسيم الأعمدة بشكل أوضح.

ملاحظة: الخاصية class أضفناها في الوسم <col> الثاني و الثالث لتحديد إسم الكلاس الذي يملك الخائص التي نريد لكل عامود أن يطبقها و هذا الأمر لا تشغل بالك به كثيراً لأنك ستفهمه بسهولة حين تدرس لغة CSS.

<style>
	.names {
		background-color: #d7d9f2;
	}
	
	.marks {
		background-color: #ffe8d4;
	}
</style>
..
<table>
	<colgroup>
		<col>
		<col span="2" class="names">
		<col class="marks">
	</colgroup>
</table>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

col {
	display: table-column;
}