الفرق بين المراجعتين ل"HTML/col"
ط (تغيير ترتيب التصنيفات) |
ط (استبدال النص - 'backgournd' ب'background') |
||
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 8: | سطر 8: | ||
</colgroup> | </colgroup> | ||
<tr> | <tr> | ||
− | <th> | + | <th>التفاح</th> |
− | <th> | + | <th>الليمون</th> |
− | <th> | + | <th>البرتقال</th> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>أخضر</td> |
− | <td> | + | <td>أصفر</td> |
− | <td> | + | <td>برتقالي</td> |
</tr> | </tr> | ||
</table> | </table> | ||
+ | </syntaxhighlight> | ||
− | + | == بطاقة العنصر == | |
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 117: | سطر 118: | ||
</tr> | </tr> | ||
</table> | </table> | ||
− | يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><col></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code> | + | يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><col></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>background-color</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الملائمة. |
=== <code>span</code> === | === <code>span</code> === | ||
تحتوي هذه الخاصية على رقم موجب يُشير إلى عدد الأعمدة التي يمتد عليها العنصر <code><col></code>؛ القيمة الافتراضية لهذه الخاصية إن لم تُذكر هي <code>1</code>. | تحتوي هذه الخاصية على رقم موجب يُشير إلى عدد الأعمدة التي يمتد عليها العنصر <code><col></code>؛ القيمة الافتراضية لهذه الخاصية إن لم تُذكر هي <code>1</code>. | ||
− | |||
مثال عن جدول فيه مجموعة من الأعمدة (العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) وعرّفنا داخله العنصر <code><col></code> الذي يتمد على عمودين، ولون خلفيته أصفر مخضر:<syntaxhighlight lang="html"> | مثال عن جدول فيه مجموعة من الأعمدة (العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) وعرّفنا داخله العنصر <code><col></code> الذي يتمد على عمودين، ولون خلفيته أصفر مخضر:<syntaxhighlight lang="html"> | ||
<table> | <table> | ||
سطر 129: | سطر 129: | ||
</colgroup> | </colgroup> | ||
<tr> | <tr> | ||
− | <th> | + | <th>التفاح</th> |
− | <th> | + | <th>الليمون</th> |
− | <th> | + | <th>البرتقال</th> |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <td> | + | <td>أخضر</td> |
− | <td> | + | <td>أصفر</td> |
− | <td> | + | <td>برتقالي</td> |
</tr> | </tr> | ||
</table> | </table> | ||
سطر 148: | سطر 148: | ||
* <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | * <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | ||
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><col></code> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر: | يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><col></code> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر: | ||
− | * لا تحاول استخدام الخاصية <code>vertical-align</code> على مُحدِّد خاص بعنصر <code><col></code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code><col></code> ولن ترث هذا التنسيق. | + | * لا تحاول استخدام الخاصية <code>[[CSS/vertical-align|vertical-align]]</code> على مُحدِّد خاص بعنصر <code><col></code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code><col></code> ولن ترث هذا التنسيق. |
* إذا لم يكن لعناصر الجدول الخاصية <code>colspan</code>، فاستخدام المُحدِّد <code>td:nth-child(an+b)</code> واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًا <code>td:nth-child(2) { vertical-align: top; }</code> لمحاذاة محتوى العمود الثاني إلى اليمين. | * إذا لم يكن لعناصر الجدول الخاصية <code>colspan</code>، فاستخدام المُحدِّد <code>td:nth-child(an+b)</code> واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًا <code>td:nth-child(2) { vertical-align: top; }</code> لمحاذاة محتوى العمود الثاني إلى اليمين. | ||
* إذا كان لعناصر الجدول الخاصية <code>colspan</code>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>. | * إذا كان لعناصر الجدول الخاصية <code>colspan</code>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>. | ||
سطر 156: | سطر 156: | ||
يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5. | يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5. | ||
+ | |||
+ | == التنسيق الافتراضي == | ||
+ | تعرض أغلبية المتصفحات العنصر <code><col></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-column</code>:<syntaxhighlight lang="css"> | ||
+ | col { | ||
+ | display: table-column; | ||
+ | } | ||
+ | </syntaxhighlight> | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
سطر 161: | سطر 168: | ||
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-col-element HTML5]. | *مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-col-element HTML5]. | ||
*مواصفة [http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2 HTML 4.01]. | *مواصفة [http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2 HTML 4.01]. | ||
− | [[تصنيف:HTML]] | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML Elements]] | + | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] |
− | [[تصنيف:Table]] | + | [[تصنيف:HTML Table|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:48، 24 فبراير 2018
يُعرِّف العنصر <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.