تگ های HTML – تگ thead

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

تگ های HTML – تگ thead

سلام

با معرفی تگ <thead> از سری تگ های HTML در خدمتتون هستیم.

نمونه کد تگ <thead>

<table>
  <thead>
    <tr>
      <th>ماه</th>
      <th>مبلغ ذخیره شده</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>آبان</td>
      <td>100 هزارتومان</td>
    </tr>
    <tr>
      <td>مهر</td>
      <td>300 هزارتومان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>شهریور</td>
      <td>20 هزارتومان</td>
    </tr>
  </tfoot>
</table>

مثال های بیشتر در پایان مقاله، قرار دارد.

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

تگ <thead> برای گروه هدرها در جدول HTML استفاده میشود، به این معنی که با استفاده از آن می توانید یک هدر یا سربرگ ثابت برای جدول تعریف کنید.

تگ <thead> به تنهایی استفاده نمیشود بلکه همراه با تگ <tbody> و تگ <tfoot> استفاده میشود.

مرورگرهای وب می توانند از این تگ ها برای فعال کردن پیمایش بدنه جدول که مستقل از سربرگ و پاورقی می باشد استفاده کنند. اگر جدول شما داده های زیادی دارد و میخواهید آن را چاپ کنید <thead> و <tfoot> در تمامی صفحات چاپ میشوند که thead در سربرگ و tfoot در پاورقی قرار میگیرند.

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

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

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

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

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

مطلب پیشنهادی: آموزش مقدماتی PHP - قسمت دوم(نحوه نوشتن کدهای PHP)

مثال های بیشتر از تگ <th>:

تعیین رنگ سه تگ <thead>، <tbody> و <tfoot> با Css:

<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>
      <th>مبلغ ذخیره شده</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>آبان</td>
      <td>100 هزارتومان</td>
    </tr>
    <tr>
      <td>مهر</td>
      <td>300 هزارتومان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>شهریور</td>
      <td>20 هزارتومان</td>
    </tr>
  </tfoot>
</table> 

</body>
</html>

تعیین جهت محتوای داخل تگ <thead>:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>ماه</th>
      <th>مبلغ ذخیره شده</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>آبان</td>
      <td>100 هزارتومان</td>
    </tr>
    <tr>
      <td>مهر</td>
      <td>300 هزارتومان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>شهریور</td>
      <td>20 هزارتومان</td>
    </tr>
  </tfoot>
</table> 

</body>
</html>

و مثال زیر

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>ماه</th>
      <th>مبلغ ذخیره شده</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>آبان</td>
      <td>100 هزارتومان</td>
    </tr>
    <tr>
      <td>مهر</td>
      <td>300 هزارتومان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>شهریور</td>
      <td>20 هزارتومان</td>
    </tr>
  </tfoot>
</table> 

</body>
</html>

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

اکثر مرورگرها برای نمایش تگ <thead> از خصوصیات زیر استفاده میکنند:

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

معرفی تگ <thead> به پایان رسید.

موفق باشید.