تگ <tbody> HTML

  • الصفحة السابقة <table>
  • الصفحة التالية <td>

التعريف والاستخدام

<tbody> العلامة تستخدم لتجميع محتوى النص في جدول HTML.

<tbody> العنصر مع <thead> و <tfoot> العناصر التكاملية لتحديد كل جزء من الجدول (النص، الرأس، الأقدام).

يمكن للبrowsers استخدام هذه العناصر لجعل رؤوس الصفوف و أرجل الصفوف تظهر بشكل مستقل عند تمرير النص في الجدول. بالإضافة إلى ذلك، عند طباعة جدول كبير عبر عدة صفحات، يمكن لهذه العناصر جعل رؤوس الصفوف وأرجل الصفوف تظهر في أعلى و أقل كل صفحة.

ملاحظة:<tbody> يجب أن يحتوي العنصر الداخلي على واحد أو أكثر من <tr> العلامة.

<tbody> العلامات يجب أن تستخدم في السياق التالي: كـ <table> الفرز العناصر، في أي <caption>و<colgroup> و <thead> بعد العنصر.

نصيحة:بالافتراض، عناصر <thead>،<tbody> و <tfoot> لا تؤثر على تصميم الجدول. ولكن يمكنك استخدام CSS لتعيين النمط لهذه العناصر (انظر الأمثلة أدناه)!

مثال

مثال 1

HTML الجدول الذي يحتوي على عناصر <thead>،<tbody> و <tfoot>:

<table>
  <thead>
    <tr>
      <th>الشهر</th>
      <th>المدخرات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

تجربة بنفسك

مثال 2

استخدام CSS لضبط النمط لـ <thead>،<tbody> و <tfoot>:

<html>
<head>
<style>
thead {لون: أخضر;}
tbody {لون: أزرق;}
tfoot {لون: أحمر;}
table, th, td {
  حافة: 1px منحنى أسود;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>الشهر</th>
      <th>المدخرات</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

تجربة بنفسك

مثال 3

كيفية التوجيه <tbody> المحتوى

<table style="width:100%">
  <thead>
    <tr>
      <th>الشهر</th>
      <th>المدخرات</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

تجربة بنفسك

مثال 4

كيفية التوجيه العمودي <tbody> المحتوى

<table style="width:50%;">
  <tr>
    <th>الشهر</th>
    <th>المدخرات</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

تجربة بنفسك

خصائص العالمية

<tbody> يدعم العنصر خصائص العالمية في HTML.

خصائص الحدث

<tbody> يدعم العنصر خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية <tbody> العنصر:

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

دعم المتصفح

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <table>
  • الصفحة التالية <td>