العنصر <col>
يُعرِّف العنصر <col> عمودًا ضمن أحد الجداول، ويُستخدم لإعطاء هيكل تنظيمي للخلايا المتشابهة، ويكون موجودًا داخل عنصر <colgroup>.
مثال عن جدول فيه مجموعة من الأعمدة (العنصر <colgroup>) وعرّفنا داخله عمودًا (العنصر <col>) لون خلفيته أخضر:
<table>
<colgroup>
<col style="background-color: #0f0">
</colgroup>
<tr>
<th>التفاح</th>
<th>الليمون</th>
<th>البرتقال</th>
</tr>
<tr>
<td>أخضر</td>
<td>أصفر</td>
<td>برتقالي</td>
</tr>
</table>
بطاقة العنصر
| تصنيفات المحتوى | لا يوجد. |
|---|---|
| المحتوى المسموح | لا يوجد، فهو عنصرٌ فارغ. |
| الوسم المختصر | يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية. |
| العناصر الأب | العنصر <colgroup> فقط، ويجب ألّا يكون للعنصر <colgroup> الخاصية span.
|
| واجهة DOM | HTMLTableColElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
align
تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة كل خلية من خلايا العمود، وتقبل إحدى القيم الآتية:
left: عرض المحتوى على يسار الخليةcenter: توسيط المحتوى في الخليةright: عرض المحتوى على يمين الخليةjustify: عرض المحتوى ملء السطر.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <col> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر:
- لا تحاول استخدام الخاصية
text-alignعلى مُحدِّد خاص بعنصر<col>ذلك لأنَّ عناصر<td>ليست عناصر أبناء للعنصر<col>ولن ترث هذا التنسيق. - إذا لم يكن لعناصر الجدول الخاصية
colspan، فاستخدام المُحدِّد td:nth-child(an+b)واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًاtd:nth-child(2) { text-align: right; }لمحاذاة محتوى العمود الثاني إلى اليمين. - إذا كان لعناصر الجدول الخاصية
colspan، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد[colspan=n].
bgcolor
تُعرِّف هذه الخاصية لون الخلفية لكل خلية في العمود، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام sRGB، ويسبقها المحرف #. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
black = "#000000" |
green = "#008000" |
||
silver = "#C0C0C0" |
lime = "#00FF00" |
||
gray = "#808080" |
olive = "#808000" |
||
white = "#FFFFFF" |
yellow = "#FFFF00" |
||
maroon = "#800000" |
navy = "#000080" |
||
red = "#FF0000" |
blue = "#0000FF" |
||
purple = "#800080" |
teal = "#008080" |
||
fuchsia = "#FF00FF" |
aqua = "#00FFFF" |
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <col> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية background-color على خلايا <td> الملائمة.
span
تحتوي هذه الخاصية على رقم موجب يُشير إلى عدد الأعمدة التي يمتد عليها العنصر <col>؛ القيمة الافتراضية لهذه الخاصية إن لم تُذكر هي 1.
مثال عن جدول فيه مجموعة من الأعمدة (العنصر <colgroup>) وعرّفنا داخله العنصر <col> الذي يتمد على عمودين، ولون خلفيته أصفر مخضر:
<table>
<colgroup>
<col span="2" style="background-color: #adff2f">
</colgroup>
<tr>
<th>التفاح</th>
<th>الليمون</th>
<th>البرتقال</th>
</tr>
<tr>
<td>أخضر</td>
<td>أصفر</td>
<td>برتقالي</td>
</tr>
</table>
valign
تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من خلايا العمود، وتقبل إحدى القيم الآتية:
baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمةbottom.bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.middle: توسيط النص في الخلية رأسيًا.top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <col> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر:
- لا تحاول استخدام الخاصية
vertical-alignعلى مُحدِّد خاص بعنصر<col>ذلك لأنَّ عناصر<td>ليست عناصر أبناء للعنصر<col>ولن ترث هذا التنسيق. - إذا لم يكن لعناصر الجدول الخاصية
colspan، فاستخدام المُحدِّد td:nth-child(an+b)واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًاtd:nth-child(2) { vertical-align: top; }لمحاذاة محتوى العمود الثاني إلى اليمين. - إذا كان لعناصر الجدول الخاصية
colspan، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد[colspan=n].
width
هذه الخاصية تُحدِّد العرض الافتراضي لكل عمود في مجموعة الأعمدة الحالية، وبالإضافة إلى قبولها قيمًا بالبكسل وبالنسبة المئوية، يمكن لهذه الخاصية أخذ الشكل الخاص 0*، الذي يعني أنَّ عرض العمود يجب أن يكون مساويًا للعرض الأدنى اللازم لعرض محتويات العمود؛ ويمكن استخدام قيم نسبية مثل 0.5*.
يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <col> مع ضبط الخاصية display إلى table-column:
col {
display: table-column;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.