الفرق بين المراجعتين لصفحة: «HTML/tbody»
ط استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1' |
ط استبدال النص - 'backgournd' ب'background' |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 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> | <td>الخلية الأولى في السطر الأول</td> | ||
<td> | <td>الخلية الثانية في السطر الأول</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>الخلية الأولى في السطر الثاني</td> | ||
<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> | يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات 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]. | ||
*مواصفة [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}}]] | ||
[[تصنيف:HTML Table]] | [[تصنيف:HTML Table|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 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> لكل جدول (<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;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.