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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
محتوای عنوان را در یک جدول قرار می‌دهد
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض 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>


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

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

از برچسب <thead> برای گروه‌بندی محتوای سرآمد (header) در یک جدول اچ‌تی‌ام‌ال استفاده می‌شود.[۱]

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

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

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

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

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

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

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

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

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

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

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

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

مثال

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

<table style="width:100%">
  <thead style="text-align:left">
    <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>
</table>


مثال

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

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <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>
</table>


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

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

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}


منابع آموزشی