الفرق بين المراجعتين لصفحة: «HTML/colgroup»
< HTML
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
ط استبدال النص - 'backgournd' ب'background' |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 4: | سطر 4: | ||
لمشاهدة مثال عن استخدام العنصر <code><colgroup></code>، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code> والعنصر <code>[[HTML/col|<col>]]</code>. | لمشاهدة مثال عن استخدام العنصر <code><colgroup></code>، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code> والعنصر <code>[[HTML/col|<col>]]</code>. | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 47: | سطر 48: | ||
* <code>justify</code>: عرض المحتوى ملء السطر. | * <code>justify</code>: عرض المحتوى ملء السطر. | ||
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر: | يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر: | ||
* لا تحاول استخدام الخاصية <code>text-align</code> على مُحدِّد خاص بعنصر <code>[[HTML/col|<col>]]</code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code>[[HTML/col|<col>]]</code> ولن ترث هذا التنسيق. | * لا تحاول استخدام الخاصية <code>[[CSS/text-align|text-align]]</code> على مُحدِّد خاص بعنصر <code>[[HTML/col|<col>]]</code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code>[[HTML/col|<col>]]</code> ولن ترث هذا التنسيق. | ||
* إذا لم يكن لعناصر الجدول الخاصية <code>colspan</code>، فاستخدام المُحدِّد <code>td:nth-child(an+b)</code> واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًا <code>td:nth-child(2) { text-align: right; }</code> لمحاذاة محتوى العمود الثاني إلى اليمين. | * إذا لم يكن لعناصر الجدول الخاصية <code>colspan</code>، فاستخدام المُحدِّد <code>td:nth-child(an+b)</code> واضبط a إلى الصفر و b إلى موضع العمود في الجدول، مثلًا <code>td:nth-child(2) { text-align: right; }</code> لمحاذاة محتوى العمود الثاني إلى اليمين. | ||
* إذا كان لعناصر الجدول الخاصية <code>colspan</code>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>. | * إذا كان لعناصر الجدول الخاصية <code>colspan</code>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>. | ||
| سطر 103: | سطر 104: | ||
</tr> | </tr> | ||
</table> | </table> | ||
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code> | يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>[[CSS/background-color|background-color]]</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الملائمة. | ||
=== <code>span</code> === | === <code>span</code> === | ||
| سطر 114: | سطر 115: | ||
* <code>middle</code>: توسيط النص في الخلية رأسيًا. | * <code>middle</code>: توسيط النص في الخلية رأسيًا. | ||
* <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | * <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | ||
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام | يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام [[CSS]]، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر: | ||
* لا تحاول استخدام الخاصية <code>vertical-align</code> على مُحدِّد خاص بعنصر <code>[[HTML/col|<col>]]</code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code>[[HTML/col|<col>]]</code> ولن ترث هذا التنسيق. | * لا تحاول استخدام الخاصية <code>[[CSS/vertical-align|vertical-align]]</code> على مُحدِّد خاص بعنصر <code>[[HTML/col|<col>]]</code> ذلك لأنَّ عناصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code> ليست عناصر أبناء للعنصر <code>[[HTML/col|<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>. | ||
| سطر 123: | سطر 124: | ||
يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5. | يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5. | ||
== التنسيق الافتراضي == | |||
تعرض أغلبية المتصفحات العنصر <colgroup> بضبط الخاصية display إلى table-column-group:<syntaxhighlight lang="css"> | |||
colgroup { | |||
display: table-column-group; | |||
} | |||
</syntaxhighlight> | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
المراجعة الحالية بتاريخ 07:49، 24 فبراير 2018
يُعرِّف العنصر <colgroup> مجموعة أعمدة ضمن أحد الجداول.
لمشاهدة مثال عن استخدام العنصر <colgroup>، راجع صفحة العنصر <table> والعنصر <col>.
بطاقة العنصر
| تصنيفات المحتوى | لا يوجد. |
|---|---|
| المحتوى المسموح | إذا كانت الخاصية span مستخدمة، فلا يوجد فهو عنصرٌ فارغ.
أما إذا لم تكن الخاصية موجودةً، فالعنصر |
| الوسم المختصر | يمكن حذف وسم البداية إذا كان أوّل أبناء هذا العنصر هو عنصر <col> ولم يُسبَق هذا العنصر بعنصر <colgroup> حُذِفَ وسم إغلاقه.
يمكن حذف وسم الإغلاق إذا لم يُتبَع هذا العنصر بفراغ أو تعليق. |
| العناصر الأب | العنصر <table>، على أن يكون العنصر <colgroup> بعد العنصر الاختياري <caption> لكن قبل عناصر <thead> و <th> و <tbody> و <tfoot> و <tr>.
|
| واجهة 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
تحتوي هذه الخاصية على رقم موجب يُشير إلى عدد الأعمدة التي تمتد عليها مجموعة الأعمدة الممثلة بالعنصر <colgroup>؛ القيمة الافتراضية لهذه الخاصية إن لم تُذكر هي 1.
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.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <colgroup> بضبط الخاصية display إلى table-column-group:
colgroup {
display: table-column-group;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.