تعريفه
في حال كانت أعمدة الجدول مقسمة لمجموعات بواسطة الوسم <colgroup>
يمكن استخدام وسوم <col>
على النحو التالي لتحديد خصائص ظهور الأعمدة الموضوعة في نفس المجموعة مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.
<table>
<colgroup>
<col>
<col>
...
</colgroup>
</table>
بشكل عام, الوسم <col>
يمثل عامود واحد في الجدول في حال لم تحدد أنه يشير لأكثر من واحد.
و يمكنك وضع العدد الذي تريده من الوسوم <col>
و تمرير خصائص CSS لهم بالشكل الذي تريده.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <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>
يشير لأكثر من عمود في الجدول.
الرقم الذي تمرره لها كقيمة يمثل عدد الأعمدة التي سيتم وضعها ضمن نفس المجموعة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
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 |
مدعوم |
مدعوم |
مدعوم |
إستخدامه
في المثال التالي قمنا بإنشاء جدول يتألف من 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;
}