الفرق بين المراجعتين ل"HTML/thead"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تغيير ترتيب التصنيفات)
ط (استبدال النص - 'backgournd' ب'background')
 
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 5: سطر 5:
 
   <thead>
 
   <thead>
 
     <tr>
 
     <tr>
       <th>Header content 1</th>
+
       <th>الترويسة 1</th>
       <th>Header content 2</th>
+
       <th>الترويسة 2</th>
 
     </tr>
 
     </tr>
 
   </thead>
 
   </thead>
 
   <tbody>
 
   <tbody>
 
     <tr>
 
     <tr>
       <td>Body content 1</td>
+
       <td>خلية عادية 1</td>
       <td>Body content 2</td>
+
       <td>خلية عادية 2</td>
 
     </tr>
 
     </tr>
 
   </tbody>
 
   </tbody>
 
   <tfoot>
 
   <tfoot>
 
     <tr>
 
     <tr>
       <td>Footer content 1</td>
+
       <th>التذييل 1</th>
       <td>Footer content 2</td>
+
       <th>التذييل 2</th>
 
     </tr>
 
     </tr>
 
   </tfoot>
 
   </tfoot>
 
</table>
 
</table>
 
</syntaxhighlight><span>لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.</span>
 
</syntaxhighlight><span>لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.</span>
 +
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 66: سطر 68:
 
* <code>right</code>: عرض المحتوى على يمين الخلية
 
* <code>right</code>: عرض المحتوى على يمين الخلية
 
* <code>justify</code>: عرض المحتوى ملء السطر.
 
* <code>justify</code>: عرض المحتوى ملء السطر.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم <code>left</code> أو <code>center</code> أو <code>right</code> أو <code>justify</code> إلى الخاصية <code>text-align</code>.
+
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم <code>left</code> أو <code>center</code> أو <code>right</code> أو <code>justify</code> إلى الخاصية <code>[[CSS/text-align|text-align]]</code>.
 
=== <code>bgcolor</code> ===
 
=== <code>bgcolor</code> ===
 
تُعرِّف هذه الخاصية لون الخلفية لكل خلية في المجموعة، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
 
تُعرِّف هذه الخاصية لون الخلفية لكل خلية في المجموعة، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
سطر 119: سطر 121:
 
   </tr>
 
   </tr>
 
  </table>
 
  </table>
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><thead></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>backgournd-color</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> أو <code>[[HTML/th|<nowiki><th></nowiki>]]</code> الملائمة.
+
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><thead></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>[[CSS/background-color|background-color]]</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> أو <code>[[HTML/th|<nowiki><th></nowiki>]]</code> الملائمة.
  
 
=== <code>valign</code> ===
 
=== <code>valign</code> ===
سطر 127: سطر 129:
 
* <code>middle</code>: توسيط النص في الخلية رأسيًا.
 
* <code>middle</code>: توسيط النص في الخلية رأسيًا.
 
* <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
 
* <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية <code>vertical-align</code>.
+
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية <code>[[CSS/vertical-align|vertical-align]]</code>.
 +
 
 +
== التنسيق الافتراضي ==
 +
تعرض أغلبية المتصفحات العنصر <code><thead></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-header-group</code>، وتوسيطه رأسيًا (<code>[[CSS/vertical-align|vertical-align]]</code>)، ووراثة قيمة الخاصية <code>[[CSS/border-color|border-color]]</code>:<syntaxhighlight lang="css">
 +
thead {
 +
  display: table-header-group;
 +
  vertical-align: middle;
 +
  border-color: inherit;
 +
}
 +
</syntaxhighlight>
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
سطر 133: سطر 144:
 
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-thead-element HTML5].
 
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-thead-element HTML5].
 
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 HTML 4.01].
 
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 HTML 4.01].
[[تصنيف:HTML]]
+
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
+
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:Table]]
+
[[تصنيف:HTML Table|{{SUBPAGENAME}}]]

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

يُعرِّف العنصر <thead> مجموعةً من الأسطر التي تُمثِّل ترويسةً لأعمدة العنصر <table>.

مثال عن جدول فيه ثلاثة أقسام: ترويسة (عبر العنصر <thead>)، وجسم (عبر العنصر <tbody>)، وتذييل (عبر العنصر <tfoot>):

<table>
  <thead>
    <tr>
      <th>الترويسة 1</th>
      <th>الترويسة 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>خلية عادية 1</td>
      <td>خلية عادية 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>التذييل 1</th>
      <th>التذييل 2</th>
    </tr>
  </tfoot>
</table>

لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <table>.

بطاقة العنصر

تصنيفات المحتوى لا يوجد.
المحتوى المسموح العنصر <tr> صفر مرة أو أكثر.
الوسم المختصر لا يجوز أن يُحذَف وسم البداية.

يمكن حذف وسم النهاية للعنصر <thead> إن كان متبوعًا مباشرةً بعنصر <tfoot> أو <tbody>.

العناصر الأب العنصر <table>، ويجب أن يكون العنصر <thead> بعد أيّ عناصر <caption> أو <colgroup>، لكن قبل عناصر <tbody> و <tfoot> و <tr>.
واجهة DOM HTMLTableSectionElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

align

تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة كل خلية من خلايا المجموعة، وتقبل إحدى القيم الآتية:

  • left: عرض المحتوى على يسار الخلية
  • center: توسيط المحتوى في الخلية
  • right: عرض المحتوى على يمين الخلية
  • justify: عرض المحتوى ملء السطر.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم left أو center أو right أو justify إلى الخاصية text-align.

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، وإنما يجب تنسيق العنصر <thead> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية background-color على خلايا <td> أو <th> الملائمة.

valign

تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من المجموعة، وتقبل إحدى القيم الآتية:

  • baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمة bottom.
  • bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.
  • middle: توسيط النص في الخلية رأسيًا.
  • top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية vertical-align.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <thead> مع ضبط الخاصية display إلى table-header-group، وتوسيطه رأسيًا (vertical-align)، ووراثة قيمة الخاصية border-color:

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

مصادر ومواصفات