الفرق بين المراجعتين لصفحة: «HTML/colgroup»

المراجعة الحالية بتاريخ 07:49، 24 فبراير 2018

يُعرِّف العنصر <colgroup> مجموعة أعمدة ضمن أحد الجداول.

لمشاهدة مثال عن استخدام العنصر <colgroup>، راجع صفحة العنصر <table> والعنصر <col>.

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	إذا كانت الخاصية `span` مستخدمة، فلا يوجد فهو عنصرٌ فارغ. أما إذا لم تكن الخاصية موجودةً، فالعنصر `<col>` صفر مرة أو أكثر.
الوسم المختصر	يمكن حذف وسم البداية إذا كان أوّل أبناء هذا العنصر هو عنصر `<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.

@@ سطر 4: / سطر 4: @@
 لمشاهدة مثال عن استخدام العنصر <code><colgroup></code>، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code> والعنصر <code>[[HTML/col|<col>]]</code>.
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 47: / سطر 48: @@
 * <code>justify</code>: عرض المحتوى ملء السطر.
 يجدر بالذكر أنَّ هذه الخاصية أهملت في 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>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>.
@@ سطر 103: / سطر 104: @@
     </tr>
   </table>
-يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>backgournd-color</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</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> ===
@@ سطر 114: / سطر 115: @@
 * <code>middle</code>: توسيط النص في الخلية رأسيًا.
 * <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
-يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code>[[HTML/col|<col>]]</code> باستخدام CSS، ضع ببالك الأفكار الآتية عند تنسيق هذا العنصر:
+يجدر بالذكر أنَّ هذه الخاصية أهملت في 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>، فيمكن استخدام مُحدِّادت CSS شبيهة بالمحدد <code>[colspan=n]</code>.
@@ سطر 123: / سطر 124: @@
 يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <colgroup> بضبط الخاصية display إلى table-column-group:<syntaxhighlight lang="css">
+colgroup {
+  display: table-column-group;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
@@ سطر 128: / سطر 136: @@
 *مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element HTML5].
 *مواصفة [http://www.w3.org/TR/html401/tables.html#edef-COLGROUP HTML 4.01].
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Table]]
+[[تصنيف:HTML Table|{{SUBPAGENAME}}]]