آموزش تگ thead در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ thead در HTML به صورت کامل آشنا بشید.

تگ Thead در HTML

تگ thead که از کلمه ترکیبی Table Header گرفته شده است، تگی است که در درون تگ Table بکار میرود و با استفاده از آن میتوانید یک هدر یا سربرگ ثابت برای جدول مشخص کنید.

اینکه میگم ثابت یعنی هدر همواره بصورت ثابت در بالا ( ابتدایی ترین ) بخش یک جدول قرار میگیرد.

مضاف بر تگ Thead ما ۲ تگ دیگر به نام های Tbody و Tfoot هم داریم، که تگ Tbody برای ایجاد کردن بدنه اصلی جدول ( بصورت ثابت ) بکار میرود و تگ Tfoot نیز برای تعریف فوتر ( قسمت پایینی جدول بصورت ثابت ) بکار میرود.

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

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

نحوه ی استفاده از تگ <thead>: تگ <thead> درون تگ <table> قرار می گیرد و پس از تگ های <caption> و <colgroup> وقبل از تگ های <tbody> و <tfoot> و تگ <tr> می آید.

مثال از تگ thead در HTML

در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

<thead>
 <tr>
  <th>ردیف</th>
  <th>نام کالا</th>
  <th>قیمت</th>
 </tr>
</thead>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

پشتیبانی از صفات و رویدادهای عمومی

تگ thead از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

• تگ thead واجب است که لااقل دارای یک ( ۱ عدد ) تگ tr ( جهت نمایش محتوا ) باشد.

دستورات CSS پیش فرض

در اکثر مواقع مرورگرهای وب تگ thead را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

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

شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.