برچسب <tbody> HTML

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

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

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

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

توجه:<tbody> عنصر باید یک یا چند برچسب <tr>;.

<tbody> برچسب باید در محیط زیر استفاده شود: به عنوان <table> زیرعناصر یک عنصر، در هر <caption>و<colgroup> و <thead> پس از عنصر.

توجه:به طور پیش‌فرض، عناصر <thead>، <tbody> و <tfoot> بر روی چیدمان جدول تأثیر نمی‌گذارند. اما، شما می‌توانید از CSS برای تنظیم استایل این عناصر استفاده کنید (لطفاً مثال‌های زیر را ببینید)!

مثال

مثال 1

HTML جدول شامل <thead>، <tbody> و <tfoot> عناصر:

<table>
  <thead>
    <tr>
      <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> پس‌انداز
    </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> پس‌انداز
    </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> پس‌انداز
  </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;
  vertical-align: وسط;
  border-color: ارث‌برداری;
}

پشتیبانی مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی