HTML <tbody> تگ

تعریف و استفاده

<tbody> برای گروه‌بندی محتوای متن جدول استفاده می‌شود.

<tbody> برچسب <thead> و <tfoot> عناصر با هم ترکیب می‌شوند تا هر بخش جدول (متن، سربرگ، پایش) مشخص شود.

مرورگرها می‌توانند از این عناصر استفاده کنند تا هنگام اسکرول کردن متن جدول، سربرگ و پایش به صورت مستقل نمایش داده شوند. علاوه بر این، هنگام چاپ جدول‌های بزرگ چند صفحه‌ای، این عناصر می‌توانند باعث شوند که سربرگ و پایش در بالای هر صفحه چاپ شوند.

توجه داشته باشید:<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 {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</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> مقصد کیا (استفاده از CSS):

<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> مقصد کیا (استفاده از CSS):

<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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی