آموزش طراحی سایت (HTML CSS Javascript) | آتریا

تگ thead در HTML

مثال (تگ thead در HTML)

یک جدول HTML با استفاده از عناصر <thead> ،<tfoot> و <tbody>::

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

خودتان امتحان کنید »

تعریف و کاربرد تگ thead در HTML

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

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

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

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

پشتیبانی مرورگرها از تگ thead در HTML

عنصر
<thead>	بله	بله	بله	بله	بله

نکته ها و ترفندها

نکته: عنصر <thead> باید حداقل یک تگ <tr> درون خود داشته باشد.

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

تفاوت بین HTML 4.01 و HTML5

هیچکدام از خصوصیت موجود در HTML 4.01 در HTML5 پشتیبانی نمی شود.

خصوصیت ها

خصوصیت	مقدار	توضیحات
align	right left center justify char	در HTML5 پشتیبانی نمی شود. نحوه ترازبندی داخل عنصر <thead> را مشخص می کند.
char	character	در HTML5 پشتیبانی نمی شود. نحوه ترازبندی داخل عنصر <thead> برای کاراکتر را مشخص می کند.
charoff	number	در HTML5 پشتیبانی نمی شود. مقدار حاشیه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون عنصر <thead> را تراز کند.
valign	top middle bottom baseline	در HTML5 پشتیبانی نمی شود. نحوه ترازبندی عمودی محتویات درون عنصر<thead> را مشخص می کند.

ویژگی های عمومی تگ thead در HTML

تگ <thead> از ویژگی های عمومی در HTML پشتیبانی می کند.

رویدادهای عمومی تگ thead در HTML

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

: نوشته شده توسط سمیه فخری; بازدید: 14050

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

# محمد برزگر

در مثال های "خودتان امتحان کنید" یک نقطه ی قرمز ابتدای کد وجود داره ! ین نقطه در کدوم قسمت کیبرد قرار داره؟

# امیر پهلوان صادق

اگر در صفحه مورد نظر روی نقطه راست کلیک کنید و سپس "Inspect Element" را انتخاب کنید، کد HTML قسمت مربوطه ظاهر می شه و می بیند که برای ایجاد نقطه از کد زیر استفاده شده است:
<span class="cm-inval idchar" title="\ufeff" aria-label="\uf eff" cm-text=""> •</span>

# مهدی1365

سلام
میشه یه مثال عملی لز قسمتی که میگین واسه اسکرول خوردن بدنه جدول بدون تغییر در سر تیتر جدول وانتهای جدوله بزنید
من نتونستم این اسکرول رو رو جدولم اعمال کنم
Thead , tfoot ثابت باشن و tbody اسکرول بخوره

# امیر پهلوان صادق

سلام، اگر می خواهید tbody اسکرول بخورد با استفاده از خصوصیت display آنرا block کنید. همچنین برای اینکه بتوانیم رفتارها و خصوصیات یک جدول را حفظ کنیم باید tr ها را با استفاده از خصوصیت display تبدیل به table کنیم.

.tableBodyScroll tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
}

.tableBodyScroll thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

<table class="tableBod yScroll">
<thead>
<th>Invoi ce Number</th&g t;
<th>Purch aser</th>
<th>Invoi ce Amount</th&g t;
<th>Invoi ce Date</th>
</thead>
<tbody>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
<tr>
<td>INV-1 233</td>
<td>Dines h Vaitage</td& gt;
<td>$300& lt;/td>
<td>01/12 /2017</td> ;
</tr>
</tbody>
</table>

بازآوری فهرست دیدگاه‌ها

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

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی