برچسب <tbody> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
محتوای بدنه را در یک جدول قرار دهید
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول اچ‌تی‌ام‌ال با یک عنصر <thead>، یک <tbody> و یک <tfoot>:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <tbody> برای گروه‌بندی محتوای بدنه (body) در یک جدول اچ‌تی‌ام‌ال به کار می‌رود.[۱]

عنصر <tbody> در رابطه با عنصرهای <thead> و <tfoot> استفاده می‌شود تا هر بخش از جدول را مشخص کند (بدنه (body)، سرآمد (header)، زیرآمد (footer)).

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

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

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<tbody> بله بله بله بله بله

نکات و ملاحظات

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

نکته: عنصرهای <thead> ،<tbody>، و <tfoot> به شکل پیش‌فرض طرح‌بندی جدول را تغییر نمی‌دهند. هرچند، شما می‌توانید از CSS برای سبک‌دهی به این عناصر استفاده کنید.

ویژگی‌های سراسری

همچنین برچسب <tbody> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <tbody> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

چگونه محتوای درون <tbody> را تراز کنیم (با CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


مثال

چگونه محتوای درون <tbody> را به شکل عمودی تراز کنیم (با CSS):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr style="height:100px">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


تنظیمات پیش‌فرض CSS

بیشتر مرورگرها عنصر <tbody> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

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


منابع آموزشی