HTML <tbody> ƙaɗa

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

<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>Watan</th>
      <th>Taba</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Ganin shi shi

مثال 2

استخدام CSS لتعيين أنماط <thead>،<tbody> و <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Watan</th>
      <th>Taba</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Ganin shi shi

مثال 3

كيفية التساوي <tbody> فواصل المحتوى (استخدام CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Watan</th>
      <th>Taba</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Ganin shi shi

مثال 4

كيفية التساوي العمودي <tbody> فواصل المحتوى (استخدام CSS):

<table style="width:50%;">
  <tr>
    <th>Watan</th>
    <th>Taba</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Ganin shi shi

Yarima

<tbody> Ƙarancin yana da tallace-tallace Yarima a cikin HTML.

Yarima

<tbody> Ƙarancin yana da tallace-tallace Yarima a cikin HTML.

Dukiya na CSS

Duk browsersu yana samu a matsayin manyan gaba daidai da wannan <tbody> Ƙarancin:

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

Gudanarwa

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Gudanarwa Gudanarwa Gudanarwa Gudanarwa Gudanarwa