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

من موسوعة حسوب
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
ط استبدال النص - 'backgournd' ب'background'
 
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 2: سطر 2:
يُجمِّع العنصر <code><tbody></code> عنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code> أو أكثر كجسم للعنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.
يُجمِّع العنصر <code><tbody></code> عنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code> أو أكثر كجسم للعنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.


مثال عن جدول فيه جسم (العنصر <code><tbody></code>)، الذي يحتوي على سطرين (العنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code>) وأربع خلايا (العنصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code>)<syntaxhighlight lang="html">
مثال عن جدول فيه جسم (العنصر <code><tbody></code>)، الذي يحتوي على سطرين (العنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code>) وأربع خلايا (العنصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code>):<syntaxhighlight lang="html">
<table>
<table>
   <tbody>
   <tbody>
     <tr>
     <tr>
       <td>Body content 1</td>
       <td>الخلية الأولى في السطر الأول</td>
       <td>Body content 2</td>
       <td>الخلية الثانية في السطر الأول</td>
     </tr>
     </tr>
     <tr>
     <tr>
       <td>Body content 3</td>
       <td>الخلية الأولى في السطر الثاني</td>
       <td>Body content 4</td>
       <td>الخلية الثانية في السطر الثاني</td>
     </tr>
     </tr>
   </tbody>
   </tbody>
</table>
</table>
</syntaxhighlight>يمكن مشاهدة مثال آخر عن هذا العنصر في صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.
</syntaxhighlight>يمكن مشاهدة مثال آخر عن هذا العنصر في صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.
== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 59: سطر 61:
* <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>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
سطر 112: سطر 114:
   </tr>
   </tr>
  </table>
  </table>
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><tbody></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>backgournd-color</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الملائمة.
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><tbody></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>[[CSS/background-color|background-color]]</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> الملائمة.


=== <code>valign</code> ===
=== <code>valign</code> ===
سطر 120: سطر 122:
* <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>.


== ملاحظات الاستخدام ==
== ملاحظات الاستخدام ==
سطر 128: سطر 130:
* وعلى النقيض من العناصر <code>[[HTML/thead|<thead>]]</code> و <code>[[HTML/tfoot|<tfoot>]]</code> و <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> يمكن استخدام العنصر <code><tbody></code> في الجدول أكثر من مرة على التتالي، مما يسمح بتقسيم الأسطر في الجدوال الطويلة إلى أقسام مختلفة، والتي يمكن تنسيقها كما نشاء.
* وعلى النقيض من العناصر <code>[[HTML/thead|<thead>]]</code> و <code>[[HTML/tfoot|<tfoot>]]</code> و <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> يمكن استخدام العنصر <code><tbody></code> في الجدول أكثر من مرة على التتالي، مما يسمح بتقسيم الأسطر في الجدوال الطويلة إلى أقسام مختلفة، والتي يمكن تنسيقها كما نشاء.


==مصادر ومواصفات==
== التنسيق الافتراضي ==
تعرض أغلبية المتصفحات العنصر <code><tbody></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-row-group</code> وتوسيط المحاذاة الرأسية <code>[[CSS/vertical-align|vertical-align]]</code> ووراثة لون الإطار <code>[[CSS/border-color|border-color]]</code>:<syntaxhighlight lang="css">
tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
 
</syntaxhighlight>
 
== مصادر ومواصفات ==
*معيار [https://html.spec.whatwg.org/multipage/tables.html#the-tbody-element HTML Living Standard].
*معيار [https://html.spec.whatwg.org/multipage/tables.html#the-tbody-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element HTML5].
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element HTML5].

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

يُجمِّع العنصر <tbody> عنصر <tr> أو أكثر كجسم للعنصر <table>.

مثال عن جدول فيه جسم (العنصر <tbody>)، الذي يحتوي على سطرين (العنصر <tr>) وأربع خلايا (العنصر <td>):

<table>
  <tbody>
    <tr>
      <td>الخلية الأولى في السطر الأول</td>
      <td>الخلية الثانية في السطر الأول</td>
    </tr>
    <tr>
      <td>الخلية الأولى في السطر الثاني</td>
      <td>الخلية الثانية في السطر الثاني</td>
    </tr>
  </tbody>
</table>

يمكن مشاهدة مثال آخر عن هذا العنصر في صفحة العنصر <table>.

بطاقة العنصر

تصنيفات المحتوى لا يوجد.
المحتوى المسموح العنصر <tr> صفر مرة أو أكثر.
الوسم المختصر يمكن حذف وسم البداية للعنصر <tbody> إن كان أوّل شيء داخله هو العنصر <tr> وإن لم يكن العنصر مسبوقًا مباشرةً بعنصر <tbody> أو <thead> أو <tfoot> حُذِف وسم النهاية له.

لا يجوز أن يُحذَف أيٌّ من وسمَي البداية والنهاية إن كان العنصر فارغًا.

يمكن حذف وسم النهاية للعنصر <tbody> إن كان متبوعًا بعنصر <tfoot> أو <tbody> آخر، أو لم يعد هنالك محتوى إضافي في العنصر الأب <table>.

العناصر الأب ليس من الضروري توفير العنصر <tbody> لكل جدول (<table>) لكي يُعرَض عرضًا سليمًا؛ لكن لا يجوز أن يتواجد إن كان العنصر <table> الأب له العنصر <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، وإنما يجب تنسيق العنصر <tbody> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية background-color على خلايا <td> الملائمة.

valign

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

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

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

ملاحظات الاستخدام

  • يمكن أن يوفِّر العنصر <tbody> -بالاشتراك مع العنصرين <thead> و <tfoot>- معلومات تنظيمية إضافية لبعض الأجهزة مثل الطابعات...
  • يُمثِّل العنصر <tbody> المحتوى الذي يتغيّر من صفحةٍ لآخرى إن طبعنا الجدول على ورق وامتد على أكثر من ورقة، بينما محتوى العنصرين <thead> و <tfoot> سيبقى نفسه لكل صفحة مطبوعة.
  • يمكن تفعيل إمكانية التمرير (scrolling) في العنصر <tbody> بمعزل عن عناصر <thead> و <tfoot> و <caption> لنفس عنصر <table> الأب.
  • وعلى النقيض من العناصر <thead> و <tfoot> و <caption> يمكن استخدام العنصر <tbody> في الجدول أكثر من مرة على التتالي، مما يسمح بتقسيم الأسطر في الجدوال الطويلة إلى أقسام مختلفة، والتي يمكن تنسيقها كما نشاء.

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

تعرض أغلبية المتصفحات العنصر <tbody> مع ضبط الخاصية display إلى table-row-group وتوسيط المحاذاة الرأسية vertical-align ووراثة لون الإطار border-color:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

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