برچسب <thead> HTML

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

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

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

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

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

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

توجه:به صورت پیش‌فرض،<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

چگونه <thead> محتوای

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>ماه
      <th> پس‌انداز
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>فروردین</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>اردیبهشت</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

آزمایش کنید

مثال 4

چگونه عمودی <thead> محتوای

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>ماه
      <th> پس‌انداز
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>فروردین</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>اردیبهشت</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

آزمایش کنید

خصوصیات جهانی

<thead> این برچسب‌ها از خصوصیات رویداد نیز پشتیبانی می‌کنند خصوصیات جهانی در HTML.

خصوصیات رویداد

<thead> این برچسب‌ها از خصوصیات رویداد نیز پشتیبانی می‌کنند خصوصیات رویداد در HTML.

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

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

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

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

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