العنصر <tbody>
يُجمِّع العنصر <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.